前言
ES6、ES8 分别是 ECMAScript 6 和 ECMAScript 2017 的简写，它们都是 JavaScript 语言的标准版本。随着浏览器和 Node.js 环境的不断更新，我们现在已经可以使用这两个版本了。
ES6 引入了模块的概念，可以让我们更好的组织代码，提高代码复用性和可读性。而 ES8 在 ES6 基础上提出了一种新的模块加载方案。本文将分别介绍 ES6 模块和 ES8 模块，并比较它们的区别。
ES6 模块
ES6 模块是通过 export 和 import 语法来实现模块的。模块内的代码被封装起来，只有通过 export 导出的变量或函数才对外可见。import 语句可以引入其他模块导出的变量或函数。
导出变量或函数
通过 export 默认导出一个变量或函数：
// module1.js
export default function sayHello() {
console.log('Hello!');
}通过 export 命名导出一个变量或函数：
// module2.js
export function sayHi() {
console.log('Hi!');
}
export const PI = 3.1415926;引入其他模块
使用 import 引入默认导出的变量或函数：
// app.js import sayHello from './module1'; sayHello();
使用 import 引入命名导出的变量或函数：
// app.js
import { sayHi, PI } from './module2';
sayHi(); // Hi!
console.log(PI); // 3.1415926ES8 模块
ES8 模块是通过 import() 来动态加载模块，且可以异步加载，提高了代码的效率。同时还有许多新特性，比如支持预加载、支持多次加载、支持不同类型的模块加载器等等。
动态加载模块
使用 import() 来动态加载模块：
const module = await import('./module1.js');
console.log(module.default()); // Hello!预加载模块
通过 import() 加载模块时可以使用 import() 函数的 import.meta.glob 来提前加载模块，类似于 webpack 中的 code splitting：
// app.js
const modulePaths = ['./module1.js', './module2.js', './module3.js'];
Promise.all(modulePaths.map(async path => {
const { default: module } = await import(path);
return module();
}));// module1.js
export default function sayHello() {
console.log('Hello!');
}// module2.js
export default function sayHi() {
console.log('Hi!');
}// module3.js
export default function sayBye() {
console.log('Bye!');
}支持多次加载模块
在 ES6 模块中，模块只会运行一次， import 导入的模块只会执行一次，而 ES8 模块支持多次加载、多次执行。
-- -------------------- ---- ------- -- ------ ----- -------- ----- - ----- - -------- --------- - - ----- ----------------------- ------------ -- ----- ----- - -------- --------- - - ----- ----------------------- ------------ -- ----- ----- - ------
支持不同类型的模块加载器
ES8 模块支持多种不同的模块加载器。在浏览器环境下，可以使用原生的 import() 函数加载模块，在 Node.js 环境下，可以使用第三方库如 @std/esm 来支持 ES8 模块。
总结
ES6 模块和 ES8 模块都是 ECMAScript 标准中的模块加载方案。ES6 模块使用 export 和 import 语法来导出和引入变量或函数，ES8 模块通过 import() 函数来动态加载模块，并且具有更多新特性，例如支持预加载、支持多次加载、支持不同类型的模块加载器等。我们可以根据具体的场景来选择使用哪一种模块加载方案。
参考文献
- ES6 Modules - MDN Web Docs
- ES8 Modules - TC39
- ES2018: Getting to know the “Dynamic Import” statement
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653084c57d4982a6eb205bd7