在开发一个大型 Web 应用时，我们常常会面临一个问题：如何管理项目中的依赖关系？我们需要使用各种外部库和框架，这些库和框架之间可能会存在依赖关系，并且我们自己编写的模块也可能会互相依赖。这个时候，我们需要一种能够管理这些依赖关系的机制，使得我们能够方便地引用这些库和框架，并保证它们的依赖关系正确地被处理。
ES11 (2020) 中的模块系统就提供了这样的机制。在这篇文章中，我们将学习如何使用 ES11 中的模块系统来管理项目中的依赖关系。
模块的基本使用
ES11 中的模块可以通过 import 和 export 关键字来引用和导出。我们可以使用 import 来引用一个模块，比如：
import { foo } from './module.js';这个代码会从当前目录下的 module.js 文件中导入名为 foo 的变量。在 module.js 文件中，我们需要使用 export 来导出该变量，比如：
export const foo = 123;
这个代码会将一个名为 foo 的常量导出。我们可以将 export 放在任何语句之前，比如在函数声明之前：
export function sayHello() {
console.log('Hello!');
}这个代码会将一个名为 sayHello 的函数导出。当我们需要使用该函数时，可以使用 import 来引用：
import { sayHello } from './module.js';
sayHello(); // 输出 "Hello!"如果我们需要导出多个变量或函数，可以使用一个 export 语句来导出它们：
const foo = 123;
function sayHello() {
console.log('Hello!');
}
export { foo, sayHello };这个代码会导出一个名为 foo 的常量和一个名为 sayHello 的函数。在另一个模块中，我们可以使用一个 import 语句来引用它们：
import { foo, sayHello } from './module.js';
console.log(foo); // 输出 123
sayHello(); // 输出 "Hello!"模块的默认导出
有时候，我们希望一个模块只导出一个东西，这时候可以使用默认导出。默认导出使用 export default 语句来导出一个值，比如：
export default function() {
console.log('Hello!');
}这个代码会默认导出一个函数。在另一个模块中，我们可以使用一个 import 语句来引用这个函数，不需要指定函数的名称：
import sayHello from './module.js'; sayHello(); // 输出 "Hello!"
如果一个模块既有默认导出，又有命名导出，我们可以同时使用 import 语句来引用它们：
import sayHello, { foo } from './module.js';
console.log(foo); // 输出 123
sayHello(); // 输出 "Hello!"模块的循环依赖
在一个较复杂的项目中，模块之间可能会存在循环依赖关系，即模块 A 依赖于模块 B，而模块 B 又依赖于模块 A。这时候需要特别注意，因为循环依赖会导致程序无法正确地运行。
在 ES11 中，循环依赖的处理机制是：import 语句会被视为在模块头部执行，因此在执行 import 语句时，模块 B 和 A 都会被加载。但是，由于 B 还没有完全加载，因此在 A 中引用 B 的时候，B 中一些导出可能还没有被定义。解决这个问题的方式是使用动态 import，即在模块内部使用 import() 函数来动态加载模块。
下面是一个循环依赖的例子：
// javascriptcn.com 代码示例
// moduleA.js
import { bar } from './moduleB.js';
export function foo() {
console.log(bar);
}
// moduleB.js
import { foo } from './moduleA.js';
export const bar = 123;
foo();在这个例子中，moduleA.js 依赖于 moduleB.js，而 moduleB.js 又依赖于 moduleA.js。当我们运行这个代码时，会发生崩溃，因为 bar 还没有定义。
解决这个问题的方法是，在moduleA.js 的 foo 函数中使用动态 import 来加载 moduleB.js：
// javascriptcn.com 代码示例
// moduleA.js
export async function foo() {
const { bar } = await import('./moduleB.js');
console.log(bar);
}
// moduleB.js
import { foo } from './moduleA.js';
export const bar = 123;
foo();在这个代码中，我们使用了 import() 函数来动态加载 moduleB.js，从而避免了循环依赖导致的问题。
模块的加载方式
在使用 ES11 模块时，我们需要注意到，浏览器对模块的加载时机有一些限制。具体来说，浏览器会在遇到 script 标签时，立即加载并解析其中的 JavaScript 代码，但是对于 module 类型的脚本，会在 HTML 文档解析完毕后加载。
这意味着，在我们的 HTML 文件中，必须使用 type="module" 属性来明确指定脚本类型为模块，才能确保它们在正确的时机被加载。比如：
<script type="module" src="app.js"></script>
在这个例子中，我们使用了 type="module" 属性来指定 app.js 是一个模块类型的脚本，从而确保它会在文档解析完毕后被加载。
总结
ES11 (2020) 中的模块系统提供了一种方便的方法来管理项目中的依赖关系。我们可以使用 import 和 export 来定义模块的接口，使用默认导出来导出一个值，还可以使用动态 import 来处理循环依赖的问题。在使用一个模块时，需要注意浏览器对模块的加载时机有一些限制，必须使用 type="module" 属性来指定脚本类型为模块。
使用 ES11 模块来管理项目的依赖关系，可以使得我们的代码更加模块化、易于维护。在日常开发中，我们应该认真学习和使用这个特性，以提高我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6c4dbf6b2d6eab3f4e806