Rollup 是用于 JavaScript 的模块绑定器,它将小块代码编译成更大和更复杂的东西,例如库或应用程序。

Rollup 其实干的工作和 webpack 类似, 但 Rollup 配置更简单,打包速度快,体积更小。Vue, React, Preact, D3, Three.js … 项目都在使用 Rollup试一试

Why?

这里仅将 rollupwebpack 最一些显而易见的对比。

Webpack 始于2012年,由 Tobias Koppers发起,用于解决当时现有工具未解决的的一个难题:构建复杂的单页应用程序(SPA)。特别是 webpack 的两个特性改变了一切。

代码拆分(Code Splitting):

使你可以将应用程序分解成可管理的代码块,可以按需加载,这意味着你的用户可以快速获取交互性的网站,而不必等到整个应用程序下载和解析完成。当然你可以手动来完成这项工作,那么祝你好运。

静态资源(Static assets):

如图像和 CSS 可以导入到你的应用程序中,而且还能够被作为依赖图中的另一个节点。再也不用关心你的文件是否放在正确的文件夹中,再也不用为文件 URL 增添 hash 而使用 hack 脚本,因为 webpack 会帮我们处理这些事情。

Rollup 则是由于不同的原因被创建的:

利用 ES2015 巧妙的模块设计,尽可能高效地构建出能够直接被其它 JavaScript 库引用的模块。其他的模块打包工具 – 包含 webpack – 通过都是将每个模块封装在一个函数中,将它们放在一个包中,通过浏览器友好的 require 实现,最后逐一执行这些模块。如果您需要按需加载,webpack 这类的打包工具非常合适。否则有点浪费,如果你有很多模块,它会变得更糟。

ES2015模块启用了一种不同的方法,这是真是 Rollup 使用的。所有的代码都放在同一个地方,然后一次性执行,从而生成更简洁、更简单的代码,从而启动更快。您可以 自己使用 Rollup REPL查看它

但是有一个权衡:

代码拆分(Code Splitting)是一个更加棘手的问题,在撰写本文时,Rollup 还不支持。同样的,Rollup 也不支持模块的热更新(HMR)。而对于使用 Rollup 的人来说,最大的痛点可能是 – 它能处理大多数 CommonJS 文件(通过 插件 ),然而有些东西根本不能转译为 ES2015 ,而 webpack 能处理所有你丢给它的事情。


建议: 对于应用使用 webpack,对于类库使用 Rollup.

Rollup cli

1
2
yarn init
yarn add -D rollup

在项目中以开发者模式安装(不建议在全局安装),在 package.json 设置 scriptsrollup

files

1
2
3
4
5
src/
main.js
foo.js
bundle/
package.json

main.js

1
2
import foo from './foo.js';
foo('hello rollup');

foo.js

1
export default (text) => console.log(text);

package.json scripts

1
2
3
"scripts": {
"build": "rollup src/main.js -o bundle/bundle.js -f cjs
}

命令行运行 yarn build, 就可看到打包的文件了, 这里的 -f cjs 是设置了输出的文件格式 commonjs

下面就可使用 node bundle/bundle.js 执行文件了。

这里在看下我们打包好的文件,是不是很简单,但我们这里看到上面的箭头函数没有被转换,我们需要插件去转换。后面再配置文件处说。

命令行参数,这里说常用的,其他的下面配置文件都有。

1
2
3
4
5
6
-i, --input 入口文件
-o, --output.file 出口文件
-f, --output.format [es] 输出类型 (amd, cjs, es, iife, umd)
-h, --help 帮助文档。
-w, --watch 当源文件在磁盘上更改时,重新构建bundle。
--silent 不要在控制台上打印警告。

Rollup config file

配置文件同样创建 rollup.config.js

1
2
3
4
5
6
7
export default {
input: 'src/main.js',
output: {
file: 'bundle/bundle.js',
format: 'cjs'
}
};

设置package.json scripts 配置

1
2
3
"scripts": {
"build": "rollup -c"
}

若配置文件名不是 rollup.config.js 就需要在 -c 后面跟上配置文件名

1
2
3
4
5
6
7
8
9
10
11
export default {
input: // string 入口文件路径
output: {
file: // string 输出路径
format: // string (amd, cjs, es, iife, umd) 输出格式
}
sourceMap: // boolean|string
plugins: [
bable()
]
}

这是基本的配置,详细的配置参考官方。

Rollup plugins

  • rollup-plugin-babel: 使用和 webpack 一样。github
  • rollup-plugin-buble: 更加快速的es转换, 推荐使用。github
  • rollup-plugin-json: 将json作为es6模块使用,常用于提取package.json 信息。github
  • rollup-plugin-node-resolve: 使用 node_modules 第三方模块。github
  • rollup-plugin-commonjs: 因为 node 为 cjs 模块,所以需要使用。github
  • rollup-plugin-alias: 打包后为文件定义别名。github
  • rollup-plugin-uglify: 压缩js文件。github
  • rollup-plugin-replace: 在捆绑文件时替换字符串, 多数来替换 env。 github
  • rollup-plugin-scss: 使用scss。github
  • rollup-plugin-postcss: 使用postscss。github
  • rollup-watch: rollup 将 watch 命令提取为单独文件,需要使用 watch 要安装。github

Reference