ECMAScript 2020 (ES11) 中的模块系统详解

前言

随着前端技术的不断发展，模块化编程已经成为了不可或缺的一环。在之前的 ECMAScript 标准中也有对模块化的支持，但不尽如人意。在 ECMAScript 2020 标准中，模块系统有了一些改进，使得我们能够更加方便地进行模块化开发。

ES11 模块化开发具体改进

import() 动态导入

在之前的 ECMAScript 标准中，模块的加载是在运行时同步进行的，也就是说在一个模块依赖另一个模块的情况下，只能按照依赖关系依次加载，无法在运行时才根据需要加载。而在 ECMAScript 2020 标准中，提供了新的动态导入方法 import()，使得我们能够在运行时根据条件动态加载模块。

if (/* some condition */) {
  import("./module").then((module) => {
    // use module
  });
}

export * as ns from 'mod'

在 ECMAScript 2020 标准中，我们可以使用 export * as ns from 'mod' 将一个模块中声明的所有输出绑定到命名空间对象上。

// module-a.js
export let a = 1;
export let b = 2;

// module-b.js
export * as moduleA from './module-a.js';
console.log(moduleA.a); // 1
console.log(moduleA.b); // 2

export v from 'mod'

在 ECMAScript 2020 标准中，export v from 'mod' 可以将一个模块中默认输出的值重新导出为另一个名称。

// module-a.js
export default 42;

// module-b.js
export foo from './module-a.js';
console.log(foo); // 42

export * as ns from 'mod'

在 ECMAScript 2015 标准中，export default function 导出默认函数，导出的是函数对象。但在 ECMAScript 2020 标准中，export default function 按照一般规则导出的是函数本身。

// module.js
export default function () {
  // ...
}

// other-module.js
import myFunc from './module.js';
console.log(myFunc); // function()

总结

随着前端技术的不断发展，模块化编程已经成为了不可或缺的一环。在 ECMAScript 2020 标准中，模块系统有了一些改进，使得我们能够更加方便地进行模块化开发。本篇文章介绍了其中的一些改进，希望能够对读者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476e1fa968c7c53b037c64f