Rollup配置和常用插件
💡
原文中文，约8100字，阅读约需20分钟。
📝
内容提要
本文介绍了Rollup多入口打包的配置，包括输出文件格式、启动本地服务、常用插件（如Babel、PostCSS）、打包第三方库、CSS功能、代码压缩、全局替换、ESLint检查、图片处理和TypeScript支持等。
🎯
关键要点
- 本文介绍了Rollup多入口打包的配置，包括输出文件格式、启动本地服务、常用插件等。
- 多入口打包适用于文件打包为多个类型供第三方引用，或多入口多文件打包。
- 配置示例展示了如何设置输入和输出文件格式。
- 启动本地服务需要安装rollup-plugin-serve插件，并在配置中添加相应的插件。
- 常用插件包括Babel、PostCSS等，Babel用于转译JavaScript代码。
- 打包第三方库需要使用@rollup/plugin-node-resolve和@rollup/plugin-commonjs插件。
- 可以通过external参数配置哪些第三方库不进行打包。
- 添加CSS功能需要安装postcss和rollup-plugin-postcss插件。
- 使用terser插件可以对代码进行压缩。
- 可以使用@rollup/plugin-alias插件重命名路径别名。
- 全局替换插件@rollup/plugin-replace可以替换代码中的特定字符串。
- eslint插件用于在打包时进行代码检查。
- @rollup/plugin-image插件可以将图片导入为Base64编码的字符串。
- 使用@rollup/plugin-strip插件可以移除多余的console语句。
- 添加TypeScript支持需要安装typescript和@rollup/plugin-typescript插件。
- 打包CDN引入的包时需要在HTML中引入相应的CDN链接。
❓
延伸问答
如何配置Rollup进行多入口打包？
可以在rollup.config.js中设置多个输入和输出配置，指定不同的文件格式和名称。
如何启动Rollup的本地服务？
需要安装rollup-plugin-serve插件，并在配置文件中添加相应的插件设置。
Rollup中常用的插件有哪些？
常用插件包括Babel、PostCSS、@rollup/plugin-node-resolve、@rollup/plugin-commonjs等。
如何在Rollup中打包第三方库？
需要使用@rollup/plugin-node-resolve和@rollup/plugin-commonjs插件，并在配置中引入这些插件。
如何在Rollup中添加CSS功能？
需要安装postcss和rollup-plugin-postcss插件，并在配置文件中添加postcss插件。
如何使用Rollup进行代码压缩？
可以使用terser插件对代码进行压缩，需在配置中引入该插件。
🏷️
标签
➡️
