ES6 的 import 和 export

import 基本语法

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
29
// 默认导入,即导入 export default 中的模块
import defaultExport from "module-name";

// 通过一个别名 name 导入所有模块
import * as name from "module-name";

// 导入指定模块
import { export1 } from "module-name";

// 导入指定模块,并设置别名
import { export1 as alias1 } from "module-name";

// 导入多个模块
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";

// 导入默认模块和其他模块
import defaultExport, * as name from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";

// 仅执行模块中的代码,不导入任何模块
import "module-name";
// 也适用于动态导入:
(async () => {
if (somethingIsTrue) {
// import module for side effects
await import('/modules/my-module.js');
}
})();

export 基本语法

ESM 模块导出有两种类型:具名导出和默认导出。每个模块可以有多个具名导出,但只能有一个默认导出。两种类型导出的基础语法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 具名导出

// 导出已声明功能
export { myFunction, myVariable };
// 导出单个功能 (可使用 var, let, const, function, class)
export let myVariable = ...;
export function myFunction() { ... };

// 默认导出

// 以默认导出形式导出已声明功能
export { myFunction as default };
// 以默认导出形式导出单个功能
export default function () { ... }

// 聚合导出(Aggregating)
export { default as function1, function2 } from 'bar.js';

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!