什么是 ESM？
ESM 是指 ECMAScript 模块，它是一种用于 JavaScript 模块化的标准。在早期的前端开发中，我们使用 CommonJS 或 AMD 来实现模块化开发。但随着 ES6 的推出，原生的 ESM 已成为了前端开发中一种普遍的模块化方案。
为什么要使用 ESM？
相对于以前的模块化方案，ESM 有以下优点：
- 原生支持动态导入，可以异步加载模块
- ESM 对静态分析友好，可以更好地进行 Tree Shaking
- 在 Node.js 中支持 ESM 可以提高代码执行效率
如何在 NPM 包中使用 ESM？
- 首先，在 package.json 中添加 "type" 字段，指定包类型为 module。这使得包管理器知道你的包是一个 ESM 包。
- ------- ------------- ------- -------- -
- 在你的代码中使用 import/export 语法而不是 require/module.exports。如下所示：
-- ----------- ------ -------- ------ -- - ------ - - -- - -- ------- ------ - --- - ---- ----------- ------------------ ---- -- ----
- 如果你需要在 Node.js 中使用 ESM，那么你需要在运行 Node.js 时添加 --experimental-modules 参数。例如：
---- ---------------------- -------
注意：目前，Node.js 中仍然存在某些模块化相关的问题，使用 ESM 仍然需要小心谨慎。
如何发布一个 ESM 包？
首先，在 package.json 中添加 "type" 字段，指定包类型为 module。
然后，在你的代码中使用 import/export 语法而不是 require/module.exports。
在你的项目中安装 es-dev-server 和 rollup：
--- ------- ---------- ------------- ------
- 创建一个名为 rollup.config.js 的文件，并配置它：
-- ----------------
------ ------- -
------ --------------- -- ----
------- -
----- ---------------- -- ------
------- ----- -- ----
--
--- 在 package.json 中添加以下脚本，以便于打包和启动本地服务器：
-
---------- -
-------- -------------- -------------- ---------
-------- ------- ---
-
-- 运行 npm run build 打包代码，此时你的 ESM 包就已经构建好了。你可以在 dist 目录下找到你的包。
总结
ESM 是前端开发中一种普遍的模块化方案，支持动态导入，对静态分析友好，可以提高代码执行效率。在 NPM 包中使用 ESM 需要指定包类型为 module，并使用 import/export 语法。如果你需要发布一个 ESM 包，可以使用 es-dev-server 和 rollup 进行打包和构建。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/51643