rollup / rollup

Next-generation ES module bundler

Home Page:https://rollupjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is it possible to build multiple bundles using CLI?

bahmutov opened this issue · comments

If I need to build multiple bundles from multiple entries (1-1 entry to output bundle), is it possible to specify using single rollup.config.js or should I use the API? I would like something like this

// rollup.config.js
export default [{
  entry: 'src/foo.js',
  dest: 'dist/foo.js'
}, {
  entry: 'src/bar.js',
  dest: 'dist/bar.js'
}]]

Thanks for great tool!

The config file approach only works with one entry file – you have three options if you want to create multiple bundles from multiple entry files:

Use the API, as you suggest

This will always be the most flexible approach, if not the simplest

Use the --environment flag.

You can pass variables into the config file like so:

rollup -c --environment entry:foo
// rollup.config.js
export default {
  entry: `src/${process.env.entry}.js`,
  dest: `dist/${process.env.entry}.js`
};

You can have as many comma-separated key:value pairs (or just key – equals 'true') as you like.

Multiple config files

rollup -c rollup.config.foo.js
rollup -c rollup.config.bar.js
// rollup.config.foo.js
export default {
  entry: `src/foo.js`,
  dest: `dist/foo.js`
};
// rollup.config.bar.js
export default {
  entry: `src/bar.js`,
  dest: `dist/bar.js`
};

Hope this helps!

Thanks, @Rich-Harris the API worked like a charm, love it.

Implemented multiple entries using API in https://github.com/bahmutov/rollem

Looks like this is now supported in core #1389

Yep — just export an array of config objects from your config file.

Note that each config object should have its own plugin instances rather than sharing them — i.e. this...

// rollup.config.js
export default [
  {
    entry: 'src/a.js',
    dest: 'dist/a.js',
    format: 'cjs',
    plugins: [somePlugin()]
  },
  {
    entry: 'src/b.js',
    dest: 'dist/b.js',
    format: 'cjs',
    plugins: [somePlugin()]
  }
];

...rather than this:

// rollup.config.js — DON'T DO THIS
const plugins = [somePlugin()];
export default [
  {
    entry: 'src/a.js',
    dest: 'dist/a.js',
    format: 'cjs',
    plugins
  },
  {
    entry: 'src/b.js',
    dest: 'dist/b.js',
    format: 'cjs',
    plugins
  }
];

@Rich-Harris I've switched over from grunt-rollup to using rollup straight up. The following rollup.config.js is working for me, along with running concat and uglify on the rolled-up files.

Does this seem legit? It's slightly different than your example. Also, thanks for your help over the last couple days!

export default [
    // main build
    {
        format: "umd",
        moduleName: "...",
        extend: "true",
        entry: "src.js",
        dest: "build/src.js",
        plugins: rollupPlugins()    // function reference didn't work; i needed to call it
    },

    // dev build
    {
        format: "umd",
        moduleName: "...",
        extend: "true",
        entry: "src-dev.js",
        dest: "build/src-dev.js",
        plugins: rollupPlugins()    // function reference didn't work; i needed to call it
    }
];

function rollupPlugins() {
    return [
        // list of plugins
    ];
}

If anybody finds the array of config objects a bit cumbersome when the config is the same for each entry point, I found a nice solution:

export default ['first', 'second'].map((name, index) => ({
    input: `src/${name}.js`,
    output: {
        name,
        dir: 'public',
        // etc
    },
    plugins: [
        somePlugin(),

        // even livereload can work if you specify a different port for each entry point
        livereload({
            watch: `public/${name}.*`,
            port: 3000 + index
        })
    ]
}));