如何配置Rollup实现多入口同时编译CJS和ESM两种格式？

核心实现逻辑 #

Rollup天然支持导出配置数组，你可以保留现有rollup-plugin-multi-input的多入口配置，分别为ECMA模块和CommonJS格式编写独立的输出规则即可，无需调整现有入口匹配逻辑。 #

完整配置示例 #

1. 调整rollup.config.js #

import multiInput from 'rollup-plugin-multi-input';
// 其他你用到的插件，比如babel、resolve、commonjs、terser等
import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

// 通用插件配置，两种格式复用
const commonPlugins = [
  multiInput({ relative: 'src/' }), // 匹配src下所有入口，relative参数去掉输出路径的src前缀
  resolve(),
  commonjs(),
  babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' })
];

// 导出配置数组，分别对应两种输出格式
export default [
  // ESM格式输出配置
  {
    input: ['src/**/*.js'], // 按你的实际入口规则匹配，比如你要X/Y/Z入口就写src/X.js,src/Y.js等
    output: {
      format: 'esm',
      dir: 'dist/esm/', // ESM产物输出到dist/esm目录
      preserveModules: true, // 保留原有文件目录结构，保证多入口路径匹配
    },
    plugins: commonPlugins
  },
  // CommonJS格式输出配置
  {
    input: ['src/**/*.js'],
    output: {
      format: 'cjs',
      dir: 'dist/cjs/', // CJS产物输出到dist/cjs目录
      preserveModules: true,
      exports: 'named' // 避免CJS导出的default兼容问题
    },
    plugins: commonPlugins
  }
];

2. 配置package.json路径映射 #

要让import ABC/X和require('ABC/X')都能自动匹配到对应格式的产物，需要在package.json中添加exports字段：

{
  "name": "ABC",
  "type": "module",
  "main": "./dist/cjs/index.js",
  "module": "./dist/esm/index.js",
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "require": "./dist/cjs/index.js"
    },
    "./X": {
      "import": "./dist/esm/X.js",
      "require": "./dist/cjs/X.js"
    },
    "./Y": {
      "import": "./dist/esm/Y.js",
      "require": "./dist/cjs/Y.js"
    },
    "./Z": {
      "import": "./dist/esm/Z.js",
      "require": "./dist/cjs/Z.js"
    },
    // 如果子入口很多，可以用通配符匹配
    "./*": {
      "import": "./dist/esm/*.js",
      "require": "./dist/cjs/*.js"
    }
  }
}

验证效果 #

执行rollup -c编译后，会生成如下目录结构：

dist/
├── esm/
│   ├── X.js
│   ├── Y.js
│   └── Z.js
└── cjs/
    ├── X.js
    ├── Y.js
    └── Z.js

此时两种导入方式都可以正常工作：

• ESM导入：import X from 'ABC/X'
• CJS导入：const X = require('ABC/X')

内容的提问来源于stack exchange，提问作者Nirmal Khedkar