阅读 32

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);
复制代码

语雀链接