🎢Dev

Rollup Config Generator

Generates a rollup.config.js to bundle libraries as ESM and CommonJS, with the node-resolve, commonjs and terser plugins already wired. A fixed block, ready to tweak.

Dual ESM and CJS rollup config

Shipping a library on npm today means shipping two formats: CommonJS for the require crowd and ESM for the import crowd. Rollup handles that fine, but the shape of the output array and the plugin order are exactly the details nobody memorises. This page hands you a config that already covers both builds.

What you get is a fixed file with no options to configure, printed as soon as the page opens. It imports @rollup/plugin-node-resolve, @rollup/plugin-commonjs and @rollup/plugin-terser, sets input to src/index.js and emits dist/bundle.cjs.js in cjs format plus dist/bundle.esm.js in esm format. One caveat: even though the tool description mentions Babel, no Babel plugin appears in the output.

Change two things before you publish. There is no external key, so every dependency in your package.json gets inlined into the bundle; for a library you almost always want react, lodash and friends listed there. And terser minifies both builds, including the ESM one that consumers will re-bundle anyway. Install the three plugins as devDependencies. Generation happens in your browser.

Frequently asked questions

Does the config include Babel?

No. The generated text ships node-resolve, commonjs and terser, despite what the page description says. If you need transpilation, install @rollup/plugin-babel and add it to the plugins array.

My dependencies end up inside the bundle. How do I stop that?

Add an external key to the exported object listing the packages that should stay out, for example external: ['react', 'react-dom'].

Can I use this for an app instead of a library?

You can, though Vite or esbuild are usually less work for apps. If you stick with rollup, keep a single output and drop terser from the dev build.

Related Tools

📦

Webpack Config Generator

Generate a minimal webpack.config.js.

🚀

esbuild Config Generator

Generates a ready esbuild.config.js for fast builds, with entry point, bundle, minification, sourcemap and target already set. The output format is left at the esbuild default.

📖

Storybook main.js Generator

Generate the .storybook/main.js for Storybook 7+ with React and Vite, ready to use. Copy the config and start documenting your components in minutes.