嗨，我是你稳定更新（昨天除外）、持续输出的勾勾。
（本来我是想继续用我的沙雕猫猫头，但是在后台被人吐槽说没有品味，于是我换了一张。）
最近无意间和同事聊到 Rollup 这个 JavaScript 模块打包器。出于“开源”的宗旨，今天就简单细腻地给大家讲讲 Rollup。
首先，可以看下中文官网。（英语读写无障碍的同学请移驾）
地址：https://www.rollupjs.com/
官方介绍
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。
ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用的独立函数，而你的项目不必携带其他未使用的代码。
ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。
官方解说确实艰涩难懂，我们可以 get 以下几点：
- 专属 JavaScript 打包器
- 划整为一
- 适合库和框架
- 具有 Tree shaking 功能
实际操作
话不多说直接上手，我们先全局安装这个 rollup 工具。
npm install -g rollup
安装成功之后，有心的小伙伴可以 rollup -h || rollup --help 看下它的所有命令行，这里我就不细说了。
直接使用配置文件打包 rollup.config.js。当然我们也可以自定义打包文件，它里面通过 Esmodule 的方式导出一个对象。
//rollup.config.js
export?default?{
????input
????output
????plugin
}配置完成之后在终端 rollup --config 或 -c 才可以使用 rollup 的配置文件。
#?默认使用rollup.config.js
$?rollup?--config
#?或者,?使用自定义的配置文件，这里使用my.config.js作为配置文件
$ rollup --config my.config.js配置项
Input 入口文件配置，可以是字符串也可以是数组。
- 字符串——说明是单文件打包
- 数组——说明是多文件打包
Output 文件出口配置是一个对象。
{
file:"",//文件打包后出口文件名称
format:"iife" // 打包后文件格式 iife 自执行函数 cjs 是 commonjs 规范 amd 是 amd 规范等
}
Plugin 插件配置 它是一个数组，常用插件如下：
- rollup-plugin-json rollup 读取 json 文件
- rollup-plugin-node-resolve rollup可以查找第三方模块
- rollup-plugin-commonjs 可以使用 commonjs 规范的模块
代码分包
如果我们在使用过程中需要使用分包这个功能，就需要设置 output 的配置项。
output:{
????dir:"dist",
????format:"amd"
}输出到 dist 文件夹下，采用 amd 规范输出。
多入口打包
多入口打包也很简单，就是将 input 设置为一个数组，元素就是每个要打包文件路径。
对比 webpack
- Rollup 只能处理 js 模块，而 webpack 可以处理任何资源，可以把所有的资源都当成模块来进行处理
- Rollup 多用于类库开发的打包
- Rollup 一般不会产生额外的代码（具有 Tree shaking 功能）
- Rollup 会把所有资源放在一起加载，webpack 可以按需拆分
综上就是 rollup 的基本使用，小伙伴们可以动手操作一番，体验下 Rollup 这个小巧工具的打包～
本文首发于公号 勾勾的前端世界
欢迎来找勾勾交流哟～