JavaScriptReact

声明文件的写法的区别

Catalogue   
  1. 1. 基本的声明
    1. 1.1. 声明文件
      1. 1.1.1. export default XXX 和 export {XXX} 区别
    2. 1.2. 导入文件
  2. 2. module.exports 和 exports的区别
  3. 3. module.exports 和 export的区别
  4. 4. export default class 中default作用
  5. 5. 注意

基本的声明

声明文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var x = 1;
module.exports.x = x; //导出变量

var add = function(a, b){
  return a + b;
};

module.exports.add = add; //导出函数


function multiplay(a, b) {}

export {multiplay} // 导出对象

module.exports = {}; //ES5的写法，导出多个文件


export {add as default}; //导出默认值

export default class A {}

export default () => {}

export {Header, Bottom};

export type {TypeA, TypeB}; //导出类型

export default XXX 和 export {XXX} 区别

  • export default XXX:

这种方式导出 XXX 作为模块的默认导出。
导入时，可以使用任意名称来引入，默认导出不需要花括号。
只能有一个默认导出。

  • export {XXX}:

这种方式导出 XXX 作为模块的命名导出之一。
导入时，必须使用花括号并且名称必须匹配。
一个模块可以有多个命名导出。

总结：export default 用于导出默认成员，而 export {} 用于导出一个或多个命名成员。导入时，对应的语法也有所不同。

导入文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


var app = require('./app.js');

import A from './a';
import { B } from './b';
import { C, D, E } from './c';
import { F } from '@rui/f'; //使用路径配置
import * as example from './example'; //导入所有并重命名

import * as React from 'react';//将所有用export导出的成员赋值给React，导入后用React.xx访问
import React from 'react';//仅将默认导出的内容赋值给React


//导入再导出
import {sum as sumXX} from './example';
export {sumXX};

JavaScript、TypeScript文件怎么互相调用呢？

import
export

require

全局声明

模块导出声明

module.exports 和 exports的区别

node执行一个文件时，会在这个文件内生成一个exports和module对象，而module对象又有一个exports对象

  • exports：对于本身来讲是一个变量（对象），它不是module的引用，它是{}的引用，它指向module.exports的{}模块。只能使用.语法 向外暴露变量。
  • module.exports：module是一个变量，指向一块内存，exports是module中的一个属性，存储在内存中，然后exports属性指向{}模块。既可以使用.语法，也可以使用=直接赋值。

module.exports 和 export的区别

前者是ES5的写法，后者是ES6的写法

因为：

  • module.exports初始值为一个空对象 {}
  • require返回的是module.exports

export default class 中default作用

有default的时候，在引用时可以自定义名称，没有default时需要使用{}括起来并且名称必须与class名称一致，每个文件只能有一个default

1
2
3
4
5
6
7
8
9
10
11
12

// 声明
export default class Template{}

// 导入
import Template from './components/Templates';

// 别名
import TheTemplate from './components/Templates';



注意

  • 尽量使用ES6的写法，不要混用
  • export default语法不兼容CommonJS和AMD的exports
  • 使用 export = 导出一个模块，则必须使用 TypeScript 的特定语法 import module = require(“module”) 来导入此模块