Rollup配置和常用插件
内容提要
本文介绍了Rollup多入口打包的配置，包括输出文件格式、启动本地服务、常用插件（如Babel、PostCSS）、打包第三方库、CSS功能、代码压缩、全局替换、ESLint检查、图片处理和TypeScript支持等。
延伸解读
多入口打包的应用场景
多入口打包适合需要将多个文件打包为不同格式供第三方引用的情况。这种配置可以提高代码的复用性和模块化，尤其在大型项目中，合理的入口管理能够有效减少冗余代码，提升加载效率。
插件的选择与配置
在使用Rollup时，选择合适的插件至关重要。例如，@rollup/plugin-node-resolve和@rollup/plugin-commonjs插件可以帮助打包第三方库，而@rollup/plugin-babel则用于转译现代JavaScript代码。合理配置这些插件可以确保打包结果符合预期，避免运行时错误。
注意事项与潜在风险
在配置Rollup时，特别是使用多个插件时，需要注意插件的加载顺序。例如，@rollup/plugin-commonjs必须在@rollup/plugin-babel之前加载，以确保两者正常工作。此外，未正确配置的external参数可能导致打包结果不包含所需的依赖，影响项目运行。
Q&A
如何配置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插件对代码进行压缩，需在配置中引入该插件。
