ES6 模块(Module)

[felix-cao]

JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 CommonJS 模块请移步 《CommonJS 的模块规范》,

ES6 模块的设计思想是静态化，即“编译时加载“或“静态加载“； 静态化的目的是使得编译时就能确定模块的依赖关系，以及输入和输出的变量： 🔢

• ES6 的模块自动采用严格模式，不管你有没有在模块头部加上 use strict。
• 👍 每一个模块都是一个独立的文件，有自己的作用域，在一个文件里定义的变量、函数、类都是私有的，对其他文件不可见。
• 【导出】使用 export 声明需要导出的变量、函数或类
• 【导入】使用 import 声明从其他模块导入变量、函数或类。
• 👍 import 和 export 命令只能在模块的顶层

一、模块导出的写法

1.1、写法一： 直接 export

在每个变量、函数或类前面加上关键字 export。

// lib.ts
export const helloWorld = 'Hello World!';
export function add(x, y) {
  return x + y;
}
export class Person {
  constructor(name) {
    this.name = name
  }
  getName() {
    return this.name
  }
}
// feature.ts, 在这个文件中 import 导入
import {helloWorld , add, Person} from 'lib';
const person = new Person('Felix');
console.log(helloWorld);
console.log(add(10,15));
console.log(person.getName());

上面的代码在 lib.ts 文件里导出了一个变量声明 sqrt 和 两个函数声明 square 和 add， export 是在每个变量声明或函数声明前使用的。

1.2、写法二： export 列表

但是上面的写法不简洁，每个要输出的部分前都写上 export 很麻烦，所以 ES6 又给我们提供了一个简洁优雅的写法：只写一行你想要输出的变量列表，再用花括号包起来。

// lib.ts 
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function add(x, y) {
    return x + y;
}
export {sqrt, square, add}; // export 导出的另外一个写法（推荐）

// feature.ts, 在这个文件中 import 导入
import {sqrt, square} from 'lib';
console.log(square(8));
console.log(add(10,15));

• import 命令接受一个对象（用大括号表示），里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（lib.ts）对外接口的名称相同。 👍
• 注意 import { sqrt, square } from 'lib’; 是 import 的特有语法，并不是析构(destructing) 语法
• 如果想为输入的变量重新取一个名字，import 命令要使用 as 关键字，将输入的变量重命名。

1.3、写法三：export default 默认输出

export default 一般用于输出单个值，export default 是在 export 的基础上，为规定模块提供一个默认的单一的对外接口。

从前面的例子可以看出，使用 import 命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到 export default 命令，为模块指定默认输出。

// add.ts
export default function (x,y){
  return x + y;
}

// feature.ts
import add from './add'
add(10,9);

上面的代码在 add.ts 文件里导出一个匿名函数，在函数前面使用了 export default， 在 feature.ts 文件里使用 Import 导入，默认输出时以文件名作为默认变量

• 默认输出的时候不需要指定一个变量名，它默认就是文件名，当然您也可以为该匿名函数指定任意名。 👍
• 加载该模块时，import 命令可以为该匿名函数指定任意名字。
• 需要注意的是，这时 import 命令后面，不使用大括号。 👍

本质上，export default 就是输出一个叫做 default 的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

上面的代码在 modules.js 文件中，导出 add 函数并重命名为 default，在 app.js 中导入这个 default 并重命名为 foo.

正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。它后面不能跟变量声明语句。

// 正确
var a = 1;
export default a;
// 错误, export default 后面跟的是变量声明表达式
export default var a = 1;

👍 export default 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此 export default 命令只能使用一次。所以，import 命令后面才不用加大括号，因为只可能唯一对应 export default 命令。

有了export default命令，输入模块时就非常直观了，以输入 lodash 模块为例。

import _ from 'lodash';

👍 如果想在一条 import 语句中，同时输入默认方法和其他接口，可以写成下面这样。

import _, { each, forEach } from 'lodash';

二、导入之模块的整体加载 *

除了指定加载某个输出值，还可以使用整体加载，即用 *星号()** 指定一个对象，所有输出值都加载在这个对象里

// lib.ts
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function add(x, y) {
    return x + y;
}
export {sqrt, square, add};

// feature.ts
import * as lib from 'lib';
console.log(lib.square(8));
console.log(lib.add(10,15));

三、模块的重命名 as

如果导入的变量名恰好和你模块中的变量名冲突了，ES6 允许你给你导入的东西重命名：

import {add as addNum} from "./add";
addNum(10,9);

类似地，你在导出变量的时候也能重命名。这个特性在你想将同一个变量名导出两次的场景下十分方便，举个栗子：

function add() {}
export {
    add as addNum,
    add as addInt
};

四、import 与 export 复合写法

如果在一个模块之中，先输入后输出同一个模块，import 语句可以与 export 语句写在一起。

export { foo, bar } from 'my_module';

// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

上面代码中，export 和 import 语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。

五、有趣的静态和动态

随着技术发展，现今 JavaScript 作为一门动态语言已经得到了一个令人惊讶的静态模块系统。

• 你只可以在模块的最外层作用域使用 import 和 export，不可在条件语句中使用，也不能在函数作用域中使用 import。
• 所有导出的标识符一定要在源代码中明确地导出它们的名称，你不能通过编写代码遍历一个数组然后用数据驱动的方式导出一堆名称。
• 模块对象被冻结了，所以你无法 hack 模块对象并为其添加 polyfill 风格的新特性。
• 一个模块的所有依赖必须在模块代码运行前完全加载、解析并且及早连接，不存在一种通过 import 来按需懒加载的语法。
• import 模块产生的错误没有错误恢复机制。一个 app 可能囊括了上百个模块，一旦有一个模块无法加载或连接，所有的模块都不会运行，而且你不能在 try/catch 代码块中捕捉 import 的错误信息。（上面这些描述的本意是说：系统是静态的，webpack 可在编译时为你检测那些错误。）
• 不支持在模块加载依赖前运行其它代码的钩子，这也意味着无法控制模块的依赖加载过程。

Reference

• ES6 in Depth (关于 ES6 的一系列新特性的介绍。)
• 深入浅出ES6（十六）：模块 Modules