嗨，我是你稳定更新（昨天除外）、持续输出的勾勾。

（本来我是想继续用我的沙雕猫猫头，但是在后台被人吐槽说没有品味，于是我换了一张。）

最近无意间和同事聊到 Rollup 这个 JavaScript 模块打包器。出于“开源”的宗旨，今天就简单细腻地给大家讲讲 Rollup。

首先，可以看下中文官网。（英语读写无障碍的同学请移驾）

地址：

官方介绍

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.jsexport 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 这个小巧工具的打包～

本文首发于公号 勾勾的前端世界

欢迎来找勾勾交流哟～