现代 Web 开发中，前端模块化已经成为了基础。ES Module 规范是目前大家都认同的一种模块化方案，实现了标准化的模块加载、导出方式。随着 ESM 的不断普及，Webpack 也将 ESM 纳入支持范畴，可以使用 ESM 方式导入和导出模块。
而在处理 ESM 的同时，Webpack 也有它自己的一些要求，例如输出格式、编译规则、模块解析等等。Webpack 原生支持 ESM 规范的能力在不停加强，但还存在一些问题，比如不能很好地处理 ESM 的热更新问题。这时候，@purtuga/esm-webpack-plugin 就能派上用场，它是一款为改善使用 ESM 在 Webpack 中时的一些麻烦而写的插件。本文将详细介绍如何使用它来支持 ESM 在 Webpack 中的构建。
@purtuga/esm-webpack-plugin 的特性
- 提供 ESM 输出规范（module 维度导入/导出方式）下的输出，可通过
output.module属性配置开启； - 启用热更新时，也同样支持 ESM 在 HMR 下的热更新；
- 启用了 ESM 时，默认开启
sideEffects: false，支持 tree-shaking； - 在处理 ESM 时，使用 Webpack 原生的解析规则；
- 支持同时处理底层依赖项的 ESM 格式；
- 可中断构建过程；
- 完整的 TypeScript 类型定义。
安装与使用
# 安装 @purtuga/esm-webpack-plugin npm install --save-dev @purtuga/esm-webpack-plugin
使用 @purtuga/esm-webpack-plugin 的步骤和一般使用 Webpack 插件相同：
- 在 Webpack 配置
plugins属性中添加 @purtuga/esm-webpack-plugin 的实例 - 启用 ESM 输出规范：在 Webpack 配置中，设置
output.module为 true。
配置示例
-- -------------------- ---- -------
-- -----------------
----- ---------------- - ---------------------------------------
-------------- - -
-- ----- ----------
------- -
--------- ------------
----- ----------------------- --------
------- -----
--
-------- -
--- -------------------
-- ----- ----------
-
-示例代码
接下来，我们来看以下示例代码
-- -------------------- ---- ------- -- ------------- ------ -------- ------ -- - ------ - - -- - -- ------------ ------ ----- --- - --- -- -- - - -- -- -------------- ------ - ---- -------- ------ - --- - ---- ---------
在通过 @purtuga/esm-webpack-plugin 处理上述代码时，它会生成一个 ESM 规范的输出文件：
// ./dist/index.js
import { sub } from "./sub.js";
export {sub};
import { sum } from "./main.js";
export {sum};如果我们以 ESM 方式引入它，将会有如下用法：
<!-- index.html -->
<script type="module">
import { sum } from "./dist/index.js";
console.log(sum(10, 5)); // expect 15
</script>可以看到，@purtuga/esm-webpack-plugin 会自动为输出文件生成符合 ESM 规范的导出声明，这样使得 Webpack 在处理 ESM 时更加符合规范，同时也让定位问题、排错更加方便。
总结
使用 @purtuga/esm-webpack-plugin 插件能够方便的支持 Webpack 下的 ESM 和热更新，同时也符合 ESM 规范，在提高开发效率的同时，也能缩减前端应用的性能和体积。快来试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad64b5cbfe1ea0610c57