ES6 Module 语法学习总结

本文所用的示例代码在这里

• ES6的Module加载是编译时加载，也就是说在代码运行以前就把各个模块的引用关系肯定了。所以没法在运行时再去决定是否加载模块，从哪里加载模块，以及加载模块的哪一个部分。
• ES6模块的加载与Nodejs的模块加载不一样，ES Module模块的加载是对模块的引用，所以当模块导出的变量值变化以后，模块的引入方也会受到影响。

export

模块的导出其实是导出一个对外的接口，能够通俗地理解为把这段代码共享出来，给其余模块使用。 一个模块导出能够有如下方式：

export const a = 5;
export class A {}
export function b() {}
const c = 'my export name is default';
export default c; // 将 c 重命名为 default
复制代码

以上语法与下面的语法等价:

const a = 5;
class A {}
function b() {}
const c = 'my export name is default';
// 统一导出
export {
	a,
  A,
  b,
  c as default // 将 c 重命名为 default
};
复制代码

import

对于上述几种导出方式，对应的引入方式为

import { a as renameA, A, b, default as d } from './module';
复制代码

还能够全量加载

import * as module1 from './module';
// 若是只是想执行所引用的模块中的代码，而不使用它，能够这样
import * from './module'
复制代码

export default 导出默认模块

前面的代码里有 export default c 这样的代码，实际上是导出了一个默认的输出内容，这样能够方便其余模块加载。

// module.js
const c = 'this is default content';
export default c

// index.js
import anyName from './module';
console.log(anyName); // this is default content
复制代码

这样使用，调用方无需知道所引用的模块中默认的导出内容的名字，便可引入该内容。 而实际上，default 是引入模块的一个属性，使用全量引入时，它被包含在引入的变量中。

// module.js
const c = 'this is default content';
export default c;

// index.js
import * as module1 from './module';
console.log(module1.default); // this is default content
复制代码

使用 as 重命名

使用as能够对导出或者导入的内容进行重命名。

// 导出重命名
const a = 'My name is a, but i am renamed newA';
export { a as NewA };

// 导入重命名
import { newA as newNewA } from "./module2";
console.log(newNewA);
复制代码

export 与 import复合使用

如下示例代码中均使用 module1.js ,

// module1.js
export const a = 'a, maybe will be rename to newA or newNewA';
export class A {}
export function b() { console.log('I am function b'); }
const c = 'my export name is default';
export default c; // 将 c 重命名为 default
复制代码

普通导入导出使用以下。

// module2.js
export { a, A, b } from './module1';

// index.js
import { a, A } from './module2';
复制代码

导出时重命名:

// module2.js
export { a as newA, A, b } from './module1';

// index.js
import { newA, A } from './module2';
复制代码

全量导出。

// module2.js
export * from "./module1";

// index.js
import * as module2 from './module2';
console.log(module2);
// b: function b() {}
// a: "a, maybe will be rename to newA or newNewA"
// A: function A() {}
复制代码

注意，使用 export * 全量导出时，导出的内容不包含 default 。

导出 default :

// module2.js
export { default } from "./module1";

// index.js
import { default as newDefault } from "./module2";
console.log(newDefault);
复制代码

语雀连接