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 [...]）导出配置数组。

如何共享汇总配置文件

1 个答案: