在前端开发中，我们通常使用现代的 JavaScript 模块化工具如 Rollup 或 webpack 进行代码构建和打包。但是有些第三方库可能还没有采用 ES6 模块规范，而是使用了 CommonJS 模块规范，这就需要使用到 rollup-plugin-commonjs 插件将其转换为 ES6 模块规范。
本文将介绍如何使用 rollup-plugin-commonjs 插件进行转换，涉及以下内容：
- 安装
rollup-plugin-commonjs - 配置
rollup.config.js文件 - 示例代码
1. 安装 rollup-plugin-commonjs
首先，我们需要安装 rollup-plugin-commonjs：
--- ------- ---------- ----------------------
2. 配置 rollup.config.js 文件
接下来，在 rollup.config.js 文件中配置 rollup-plugin-commonjs。
------ -------- ---- -------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
----------
-
--在此示例中，我们将 rollup-plugin-commonjs 作为插件添加到了 plugins 数组中，并调用其默认配置。如果需要自定义配置，可以参考官方文档进行设置。
3. 示例代码
最后，我们来看一个简单的示例代码。
原始代码 src/index.js：
----- ------ - ------------------ ---------------------------- -- -- -- --- ----
转换后的代码 dist/bundle.js：
------ ------ ---- ------------ ---------------------------- -- -- -- --- ----
可以看到，我们成功将使用 CommonJS 模块规范的第三方库 lodash 转换为了 ES6 模块规范，并且在打包后的代码中使用了其对应的 ES6 模块 lodash-es。
结论
本文介绍了如何使用 rollup-plugin-commonjs 插件进行第三方库的模块化转换，在实际开发中可以帮助我们更好地使用现代的 JavaScript 模块化工具。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/51623