如何配置 Rollup 实现多入口打包？

推荐答案

// www.javascriptcn.com code example
// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default [
  {
    input: 'src/index1.js',
    output: {
      file: 'dist/bundle1.js',
      format: 'cjs'
    },
    plugins: [resolve(), commonjs()]
  },
  {
    input: 'src/index2.js',
    output: {
      file: 'dist/bundle2.js',
      format: 'cjs'
    },
    plugins: [resolve(), commonjs()]
  }
];

本题详细解读

多入口打包的概念

多入口打包是指在一个项目中，存在多个入口文件，每个入口文件都会生成一个独立的输出文件。这在大型项目中非常常见，尤其是当项目需要拆分为多个模块或功能时。

Rollup 配置多入口打包

在 Rollup 中，可以通过导出一个数组来实现多入口打包。数组中的每个对象代表一个独立的入口配置，包含 input 和 output 等属性。

• input: 指定入口文件的路径。
• output: 配置输出文件的路径和格式。
• plugins: 配置使用的插件，如 @rollup/plugin-node-resolve 用于解析第三方模块，@rollup/plugin-commonjs 用于将 CommonJS 模块转换为 ES6 模块。

示例配置

在示例配置中，我们有两个入口文件 index1.js 和 index2.js，分别生成 bundle1.js 和 bundle2.js。每个入口配置都使用了 resolve 和 commonjs 插件来处理模块依赖。

注意事项

• 确保每个入口文件的路径正确。
• 如果项目中有多个输出格式（如 cjs、esm 等），可以在 output 中分别配置。
• 插件配置可以根据项目需求进行调整，例如添加 babel 插件来处理 ES6+ 语法。