Rollup v3.15.0迁移：如何用output.dir替代output.file实现原功能？

问题背景 #

从Rollup v2升级到v3.15.0后，Rollup提示需使用output.dir替代output.file，原配置中通过output.file同时输出CJS和ESM格式，拆分output对象的方案因inlineDynamicImports弃用不可行，需要调整配置以匹配原输出效果。

修改后的完整配置 #

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';

const packageJson = require('./package.json');

// 解析路径，自动拆分目录和文件名
const getOutputConfig = (filePath) => {
  const parts = filePath.split('/');
  const fileName = parts.pop();
  const dir = parts.join('/');
  return {
    dir,
    entryFileNames: fileName,
    sourcemap: true
  };
};

export default [
    // CJS格式输出配置
    {
        external: ['react', 'react-dom'],
        input: 'src/index.ts',
        output: {
            ...getOutputConfig(packageJson.main),
            format: 'cjs',
        },
        plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' })],
    },
    // ESM格式输出配置
    {
        external: ['react', 'react-dom'],
        input: 'src/index.ts',
        output: {
            ...getOutputConfig(packageJson.module),
            format: 'esm',
        },
        plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' })],
    },
    // 类型声明文件输出配置
    {
        external: ['react', 'react-dom'],
        input: 'dist/esm/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: 'esm' }],
        plugins: [dts()],
    },
];

关键改动说明 #

• 将原单个配置中的多output拆分为两个独立配置项，分别处理CJS和ESM格式，规避Rollup v3对单文件输出动态导入的限制
• 通过getOutputConfig函数自动解析package.json中main和module的路径，拆分出output.dir（输出目录）和entryFileNames（入口文件名），保证输出文件路径与原配置完全一致
• 类型声明文件保持output.file配置不变，因为类型文件通常为单文件，不会触发Rollup的dir强制要求

替代方案（不拆分配置） #

如果不想拆分为多个配置项，也可以在单个配置中使用output数组，手动指定每个格式的目录和文件名：

export default [
    {
        external: ['react', 'react-dom'],
        input: 'src/index.ts',
        output: [
            {
                dir: 'dist/cjs',
                entryFileNames: 'index.js',
                format: 'cjs',
                sourcemap: true,
            },
            {
                dir: 'dist/esm',
                entryFileNames: 'index.js',
                format: 'esm',
                sourcemap: true,
            },
        ],
        plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' })],
    },
    // 类型声明配置不变
    {
        external: ['react', 'react-dom'],
        input: 'dist/esm/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: 'esm' }],
        plugins: [dts()],
    },
];

这种方式适合输出路径固定的场景，无需额外解析逻辑。

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