Rollup 试炼之路

jopen 8年前

最近看到挺多次 Rollup 这个词，再也架不住好奇，简单的学习实践了一下。 完整项目库地址请戳 。

PS: ES6 对应 ES2015，请忽略这些细节。

什么是 Rollup

Rollup Github 地址 。根据官网的解释，Rollup 是下一代 ES6 模块化工具。ES6 之后，模块化的写法将更加的趋势化，我们会将以前的文件切割成多个的细小模块。那么如何来高效的组织管理这些文件，又有了很多不同的方案。现有的模块化打包已经有如

Browserify 和 Webpack ，那为啥还需要一个新的呢？

优势在哪

  • 可以生成 AMD，CMD，UMD 甚至 ES6 模块文件。

  • Tree-shaking

tree-shaking (有知道中文怎么翻译的同学欢迎留言告知一下)，大致意思就是打包的时候会移除未使用到的 ES6 exports 模块。想要更深入的了解 tree-shaking 的话，可以看下博士的这篇文章 Tree-shaking with webpack 2 and Babel 6 。

话题转回来，Rollup 正是使用了 ES6 的模块特性，所以会使打包后的文件体积更小。如果是 CommonJS 的则需要先通过插件转为 ES6 后处理。

对了，值得多说一句的是，Rollup 打包后的代码没有 require ， import 的，而是直接插入到文件中。

如何引用

Rollup 支持 CLI 和 JS API 方式，同时提供了一些插件如解决压缩 babel 转换等问题。(PS: 此处讲解采用 API 的方式)

首先在项目根目录创建 rollup.js 文件，安装 npm 的相关依赖 

var rollup = require('rollup');  var babel = require('rollup-plugin-babel');  var uglify = require('rollup-plugin-uglify');    rollup.rollup({      entry: 'src/index.js',      plugins: [          babel({              exclude: 'node_modules/**',              presets: [ "es2015-rollup" ]          }),          uglify()      ]  }).then(function(bundle) {      bundle.write({          // output format - 'amd', 'cjs', 'es6', 'iife', 'umd'          format: 'umd',          moduleName: 'dqSystem',          sourceMap: true,          dest: 'dqSystem.js'      });  });

rollup 方法可以配置一些入口文件，依赖插件等，返回的是 bundle 的 Promise 方法。 bundle 方法中可以配置文件相关参数，同时也可以生成多份版本文件。具体的 API 参考官网

使用 node rollup.js 执行打包。另外 Rollup 好像还不支持 watch 的配置，我采用了 npm-watch 的方式跳过了。

采过的坑

试用时间不长，且内容比较简单，可能没碰到一些奇怪的点

  • Rollup.js 中可以 catch 下 error 方便调试错误

  • UMD/IIFE 模式中需要 moduleName

  • Rollup 的模块引用只支持 ES6 Module，其他的需要采用 npm 和 commonjs 的插件去解决

自己YY下

不知道拿 Rollup 和 webpack 相比合不合适。我个人还是挺喜欢 webpack 的打包方式的，关键是功能强大，不过相比，配置也巨复杂。而 Rollup 的配置就简单很多了。实验的项目文件不大，所以没看出来两者在压缩体积上是否有明显的差异。Rollup 的 tree-shaking 也将会在 webpack2 中支持。所以好像并没有什么一定非它不可的感觉。

套用朋友说的一句话，“任何产品的生命周期都得看社区的活跃程度”。从 github 的 fock 人数上，还是持有很大的保留意见的，所有我个人可能会在一些小型或者快速项目中做尝试而已。

</div>

来自： http://segmentfault.com/a/1190000004331382

相关经验