下一代模块打包工具 —— Rollup

为了完成越来越复杂的网页应用，模块化发挥了越来越重要的作用。为了让模块化代码在浏览器中运行，模块打包工具成为了开发者必不可少的重要工具。

0 打包工具的前世今生

在 ES2015 发布之前，JavaScript 语言本身并不支持模块化，在众多的非官方模块化规范中，CommonJS 借势 Node.js 的流行成为了应用最为广泛的方案。然而，CommonJS 是为了构建浏览器之外的 JavaScript 项目而生的规范，想要在浏览器中运行 CommonJS 代码就必须对代码进行额外处理，这就是模块打包工具诞生的原因。

模块打包工具发展至今已经非常成熟，Browserify、Webpack 这些打包工具除了能够将 CommonJS 代码打包为浏览器可以运行的代码，还提供了代码分割、更多模块化规范支持等丰富的功能以及良好的开发体验。

CommonJS 的良好格局被 ES2015 模块化规范的出现打破了。原生的模块化规范相比第三方的模块化规范有许多无可取代的优势，可以确定的是 CommonJS 将会在不久的将来被 ES2015 所取代成为一段历史。而在 ES2015 普及的过程中，CommonJS 规范的模块打包工具可谓凭借 Babel 强行续命，发挥最后的余热。

1 「下一代」打包工具

Rollup 称自己为下一代打包工具，因为 Rollup 为 ES2015 模块化规范而生的。与当下流行的 CommonJS 打包规范打包工具不同，Rollup 可以直接打包符合 ES2015 模块化规范的代码，而并不需要将代码通过 Babel 转化为 CommonJS 模块化规范的形式。

2 为什么使用 Rollup

在目前 CommonJS 规范的打包工具拥有良好开发体验的情况下，为什么要使用 Rollup？或者说 Rollup 有什么优势？

首先，不同于目前流行的打包工具，Rollup 并不会为每个模块创建独立的函数作用域，而是将所有的代码放置于同一个作用域中，这使得代码的运行更有效率。

此外，得益于 ES2015 模块化规范的静态化导入特性，Rollup 可以通过 Tree-Shaking 操作对代码进行精简，从而得到提及更小的打包代码。关于 Tree-Shaking 的介绍，可以参考这篇文章。除了 Tree-Shaking，Rollup 还支持 Bindings 和 Cycles 这类高级特性。

最后，ES2015 已经是不可逆转的趋势，告别 Common Module，拥抱 ES Module 正在成为更多人的选择。

3 如何使用 Rollup

3.1 第一个 Rollup 打包文件

如果你熟悉 Browserify + Babel 或 Webpack + Babel 的开发模式，那么使用 Rollup 看起来再简单不过了，只需要使用 npm 全局安装 rollup，就可以通过命令行打包符合 ES2015 的文件了。

main.js:

import config from "./config.js";

console.log(config.name);

config.js:

export default {
  name: "Test Rollup",
  author: "Zhang",
};

只需要在命令行运行 rollup main.js -o bundle.js 就可以完成打包工作，其中 main.js 是入口文件，bundle.js 是输出文件，生成的打包文件将会是下面的样子：

bundle.js:

var config = {
  name: "Test Rollup",
  author: "Zhang",
};

console.log(config.name);

可以看到 Rollup 生成的代码非常简洁，整个文件并没有添加额外的函数作用域及代码，这便是 Rollup 一大优势。

3.2 更多配置项

很多时候我们的代码还会作为一个模块导出供其他模块使用，Rollup 虽然是一个 ES2015 模块打包器，但提供多种规范的模块导出 —— Rollup 支持导出 AMD、CommonJS、ES2015、Global 及 UMD 五种规范的打包文件，可以通过 rollup -f amd/cjs/es/iife/umd 来切换导出模块所使用的规范。

在使用 Global 及 UMD 规范时，导出的模块可能会被挂载到全局变量上，这时需要设置一个变量名用于模块挂载，通过 rollup -n 命令就可以定义模块名。

Rollup 同样提供了配置文件的功能，使用 rollup -c 即可读取 rollup.config.js 中的配置。

4 Rollup 开发实践

4.1 Rollup 引用 npm 资源

使用 ES2015 模块语法的 Rollup 在默认情况下是不支持 CommonJS 模块，这还会导致 npm 包在默认情况下也不能被 Rollup 支持。为了使用 npm 资源，我们需要通过 plugin 帮助 Rollup 支持 CommonJS 模块语法，这里用到的是 rollup-plugin-commonjs，另外，由于 Rollup 默认不会解析 node_modules 目录，还需要使用 rollup-plugin-node-resolve 来解析 npm 模块。

4.2 Rollup 结合 Babel

默认情况下，Babel 会将 ES2015 模块语法转化为 CommonJS 模块语法，这必然会导致基于 ES2015 模块化语法的 Rollup 无法正常工作，因此 Babel 需要进行特殊配置以配合 Rollup。

为了使用 Babel，我们首先要将 Babel 默认的 es2015 preset 替换为 es2015-rollup，这一 preset 不会编译模块化的相关语法，另外还会添加 Rollup 的一些依赖代码。最后只需要在 Rollup 中使用 rollup-plugin-babel，就可以让 Babel 与 Rollup 和睦共处。