JavaScript 模块打包器——Rollup

最近无意间和同事聊到 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.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 这个小巧工具的打包～