如何在Rollup.js多输入场景下自定义输出文件名？

当前Rollup配置 #

{
  input: ['src/index.js', 'src/module1/index.js', 'src/module2/index.js'],
  output: {
    dir: 'dist',
    format: 'es'
  }
}

当前输出目录结构 #

├── dist
│   ├── index.js
│   ├── index2.js
│   └── index3.js
├── rollup.config.js
└── src
    ├── index.js
    ├── module1
    │   ├── foo.js
    │   └── index.js
    └── module2
        ├── bar.js
        └── index.js

期望输出结构 #

├── dist
│   ├── libname.js
│   └── module
│       ├── module1.js
│       └── module2.js

解决方案 #

无需额外插件，通过调整Rollup的input配置格式和output.entryFileNames即可实现：

修改后的完整配置如下：

{
  input: {
    'libname': 'src/index.js',
    'module/module1': 'src/module1/index.js',
    'module/module2': 'src/module2/index.js'
  },
  output: {
    dir: 'dist',
    format: 'es',
    entryFileNames: '[name].js'
  }
}

配置说明 #

• 对象形式的input：放弃数组格式，给每个入口文件指定自定义的输出路径/文件名。比如'module/module1'会让Rollup在dist/module目录下生成module1.js。
• entryFileNames: '[name].js'：强制Rollup使用input对象中定义的键名作为输出文件名，避免默认的index.js/index2.js这类自动命名。

配置完成后，Rollup生成的文件结构将完全匹配你的期望。

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