how to share rollup config files - rollupjs

Question

I have 2 rollup config files which has some common parts and uncommon parts:
// 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'
}...
and another file
// 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'
}...
How do I keep these config files DRY ?
Not keeping DRY has following problems e.g. Imagine many external dependencies - if one forgets to add a new dependency in one place we are in trouble.
(I also use some different set of plugins etc and plugin configs but say that is out of scope of this problem.)

Answer 1

Firstly, they're just JavaScript modules, so you can always do this sort of thing:
// 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);
But the real answer here is to combine the two configs into a single one like so:
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'
}
]
};
As well as being simpler and easier to maintain, this will be faster, because Rollup can save doing a lot of the work twice.
If you need to change more than the output option between builds, you can also export an array of configs from a single file (export default [...]).