如何共享汇总配置文件

Question

我有 2 个汇总配置文件，其中有一些常见部分和不常见部分：

 // rollup.config.umd.js
  export config {
     external: ['invariant', 'lodash'],
     globals: {
      invariant: 'invariant'
     },
     input: 'src/index.js',
     name: 'my.comp',
     output: {
       file: 'my.comp.umd.js'
       format: 'umd'
     }...

和另一个文件

 // rollup.config.esm5.js
  export config {
     external: ['invariant', 'lodash'],
     globals: {
      invariant: 'invariant'
     },
     input: 'src/index.js',
     name: 'my.comp',
     output: {
       file: 'my.comp.es5.js'
       format: 'es'
     }...

如何保持这些配置文件干燥？

不保持 DRY 会产生以下问题，例如想象一下许多外部依赖项 - 如果忘记在一个地方添加新的依赖项，我们就会遇到麻烦。

（我还使用了一些不同的插件集等和插件配置，但我说这超出了这个问题的范围。）

Answer 1

首先，它们只是 JavaScript 模块，所以你总是可以做这样的事情：

// rollup.config.common.js
export default {
  external: ['invariant', 'lodash'],
  globals: {
    invariant: 'invariant'
  },
  input: 'src/index.js',
  name: 'my.comp'
};

// rollup.config.esm5.js
import common from './rollup.config.common.js';

export default Object.assign({
  output: {
   file: 'my.comp.es5.js'
   format: 'es'
 }
}, common);

// rollup.config.umd.js
import common from './rollup.config.common.js';

export default Object.assign({
  output: {
   file: 'my.comp.umd.js'
   format: 'umd'
 }
}, common);

但这里真正的答案是将两个配置合并为一个配置，如下所示：

export default {
  external: ['invariant', 'lodash'],
  globals: {
    invariant: 'invariant'
  },
  input: 'src/index.js',
  name: 'my.comp',
  output: [
    {
      file: 'my.comp.es5.js'
      format: 'es'
    },
    {
      file: 'my.comp.umd.js'
      format: 'umd'
    }
  ]
};

除了更简单、更容易维护之外，这还会更快，因为 Rollup 可以节省重复执行大量工作的时间。

如果您需要更改的不仅仅是output构建之间的选项，您还可以从单个文件 ( ) 导出一组配置export default [...]。