📦 Rollup配置生成器

Rollup配置生成器能做什么？

Rollup配置生成器是一款免费在线工具，帮助开发者通过可视化界面快速生成rollup.config.js配置文件。支持入口输出配置、插件系统、外部依赖管理、多格式输出和Tree Shaking设置。所有配置在浏览器本地完成，无需安装Node.js或Rollup CLI，数据绝不上传服务器。

核心功能

• 多格式输出: 支持ESM、CommonJS、UMD、IIFE、AMD、SystemJS六种输出格式，满足不同使用场景
• 插件系统: 一键启用node-resolve、commonjs、babel、typescript、terser、json等官方插件，自动初始化
• 外部依赖管理: 声明外部依赖(external)和全局映射(globals)，支持UMD/IIFE格式的浏览器全局变量绑定
• Source Map: 支持inline和hidden两种Source Map模式，便于调试
• Tree Shaking: Rollup原生支持基于ES Module的Tree Shaking，自动移除未使用代码

使用教程

1. 配置入口文件路径和输出文件路径

2. 选择输出格式(ESM/CJS/UMD/IIFE/AMD/SystemJS)

3. 勾选需要的Rollup插件（resolve、commonjs、babel、typescript等）

4. 如需打包为库，填写外部依赖和全局映射

5. 配置Source Map、严格模式等高级选项

6. 点击"生成配置"预览，复制或下载到项目根目录为rollup.config.js

应用场景

场景1：npm包开发

开发npm包时使用Rollup打包为ESM+CJS双格式输出，确保包同时支持import和require两种导入方式。

场景2：组件库构建

构建React/Vue/Svelte组件库，使用Rollup配合babel和typescript插件处理JSX/TSX文件，输出多种格式。

场景3：浏览器库分发

开发在浏览器端直接使用的JavaScript库，配置UMD输出格式，通过globals映射处理外部依赖。

场景4：应用打包优化

利用Rollup的Tree Shaking能力优化应用打包体积，通过terser插件进一步压缩输出代码。

扩展知识

Rollup是专为ES Module设计的打包工具，以其优秀的Tree Shaking能力著称。与Webpack不同，Rollup更适合库和包的构建，能生成更干净、体积更小的输出。Rollup 4引入了Import Attributes和JSON模块的官方支持。核心概念包括：input(入口)、output(输出配置)、plugins(插件系统)、external(外部依赖)和globals(全局变量映射)。@rollup/plugin-node-resolve允许Rollup从node_modules解析依赖，@rollup/plugin-commonjs将CommonJS模块转换为ESM格式。