3.3　Rollup

Rollup是下一代ES6模块化工具，它最大的亮点是利用ES6模块设计，生成更简洁、更简单的代码。Rollup更适合构建JavaScript库，如图3-22所示。

3.3.1　Rollup介绍

Rollup是一个JavaScript模块打包器，可以将小块代码编译成大块复杂的代码，例如library或应用程序。

Rollup对代码模块使用新的标准化格式，这些标准都包含在JavaScript的ES6版本中，而不是以前的特殊解决方案，如CommonJS和AMD。ES6模块可以使开发者自由、无缝地使用最喜爱的library中的那些最有用的独立函数，而项目不必携带其他未使用的代码。ES6模块最终还是要由浏览器原生实现，但当前Rollup可以使开发者提前体验。

1．Rollup的优缺点

Rollup将所有资源放到同一个地方，一次性加载，利用Tree Shaking特性来剔除未使用的代码，减少冗余。它有以下优点：

（1）配置简单，打包速度快。

（2）自动移除未引用的代码（内置Tree Shaking）。

但是它也有以下几个不可忽视的缺点：

（1）开发服务器不能实现模块热更新，调试烦琐。

（2）浏览器环境的代码分割时依赖AMD。

（3）加载第三方模块比较复杂。

2．Rollup与Webpack及Parcel的区别

Rollup的主要功能是对JS进行编译打包，这和Webpack有本质区别。Webpack是一个通用的前端资源打包工具，它不仅可以处理JS，也可以通过Loader来处理CSS、图片、字体等各种前端资源，还提供了Hot Reload等方便前端项目开发的功能。如果不是开发一个JS框架，则Webpack显然会是一个更好的选择，Parcel更适于开发和测试环境，开发者无须任何配置就可以使用Parcel进行打包，如表3-6所示。

3.3.2　Rollup安装与配置

安装Rollup的命令如下：

3.3.3　Rollup基础

当Rollup不包含任何插件时只是一个模块语法的转换工具，它可以把ES6的模块语法编译成不同的模块标准输出，如表3-7所示。

在下面的例子中，用ES6语法编写的模块代码需要运行在Node中，代码如下：

main.js入口，代码如下：

这里ES6的模块语法无法在Node中运行，可使用Rollup进行打包，代码如下：

打包后输出的结果如下：

可以看到Rollup做了两件事：

（1）把ES6模块语法编译成了Node的语法。

（2）把两个文件的代码打包成了一份。

下面详细讲解Rollup编译配置及打包的流程和插件的使用。

1．配置文件

创建一个rollup.config.js文件，配置文件格式如下：

有了配置文件执行命令，便可使用--config参数，表明使用配置文件，命令如下：

2．rollup.config.js配置文件包含选项

Rollup的详细配置文件如下：

这里input、output.file和output.format都是必选的，因此，一个基础配置文件如下：

这里的format字段有5种选项，如表3-8所示。

3．使用插件

如果需要加载其他类型资源模块或者在代码中导入CommonJS模块，就需要使用Rollup插件。

插件拓展了Rollup处理其他类型文件的能力，它的功能有点类似于Webpack的Loader和Plugin的组合。不过配置比Webpack中要简单很多，不用逐个声明哪个文件用哪个插件处理，只需要在Plugin中声明，在引入对应文件类型时就会自动加载。接下来看几个常用的插件。

1）rollup-plugin-json插件

rollup-plugin-json插件让Rollup从JSON文件中读取数据，代码如下：

配置如下：

package.json文件的打包命令如下：

2）rollup-plugin-commonjs插件

Rollup默认只能加载ES6模块的JS，但是项目中通常也会用到CommonJS的模块，这样Rollup解析时就会出现问题，代码如下：

由于ES6模块导入时默认会去找default，因此这里打包会报错，这时就需要用到rollup-plugin-commonjs插件进行转换，配置如下：

4．模块热更新

Rollup本身不支持启动开发服务器，可以通过rollup-plugin-serve第三方插件来启动一个静态资源服务器，代码如下：

不过由于其本质上是一个静态资源的服务器，因此不支持模块热更新。

5．Tree Shaking

由于Rollup本身支持ES6模块化规范，因此不需要额外配置即可进行Tree Shaking。

6．代码分割

Rollup代码分割和Parcel一样，也是通过按需导入的方式，但是输出的格式不能使用iife，因为iife自执行函数会把所有模块放到一个文件中，可以通过amd或者cjs等其他规范，代码如下：

这样通过import（）动态导入的代码就会单独分割到独立的JS中，在调用时按需引入。不过对于这种amd模块的文件，不能直接在浏览器中引用，必须通过实现AMD标准的库加载，例如Require.js。

7．多入口打包

多入口打包默认会提取公共模块，意味着会执行代码拆分，所以格式不能是iife格式，需要使用多入口打包方式，配置如下： bKNe1HXGa2L1MpJDDmNMgZMPttIj9Op26MfaDgApzJKNobzi5zR+8VJcn39ap5xQ