如何使用 @rollup/plugin-commonjs 插件？

推荐答案

// www.javascriptcn.com code example
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import { babel } from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  plugins: [
    nodeResolve(), // 解析 node_modules 中的模块
    commonjs(), // 将 CommonJS 模块转换为 ES6 模块
    babel({ babelHelpers: 'bundled' }), // 使用 Babel 转换代码
  ],
};

本题详细解读

什么是 @rollup/plugin-commonjs？

@rollup/plugin-commonjs 是一个 Rollup 插件，用于将 CommonJS 模块转换为 ES6 模块。由于 Rollup 默认只支持 ES6 模块，因此在处理使用 CommonJS 模块的库时，需要使用这个插件来进行转换。

为什么需要使用 @rollup/plugin-commonjs？

在 JavaScript 生态系统中，CommonJS 是一种非常常见的模块格式，尤其是在 Node.js 环境中。然而，Rollup 默认只支持 ES6 模块格式。因此，当你在 Rollup 项目中引入一个使用 CommonJS 模块的库时，Rollup 无法直接处理这些模块，这时就需要使用 @rollup/plugin-commonjs 插件来将这些模块转换为 ES6 模块。

如何使用 @rollup/plugin-commonjs？

1. 安装插件：首先，你需要通过 npm 或 yarn 安装 @rollup/plugin-commonjs 插件。

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

2. 配置 Rollup：在你的 Rollup 配置文件中，引入 @rollup/plugin-commonjs 插件，并将其添加到 plugins 数组中。

   // www.javascriptcn.com code example
   import commonjs from '@rollup/plugin-commonjs';
   
   export default {
     input: 'src/index.js',
     output: {
       file: 'dist/bundle.js',
       format: 'cjs',
     },
     plugins: [
       commonjs(),
     ],
   };

3. 结合其他插件：通常，@rollup/plugin-commonjs 会与其他插件一起使用，例如 @rollup/plugin-node-resolve 和 @rollup/plugin-babel。@rollup/plugin-node-resolve 用于解析 node_modules 中的模块，而 @rollup/plugin-babel 用于使用 Babel 转换代码。

   // www.javascriptcn.com code example
   import commonjs from '@rollup/plugin-commonjs';
   import { nodeResolve } from '@rollup/plugin-node-resolve';
   import { babel } from '@rollup/plugin-babel';
   
   export default {
     input: 'src/index.js',
     output: {
       file: 'dist/bundle.js',
       format: 'cjs',
     },
     plugins: [
       nodeResolve(),
       commonjs(),
       babel({ babelHelpers: 'bundled' }),
     ],
   };

注意事项

• 顺序问题：在配置 Rollup 插件时，插件的顺序非常重要。通常，@rollup/plugin-node-resolve 应该放在 @rollup/plugin-commonjs 之前，因为需要先解析模块路径，然后再进行 CommonJS 转换。

• 动态导入：如果你在项目中使用动态导入（import()），@rollup/plugin-commonjs 可能无法正确处理这些动态导入的模块。在这种情况下，你可能需要手动调整配置或使用其他插件来处理这些模块。

通过以上步骤，你可以成功地在 Rollup 项目中使用 @rollup/plugin-commonjs 插件来处理 CommonJS 模块。