JavaScript rollup 怎么用
平时我们开发网页时，难免会遇到一堆零散的JS文件，比如写了一个轮播图功能，拆成了图片加载、手势控制、动画效果三个单独的文件，要是直接把这些文件都堆进网页里，不仅加载速度慢，还容易出现变量冲突的问题——这时候就需要一个“打包工具”把它们合并整理，JavaScript里的Rollup就是专门做这件事的工具。
先搞懂Rollup是什么，和普通打包工具不一样在哪
很多人第一次接触打包工具，会把Rollup和Webpack搞混，其实它们的定位差别挺大的。可以这么理解：Webpack像个万能工具箱，不仅能打包JS，还能处理CSS、图片、字体，适合做复杂的单页应用；而Rollup更像个“专业打包员”，专门优化JS文件，输出的代码更简洁、体积更小。
举个生活化的例子：你平时整理行李，Webpack是那种什么都能装的大旅行箱，衣服、鞋子、洗漱品都能塞；Rollup是专门装文件的公文包，会把零散的纸张按顺序装订好，还能去掉多余的边角料，比大旅行箱更轻便。所以如果是做组件库、工具函数这类纯JS的项目，Rollup是更合适的选择。
第一步：快速安装Rollup，零成本上手
用Rollup很简单，只要你电脑装了Node.js，打开命令行敲两行命令就行。首先是全局安装，这样任何项目都能直接用：
`bash
npm install rollup -g
`
如果是只想在当前项目用，也可以装成本地依赖：
`bash
npm install rollup --save-dev
`
安装完先拿个最简单的小例子试试——比如你有两个JS文件：utils.js（存工具函数）和main.js（调用工具）。
先写utils.js，里面放一个计算圆面积的函数：
`javascript
// utils.js 圆面积计算工具
export function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}
`
再写main.js，调用这个工具函数：
`javascript
// main.js 主文件
import { calculateCircleArea } from './utils.js';
console.log(calculateCircleArea(5));
`
第二步：核心命令，把零散JS打包成一个文件
现在用Rollup把这两个文件打包成一个能直接用的bundle.js，命令很直观：
`bash
rollup main.js --file bundle.js --format iife
`
这里的参数很好懂：main.js是要打包的入口文件，--file bundle.js是输出的文件名，--format是打包的格式——iife就是“立即执行函数”，打包后的代码会自动把函数包成自执行的，不会和其他代码冲突，适合直接嵌在网页里用。
打包完打开bundle.js，就能看到代码被合并好了，还去掉了没用的空格注释，体积比两个文件加起来小不少。如果要做给其他项目用的工具库，只要把格式改成umd或者es就行，umd兼容所有浏览器，es是更现代的模块化格式。
第三步：复杂项目用配置文件，省得每次敲命令
如果项目里有十多个JS文件，每次敲命令太麻烦，这时候可以建一个rollup.config.js配置文件，把所有参数写进去。比如刚才的小例子，配置文件可以这么写：
`javascript
// rollup.config.js
export default {
input: 'main.js', // 打包入口
output: {
file: 'dist/bundle.js', // 输出路径
format: 'iife' // 输出格式
}
};
`
之后只要在命令行敲rollup -c，Rollup就会自动读取这个配置文件，不用每次手动写参数，适合稍微复杂点的项目。
小技巧：打包时去掉没用的代码
很多人写工具函数时，会加一些测试用的代码，或者暂时不用的函数，打包时可以让Rollup自动去掉这些“死代码”。只要在配置里加treeshake: true（这个默认是开启的），Rollup就会分析你用了哪些函数，没用到的都会被删掉，比如刚才utils.js里如果加了一个calculateSquareArea的函数，但main.js没用到，打包后这个函数就会消失，进一步减小文件体积。
现在你可以试试用Rollup打包自己的JS小项目，不管是做个人工具还是组件库，都是很实用的选择。