npm 包 rollup-plugin-commonjs 使用教程

在前端开发中，我们通常使用现代的 JavaScript 模块化工具如 Rollup 或 webpack 进行代码构建和打包。但是有些第三方库可能还没有采用 ES6 模块规范，而是使用了 CommonJS 模块规范，这就需要使用到 rollup-plugin-commonjs 插件将其转换为 ES6 模块规范。

本文将介绍如何使用 rollup-plugin-commonjs 插件进行转换，涉及以下内容：

1. 安装 rollup-plugin-commonjs
2. 配置 rollup.config.js 文件
3. 示例代码

1. 安装 rollup-plugin-commonjs

首先，我们需要安装 rollup-plugin-commonjs：

npm install --save-dev rollup-plugin-commonjs

2. 配置 rollup.config.js 文件

接下来，在 rollup.config.js 文件中配置 rollup-plugin-commonjs。

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

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

在此示例中，我们将 rollup-plugin-commonjs 作为插件添加到了 plugins 数组中，并调用其默认配置。如果需要自定义配置，可以参考官方文档进行设置。

3. 示例代码

最后，我们来看一个简单的示例代码。

原始代码 src/index.js：

const lodash = require('lodash');

console.log(lodash.chunk([1, 2, 3, 4, 5], 2));

转换后的代码 dist/bundle.js：

import lodash from 'lodash-es';

console.log(lodash.chunk([1, 2, 3, 4, 5], 2));

可以看到，我们成功将使用 CommonJS 模块规范的第三方库 lodash 转换为了 ES6 模块规范，并且在打包后的代码中使用了其对应的 ES6 模块 lodash-es。

结论

本文介绍了如何使用 rollup-plugin-commonjs 插件进行第三方库的模块化转换，在实际开发中可以帮助我们更好地使用现代的 JavaScript 模块化工具。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51623