前言
开发现代化的前端项目需要依赖众多的工具和框架，其中打包工具是不可或缺的一部分。在打包工具的选择中，Rollup 是一个性能优异的选择。虽然 Rollup 在自由度和灵活性上不如 Webpack，但在体积和打包速度上有着明显的优势。对于那些越来越关注文件体积和包大小的开发者来说，Rollup 是一个值得尝试的工具。
本文将介绍一个方便易用的 Rollup 配置工具：lila-rollup-config。通过 lila-rollup-config，我们可以快速搭建出一个适用于各种场景的 Rollup 打包环境。
安装
我们通过 npm 安装 lila-rollup-config：
npm install lila-rollup-config --save-dev
使用
- 在项目根目录下新建 rollup.config.js 文件，并编写 lila-rollup-config 配置。
-- -------------------- ---- -------
------ - ------------ - ---- ---------------------
------ ------- --------------
------ ---------------
---- -----
---- -
----- ------------
--
------- -
---- -------
--
-------- -
-- ---- ------ --
--
---上述配置会将 src/index.js 文件作为入口文件，生成 ES Module 和 UMD 两种格式的打包文件，并输出到 dist 目录下。其中 UMD 格式的库名为 myLibrary。
- 在 package.json 文件的 scripts 字段中添加相应指令。
{
"scripts": {
"build": "rollup -c"
},
}上述配置中，build 指令代表执行 rollup -c 命令，并使用 rollup.config.js 文件进行打包。
- 在终端中运行以下命令进行打包。
npm run build
配置项
lila-rollup-config 提供了以下基本配置项。
input
Type: String
Default: null
入口文件路径，例如：'src/index.js'。
esm
Type: Boolean | Object
Default: true
是否生成 ES Module 格式的打包文件。
可以通过传递一个对象，自定义 ES Module 文件名的配置。
{
esm: {
file: 'dist/myLibrary.esm.js',
},
}umd
Type: Boolean | Object
Default: false
是否生成 UMD 格式的打包文件。
可以通过传递一个对象，自定义 UMD 格式的库名和文件名的配置。
{
umd: {
name: 'myLibrary',
file: 'dist/myLibrary.umd.js',
},
}output
Type: Object
Default: null
输出文件的配置，目前只支持 dir 属性。
{
output: {
dir: 'dist',
},
}plugins
Type: Array
Default: []
如果需要使用其他的 Rollup 插件，可以在 plugins 中添加，例如：
{
plugins: [
babel({
exclude: 'node_modules/**',
}),
],
}其他更详细的配置项和示例可以参考 lila-rollup-config 库的文档。
总结
lila-rollup-config 让我们可以更轻松地使用 Rollup 打包工具，减少了不必要的配置和学习成本。同时，采用 Rollup 打包可以减少文件大小，提高网页加载速度。希望本文能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cd30d09270238228df