本文所用的示例代码在这里
- 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);
