🎢Dev

Gerador Rollup Config

Gera um rollup.config.js para empacotar bibliotecas em ESM e CommonJS, com os plugins node-resolve, commonjs e terser já configurados. Bloco fixo, pronto para ajustar.

rollup.config.js para publicar ESM e CJS

Publicar uma biblioteca no npm hoje quer dizer entregar dois formatos: CommonJS para quem ainda usa require e ESM para quem usa import. O rollup faz isso bem, só que a sintaxe do array de output e a ordem dos plugins são daquelas coisas que ninguém guarda. Esta página mostra um config já montado para os dois builds.

O que sai é um arquivo fixo, sem campos para configurar, que já aparece pronto ao abrir a página. Ele importa @rollup/plugin-node-resolve, @rollup/plugin-commonjs e @rollup/plugin-terser, define input src/index.js e gera dist/bundle.cjs.js no formato cjs e dist/bundle.esm.js no formato esm. Vale um aviso: apesar de a descrição da ferramenta citar Babel, nenhum plugin de Babel aparece no resultado.

Antes de publicar, mexa em dois pontos. Não há chave external, então cada dependência do package.json vai inteira para dentro do bundle; em biblioteca você quase sempre quer listar react, lodash e afins ali. E o terser minifica os dois builds, inclusive o ESM, que o consumidor vai reempacotar de qualquer jeito. Instale os três plugins como devDependencies. A geração acontece no navegador.

Perguntas frequentes

O config inclui Babel?

Não. O texto gerado traz node-resolve, commonjs e terser, mesmo com a descrição da página falando em Babel. Se precisa transpilar, instale @rollup/plugin-babel e acrescente à lista de plugins.

Minhas dependências estão indo para dentro do bundle. Como evito?

Adicione uma chave external no objeto exportado, com o nome dos pacotes que devem ficar de fora, por exemplo external: ['react', 'react-dom'].

Dá para usar em aplicação, não só em biblioteca?

Dá, mas para aplicações o Vite ou o esbuild costumam dar menos trabalho. Se for insistir no rollup, deixe só um output e tire o terser do build de desenvolvimento.

Ferramentas Relacionadas

📦

Gerador Webpack Config

Gera um webpack.config.js mínimo para bundling de aplicações JS modernas.

🚀

Gerador esbuild Config

Gera um esbuild.config.js pronto para builds rápidos, com entry point, bundle, minificação, sourcemap e target já definidos. O formato de saída fica no padrão do esbuild.

📖

Gerador Storybook main.js

Gere o .storybook/main.js para Storybook 7+ com React e Vite, pronto para usar. Copie a configuração e comece a documentar seus componentes em minutos.