ES6（ECMAScript 2015）引入了许多新特性，其中最重要的莫过于模块化。模块化使得 JavaScript 代码更易于维护和扩展，同时也提高了代码的可读性和可重用性。在本文中，我们将探讨 ES6 模块化的详细内容。
什么是模块？
在 JavaScript 中，一个模块就是一个 JavaScript 文件。文件中定义的函数、变量和类可以被导出（export）并在其他文件中使用。典型的导出方式包括：export 和 export default。
export
export 用于导出命名变量、函数和类。例如，我们可以将下面的函数导出：
export function foo() {
console.log('hello');
}然后在其他文件中将其导入：
import { foo } from './my-module.js';
foo(); // 'hello'也可以将变量和类导出：
export const a = 1;
export class MyClass {
// ...
}export default
export default 用于导出一个默认值，通常用于导出一个类或函数。例如，我们可以将下面的类导出：
export default class MyClass {
// ...
}然后在其他文件中将其导入：
import MyClass from './my-module.js'; const myClass = new MyClass();
如何导入模块？
使用 import 语句可以导入模块，import 后跟需要导入的模块路径。例如，我们可以导入上面的 foo 函数：
import { foo } from './my-module.js';还可以使用 import 导入默认值：
import MyClass from './my-module.js';
需要注意的是，导入的模块是只读的，其导出的变量、函数和类不能被修改。如果需要改变模块导出的值，可以通过 export 重新导出一个修改后的版本。
模块的加载时机
模块是懒加载的，只有在需要的时候才会被加载。例如，在下面的代码中，my-module.js 只有在 foo 函数被调用时才会被加载。
-- -------------------- ---- ------- ------ - --- - ---- ----------------- -------- ----- - -- --- - -------- ----- - ------ - ------
总结
ES6 模块化是 JavaScript 中最重要的新特性之一，它使得我们可以将代码更好地组织起来，提高代码的可维护性和可重用性。本文简单介绍了如何导出和导入模块，以及模块的加载时机。希望读者通过本文的介绍，更加深入地了解 ES6 模块化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458c2c5968c7c53b0b12d0a