模块之美
首发于模块之美

使用 Rollup 和 Buble 编译 JS 库

Rollup 第一印象

Rollup 其实也诞生有一段时间了,我来回想一下当初的第一印象吧:

  • 在 GitHub 看到某人 star 这个库,忘记是谁了,是 kentcdodds 还是谁。
  • 哇,名字很酷,有点萌的感觉。
  • Tree shaking? what the fuck?
  • 哦,这样打包文件小一点。配置很简单的样子。
  • 怎么打包 CSS 呢?
  • 哦不能,那我试试做个插件吧,于是我做了 rollup-plugin-postcss

还有一点就是 Rollup 打包的代码没有像 Webpack 那样自带一个模块加载系统,看起来更清爽 XD

和 Webpack 对比

Rollup 的基因表明它是生来打包 JS 代码用的,虽然也能打包 CSS、静态文件什么的,但总感觉有点违和感。

Tree Shaking 在 Webpack 2 中也加入了,所以实际生成文件打包几乎差不多。

Buble

Bublé – the blazing fast, batteries-included ES2015 compiler

同一个作者,这次是给 Babel 进行一个补充。Buble 不会转换所有 ES next 特性,只是转换保证在 ES5 环境能实现良好性能的部分特性。

同样,正如我们知道大部分情况使用 RegExp 比 AST 更快一样,Buble 没有插件机制的好处就是更快且配置更简单。

Rollup + Buble

Rollup 是 JSPM 的构建工具,而后者主要是一个前端模块包管理系统,这证明 Rollup 在这方面的构建工作有其优势所在。

这次我们尝试用这个组合替换掉 Webpack + Babel 这对老搭档试试,我的体验就是配制简单了,编译更快了,又有了和代码初恋的感觉。

Bubleup 让事情来得更简单吧!

GitHub - egoist/bubleup: Transpile ESnext code with the power of Rollup and Buble.

现在编程界有一个通病,就是缺乏创新,很多看起来新的东西其实只是给一些旧事物套了一层皮。你可以联想一下上次你升级 PhotoShop,是不是启动界面更炫了,然而启动速度更慢了,配置更多了。有时候为了解决设计上的不足重复设计而不是从底层改变设计就是这种效果。(自黑)

然而这也是一个摸索的过程,同样如此,Bubleup 是一个 Rollup 和 Buble 的封装,更 higher level 的配置简化了直接使用两者的过程。并且支持单次编译生成多个格式的文件。这有利于既要支持 UMD 也要支持 CommonJS 的模块。

$ bubleup --format umd --format cjs --module-name Vue

当然配置不是不存在的,配置的作用是用来简化核心功能,你可以直接在 package.json 中配置 Bubleup 而不是通过命令行传递参数,README 中有详细介绍。据个人体验,使用 json 或者 yaml 的配置文件往往不容易让人抑郁。

编辑于 2016-09-17

文章被以下专栏收录