在前端开发中，模块系统是一个核心的概念。ECMAScript 2020 对 ES 模块系统进行了更新和改进，新增了模块加载器，同时也有一些模块前置的注意事项，这些都是开发者必须要了解的内容。
ES 模块系统
ES 模块是一个细化和规范化的模块系统。每个模块都是一个独立的文件，拥有自己的作用域、导出和导入接口。模块间的依赖关系可以在代码中明确地声明。
在 ES6 之前，前端也有模块化开发的概念，常用的有 CommonJS 和 AMD。但是这些模块系统的缺点在于他们不能直接在浏览器中使用，需要借助于打包工具的帮助。ES 模块可以在现代浏览器中直接运行，同时也适用于 Node.js 等服务器环境。
模块导入和导出
ES 模块中，导出和导入是最基本的概念。我们可以在一个模块中定义一些变量、函数等，然后通过导出这些内容，使得其他模块可以使用这些内容。导入则是在模块中引入其他模块的内容，以便使用。
ES 模块的导出使用 export 关键字，可以导出多个内容、默认内容以及重命名导出内容。其中，导出默认内容使用 export default 关键字。
// javascriptcn.com 代码示例
// 导出两个内容
export const PI = 3.1415;
export function square(x) {
return x * x;
}
// 导出默认内容
export default function cube(x) {
return x * x * x;
}
// 重命名导出内容
function sum(x, y) {
return x + y;
}
export { sum as add };在其他的模块中，我们可以使用 import 关键字来引入上述内容。
import { PI, square } from './math';
import add from './math';模块加载器
ES 模块加载器是一个用来加载模块的工具。在之前，我们需要使用打包工具将所有的模块打包成一个文件，并将这个文件加载到浏览器中运行。ES 模块加载器可以在浏览器中动态地加载和解析模块，这样我们就不需要事先将所有的模块打包成一个文件了。
ES 模块加载器是浏览器内置的，我们可以在代码中使用全局变量 import 和 export 来使用。
<script type="module">
import { PI, square } from './math.js';
console.log(PI); // 3.1415
console.log(square(5)); // 25
</script>模块前置注意事项
使用 ES 模块前，有一些需要注意的事项。
MIME 类型
在服务器返回文件时，必须指定正确的 MIME 类型。对于 ES6 模块，MIME 类型应该为 text/javascript，并且应该包括一个 module 标志。
// express.js 代码示例
app.get('/app.js', (req, res) => {
res.setHeader('Content-Type', 'text/javascript; module');
res.sendFile(__dirname + '/app.js');
});本地文件和跨域
在 ES 模块中，浏览器会自动把模块路径看成相对路径，相对路径访问本地模块没有问题，但是访问跨域模块需要特别处理。
在同源的情况下，使用相对路径引入模块即可。
<!-- index.html --> <!-- 与 index.js 同源 --> <script type="module" src="./index.js"></script>
// index.js
// 与 pi.js 同源
import { PI } from './pi.js';
console.log(PI); // 3.1415对于跨域访问，需要在服务器端设置 CORS 头部，允许跨域访问。
// express.js 代码示例
app.get('/remote.js', (req, res) => {
res.setHeader('Content-Type', 'text/javascript; module');
res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域访问
res.send('export default 123;');
});// index.js // 与 remote.js 不同源 import value from 'http://localhost/remote.js'; console.log(value); // 123
总结
ES 模块是一个非常强大和方便的模块系统，可以让我们更容易地管理代码和依赖关系。在学习使用 ES 模块时，需要注意一些模块前置的注意事项，以及如何使用模块加载器来加载模块。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a57de7d4982a6ebcad766