npm 包 @purtuga/esm-webpack-plugin 使用教程

阅读时长 4 分钟读完

现代 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 的步骤和一般使用 Webpack 插件相同:

  • 在 Webpack 配置 plugins 属性中添加 @purtuga/esm-webpack-plugin 的实例
  • 启用 ESM 输出规范:在 Webpack 配置中,设置 output.module 为 true。

配置示例

-- -------------------- ---- -------
-- -----------------
----- ---------------- - ---------------------------------------
-------------- - -
  -- ----- ----------
  ------- -
    --------- ------------
    ----- ----------------------- --------
    ------- -----
  --
  -------- -
    --- -------------------
    -- ----- ----------
  -
-

示例代码

接下来,我们来看以下示例代码

-- -------------------- ---- -------
-- -------------
------ -------- ------ -- -
  ------ - - --
-

-- ------------
------ ----- --- - --- -- -- - - --

-- --------------
------ - ---- --------
------ - --- - ---- ---------

在通过 @purtuga/esm-webpack-plugin 处理上述代码时,它会生成一个 ESM 规范的输出文件:

如果我们以 ESM 方式引入它,将会有如下用法:

可以看到,@purtuga/esm-webpack-plugin 会自动为输出文件生成符合 ESM 规范的导出声明,这样使得 Webpack 在处理 ESM 时更加符合规范,同时也让定位问题、排错更加方便。

总结

使用 @purtuga/esm-webpack-plugin 插件能够方便的支持 Webpack 下的 ESM 和热更新,同时也符合 ESM 规范,在提高开发效率的同时,也能缩减前端应用的性能和体积。快来试试吧!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedad64b5cbfe1ea0610c57

纠错
反馈