ES6 模块

发表于   |   分类于 ，

阅读本文需要有一定的 ES6 基础。

ES6 模块是 ES6 中的一个非常重要的特性，它收集了多年来各种模块化的优点，解决了其间的差异化，并期望能最终形成一个大家共同遵守的规范。

关于 JS 的模块化历程，可以参考 这篇文章。

本文从 import 和 export 两部分对 ES6 模块做一个基础的介绍，这两部分内容也就是 ES6 模块的全部了。

import

来看一组现有的 import 语法：

1
2
3
4
5
6
7
8
9
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

以上代码来自 MDN 上面关于 import 的介绍。

import 是模块导入语句的关键字，通过指定具体的导入方式，可以进行相应模块的导入操作。

以下是逐条说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 导入默认模块
import defaultExport from "module-name";
// 导入所有模块并指定一个新的名称，导入后的对象包含了所有具名模块
import * as name from "module-name";
// 导入指定模块
import { export } from "module-name";
// 导入指定的模块并指定一个新的名称，即直接进行重命名操作
import { export as alias } from "module-name";
// 导入多个模块
import { export1 , export2 } from "module-name";
// 导入多个模块，并对其中的某一部分进行重命名
import { export1 , export2 as alias2 , [...] } from "module-name";
// 同时导入默认模块和其他模块
import defaultExport, { export [ , [...] ] } from "module-name";
// 同时导入模块模块，并将所有模块以新名称进行导入
import defaultExport, * as name from "module-name";
// 直接引入模块，不导入任何东西
import "module-name";

export

export 是模块导出语句的关键字，同样的，来看一组 export 的语法，代码来自 MDN 上面的 export：

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
30
// 导出指定模块
export { name1, name2, …, nameN };
// 导出指定模块，并进行重命名
export { variable1 as name1, variable2 as name2, …, nameN };
// 导出变量
export let name1, name2, …, nameN; // also var
// 导出变量，并对变量直接进行定义
export let name1 = …, name2 = …, …, nameN; // also var, const
// 导出函数
export function FunctionName(){...}
// 导出类
export class ClassName {...}

// 导出一个表达式作为默认模块
export default expression;
// 导出匿名函数作为默认模块，类和生成器函数亦可
export default function (…) { … } // also class, function*
// 导出具名函数作为默认模块，类和生成器函数亦可
export default function name1(…) { … } // also class, function*
// 将指定模块作为默认模块进行导出
export { name1 as default, … };

// 从另一个模块提取所有模块进行导出
export * from …;
// 从另一个模块提取指定模块进行导出
export { name1, name2, …, nameN } from …;
// 从另一个模块提取指定的模块并进行重命名后再导出
export { import1 as name1, import2 as name2, …, nameN } from …;
// 从另一个模块导出默认模块
export { default } from …;

一些说明

  1. 在进行 import 的时候，import { export } from "module-name"; 中的 { export } 语法并不等同于对象的解构，这是 import 专门的语法。
  2. export 和 export default 的区别是在后续进行引入的时候需要分别使用 import { ... } from 和 import ... from 进行操作。
  3. 作为默认模块进行导出时，匿名函数和具名函数在导出之后并无区分。
  4. 导出后的模块，如果存在变量，该变量对外是不可变的。可以通过模块内置的方法进行改变。

大体上就是这些内容了，ES6 的模块化给编程领域尤其是前端开发这一块，带来非常大的便利。

由于市面上直接支持 ES6 模块的产品的覆盖率依然不够理想，所以需要通过一些转译工具进行转译之后再进行使用。

目前，本人主要工作是在进行微信小程序的开发，好在小程序现在的开发环境已经基本支持 import 和 export 语法（除了 export ... from），所以可以放心无忧的进行现代化 ES6 代码的编写了。目前使用原生代码进行微信小程序的编写，感觉良好。至于 wepy 和 mpvue 之类的前瞻框架，由于未进行全面使用，所以不做过多评述。

在撰写本文的时候，参考了大量的资料，但是提笔的时候却又感觉很词穷，所以只是简单的做了一个代码层次的注释说明，更多的参考资料罗列如下，请诸君自行参阅。

参考资料与拓展阅读

<本文完>