Rollup Config Generator

Generate Rollup config files for libraries, React components, TypeScript, plugins, externals, inputs, outputs, CSS, and Vite options.

Output:A ready-to-use configuration file for Rollup Config with best practices applied.

Quick Summary

Use a Rollup Config Generator when you need to configure library bundling, external peer dependencies, plugin setups, TypeScript compilation, and multi-format package exports (ESM/CJS) for NPM publishing.

What is this tool?

A Rollup Config Generator is an online tool that creates the configuration file (rollup.config.js) required by the Rollup module bundler. Rollup is widely considered the industry standard for bundling open-source libraries and NPM packages because it produces much flatter, smaller, and cleaner output than Webpack.

Instead of struggling with complex plugin chains (like figuring out how to combine node-resolve, CommonJS, and rollup-plugin-typescript2), this generator provides a robust baseline for building a rollup config for react library or a strict TypeScript package.

How to Use This Tool

Define Inputs & Outputs — Set your entry point and select output formats like ES Modules (ESM) and CommonJS (CJS).
Configure Externals — Specify peer dependencies (like React or Lodash) that should not be bundled.
Select Plugins — Add plugins like @rollup/plugin-node-resolve, typescript2, and postcss.
Generate & Download — Save the generated rollup.config.js to your project root.
Update package.json — Ensure your package.json 'main', 'module', and 'exports' fields point to the generated outputs.

What This Tool Generates

rollup.config.js — The Rollup configuration exporting standard JS objects.
rollup.config.mjs — An alternative extension explicitly forcing ES Modules.
rollup.config.ts — A type-safe version for TypeScript developers.

Example Output Explanation

A standard rollup config js example for a TypeScript React library exporting both ESM and CJS:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

const packageJson = require('./package.json');

export default {
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: packageJson.module,
      format: 'esm',
      sourcemap: true,
    }
  ],
  // Prevent bundling React into your library
  external: ['react', 'react-dom'],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript({ useTsconfigDeclarationDir: true }),
    postcss(),
  ]
};

Best Practices

Use Dual Outputs: When publishing to NPM, always configure Rollup to output both 'esm' (for modern bundlers like Vite/Webpack) and 'cjs' (for legacy Node.js environments).
Externalize Peer Dependencies: Never bundle React, Vue, or large libraries into your package. Use the 'external' array or 'rollup-plugin-peer-deps-external' to keep your bundle size tiny.
Use node-resolve: By default, Rollup doesn't know how to resolve dependencies from node_modules. You must always include '@rollup/plugin-node-resolve' if your library imports third-party packages you DO want to bundle.

Common Mistakes

Missing CommonJS Plugin: Rollup only natively understands ES Modules (import/export). If you import a dependency that uses CommonJS (require/module.exports), Rollup will fail unless you include '@rollup/plugin-commonjs'.
Forgetting Package.json Exports: Creating a dual ESM/CJS build in Rollup is useless if you don't update your package.json 'main', 'module', and 'exports' fields to point to the correct output files.
Bundling CSS Incorrectly: If you are building a React component library, you must decide if you want Rollup to inject the CSS into the JS bundle (via 'rollup-plugin-postcss') or extract it to a separate .css file for the consumer to import manually.

Security Notes

When bundling libraries, ensure you are not accidentally bundling sensitive configuration files or `.env` files into the NPM package. Double-check your output before running `npm publish`.

Testing Instructions

Save the generated file as `rollup.config.js` in your project root.
Install the required plugins listed in the generator output.
Add `"build": "rollup -c"` to your package.json scripts.
Run `npm run build` and inspect your output directory to ensure your library compiled correctly without bundling peer dependencies.

Frequently Asked Questions

What is a Rollup Config Generator?

A Rollup Config Generator is a tool that helps developers scaffold a rollup.config.js file to bundle JavaScript or TypeScript libraries. It handles complex configurations like multiple output formats (ESM and CJS), external dependencies, and plugin integration (like node-resolve and typescript2).

How do I create rollup.config.js?

Create a file named rollup.config.js in your project root and export an object (or an array of objects for multiple builds). You can use this generator to select your input files, output formats, and plugins, and then copy the resulting code.

Should I use rollup.config.js, mjs, or ts?

If your project uses "type": "module" in package.json, rollup.config.js will be treated as ESM. If not, use rollup.config.mjs to use ES imports. If you want to write your config in TypeScript, use rollup.config.ts and run Rollup with the --configPlugin typescript flag.

How do I configure Rollup input and output?

The 'input' property points to your main entry file (e.g., 'src/index.js'). The 'output' property is usually an array of objects where you specify the 'file' path and the 'format' (e.g., 'es' for ES Modules, 'cjs' for CommonJS).

What are Rollup external dependencies?

The 'external' array tells Rollup which packages NOT to bundle into your library (e.g., ['react', 'react-dom']). Instead of bundling them, the consumer of your library must have them installed. This keeps your library small and prevents duplication.

How do I create Rollup config for a React library?

To bundle a React component library, you need @rollup/plugin-babel (with the React preset) to compile JSX, and you must add 'react' and 'react-dom' to your 'external' array so they aren't bundled with your components.

How do I use Rollup with TypeScript?

You can use the official '@rollup/plugin-typescript' or the community favorite 'rollup-plugin-typescript2' (which offers better error reporting). Add it to your plugins array so Rollup can compile your .ts and .tsx files.

What are Rollup options in Vite?

Vite uses Rollup under the hood for its production builds. If you need to tweak Rollup-specific settings in a Vite project, you don't need a rollup.config.js; instead, you pass them via the 'build.rollupOptions' object inside your vite.config.ts.

How We Keep Your Configs Safe & Valid

Built-in Error Checking

Every file is checked against official rules. We catch missing fields and bad syntax. YAML indentation errors are flagged right away. Kubernetes, Terraform, and Docker specs are all covered. API versions and labels are verified too. You get valid output every time you generate.

100% Private & Local

All tools run in your browser only. Your API keys never leave your machine. We do not use any tracking scripts. No data is sent to any server. Passwords and secrets stay on your device. Crypto operations use the Web Crypto API. Your privacy is fully protected at all times.

Secure Settings by Default

Configs use safe defaults out of the box. Containers run as non-root users. Root filesystems are set to read-only. Dangerous Linux capabilities are dropped. Network policies limit pod-to-pod traffic. TLS 1.3 is enabled for web servers. Security headers are added where needed.

Ready for CI/CD & Git

Output files are ready for your Git repo. Use them with ArgoCD, Flux, or GitHub Actions. Files use clear formatting and comments. Code review is easy for your team. Indentation and key order are consistent. Test in staging before going to production. Every file is clean and well-structured.

Infrastructure as Code

Store configs in Git alongside your code. Terraform modules include typed variables. Backend configs support remote state locking. Outputs work across multiple modules. Ansible playbooks use clear task steps. Chef and Puppet configs are also supported. Every file works with version control tools.

Monitoring & Tracing

Set up Prometheus with auto-discovery rules. Create Grafana dashboards with template variables. Add alerting rules with severity labels. Use OpenTelemetry for trace collection. Forward logs to Loki or Elasticsearch. Connect to Jaeger or Tempo for tracing. Monitor metrics, logs, and traces together.

Container & Docker Safety

Dockerfiles use multi-stage builds for small images. Base images are pinned to exact versions. Dev files are excluded from final images. Health checks are added for orchestrator use. Containers switch to non-root users. Docker Compose uses named volumes and networks. Resource limits are set in deploy configs.

Multiple Output Formats

Export as YAML, JSON, HCL, or TOML. Kubernetes uses YAML with proper separators. Terraform uses HCL with correct escaping. JSON output has consistent indentation. Copy to clipboard with one click. Preview output with syntax highlighting. Line numbers help you review quickly.