最近看到挺多次 Rollup 这个词,再也架不住好奇,简单的学习实践了一下。。
PS: ES6 对应 ES2015,请忽略这些细节。
什么是 Rollup
。根据官网的解释,Rollup 是下一代 ES6 模块化工具。ES6 之后,模块化的写法将更加的趋势化,我们会将以前的文件切割成多个的细小模块。那么如何来高效的组织管理这些文件,又有了很多不同的方案。现有的模块化打包已经有如
Browserify
和 Webpack
,那为啥还需要一个新的呢? 优势在哪
可以生成 AMD,CMD,UMD 甚至 ES6 模块文件。
Tree-shaking
tree-shaking
(有知道中文怎么翻译的同学欢迎留言告知一下),大致意思就是打包的时候会移除未使用到的 ES6 exports
模块。想要更深入的了解 tree-shaking
的话,可以看下博士的这篇文章。
话题转回来,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 人数上,还是持有很大的保留意见的,所有我个人可能会在一些小型或者快速项目中做尝试而已。