ES6 的 export / import 常用方式总结

1，注意点

export

1，export 命令只能输出3种接口：

• 函数（Functions）
• 类（Classes）
• var、let、const 声明的变量（Variables）。

2，export 命令输出的接口，与其对应的值是动态绑定关系。即通过该接口，可以取到模块内部实时的值。

// test1.js
export var foo = "cat";
setTimeout(() => (foo = "dog"), 500);
1
2
3

import { foo } from "./test1.js";

setTimeout(() => {
  console.log(foo); // dog
}, 1000);
1
2
3
4
5

3，export 命令规定：对外的接口，必须与模块内部的变量建立一一对应关系。

也就是说，如果要导出上面的3种接口，只能使用下面3种方式

export var firstName = "cat"; // 直接导出

function add(x, y) {
  return x + y;
}
export { add }; // 放到对象中

class MyName {}
export { MyName as MyNameFaker }; // 使用别名
1
2
3
4
5
6
7
8
9

而不是这样：

// 报错
export 1;

// 报错
var m = 1;
export m;

// 报错
function f() {}
export f;
1
2
3
4
5
6
7
8
9
10

4，export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错。

这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

function foo() {
  export default "bar"; // SyntaxError
}
1
2
3

import

以下面的 test1.js 导出为例

// test1.js
export var firstName = "cat"; // 直接导出
export var obj = { name: '下雪天的夏风' }
function add(x, y) {
  return x + y;
}
export { add }; // 放到对象中
1
2
3
4
5
6
7

1，通过 {} 来指定从其他模块导入的变量名。变量名必须与被导入模块对外接口的名称相同。

2，通过 as 关键字，将导入的变量重命名。

import { firstName as myname } from './test1.js';
1

3，导入的变量都是只读的，因为它的本质是导入接口。

import { firstName, obj } from './test1.js'
obj.name = 123; // ok
firstName = {}; // TypeError: Assignment to constant variable;
1
2
3

4，import 有变量提升的效果，会提升到整个模块的头部，首先执行。

add(1, 1);
import { add } from "./test1.js";
1
2

export default

1，一个模块只能有一个默认输出，因此 export default 命令只能使用一次。

2，本质上：export default 就是输出一个叫做 default 的变量或方法。所以

// test1.js
function add(x, y) {
  return x + y;
}
export default add;
// 等价于
export { add as default };
1
2
3
4
5
6
7

import otherName from './test1.js'; // otherName 就是 add 函数。
// 等价于
import { default as otherName } from "./test1.js";
1
2
3

同理

// 可行
export default 123;
// 报错
export 123;
1
2
3
4

// 正确
export var a = 1;
// 正确
var b = 1;
export default b;

// 错误
export default var a = 1;
1
2
3
4
5
6
7
8

3，import 可同时导入默认导出，和其他接口。

// test1.js
export var a = 1;

function add(x, y) {
  return x + y;
}
export default add;
1
2
3
4
5
6
7

import otherName, { a } from './test1.js'; // otherName 就是 add 函数。
1

2，常用方式

举例1，

// test.js
export var firstName = "cat";

function add(x, y) {
  return x + y;
}
export { add };

class MyName {}
export { MyName as MyNameFaker };
1
2
3
4
5
6
7
8
9
10

import { firstName, add, MyNameFaker } from "./test.js";
1

举例2，

// test1.js
export const firstName = "cat";

export function add(x, y) {
  return x + y;
}

export default {
  name: "123",
};
1
2
3
4
5
6
7
8
9
10

// test2.js
export * from './test1.js' // 导出除默认导出之外的所有导出。

import a from "./test1.js"; // a: {name: '123'}
1
2
3
4

// test3.js
import { firstName, add } from "./test2.js";
// SyntaxError: The requested module './test2.js' does not provide an export named 'default'
import a from "./test2.js"; 
1
2
3
4

举例3，

// test1.js
export var a = 1;
function add(x, y) {
  return x + y;
}
export default add;
1
2
3
4
5
6

// test2.js
export { default as addFaker } from "./test1.js";
1
2

import { addFaker } from "./test2.js"; // addFaker 就是 add 函数
1

而如果

// test2.js
export * as all from "./test1.js";
1
2

import { all } from "./test2.js"; // all 是 { a: 1, default: add函数 }
1

---

参考 - 阮一峰-es6