下一代前端模块化打包利器rollup
什么是Rollup.js？
最直接的解释就是，Rollup是前端模块化的一个打包工具，将模块文件根据命令或 者根据rollup.config.js配置文件将多个模块文件打包成一个文件，然后就可以通过 HTML的<script>标签去导入这一个结果文件即可，从而使代码最小化，并且Rollup会自动过滤掉那些没有被使用过的函数或变量。
你也可以认为Rollup是一个构建工具，可以和像Grunt和Gulp等一起配置使用。但是， 需要注意的一点是当你使用Grunt和Gulp来处理像打包JavaScript这样的任务时，这些 工具的底层还是使用了像Rollup，Browserify或Webpack这些东西。
Rollup解决什么问题？
殊不知在 webpack 1.X 版本是无法利用该特性来避免引入冗余模块代码的，导致打出来的 bundle 文件大小难免略有臃肿。今天则向大家介绍一个当红炸子鸡——Rollup.js，通过它可以让你的 bundle 最小化 ，有效减少文件请求大小——以至于连 vue 都迅速地转投它来打包模块。
什么是模块？为何要使用模块？
模块其实就相当于一个js文件，让单一功能或者一个完整的功能集中到一个地方，当使用的时候直接引入该模块即可，从而不需要关心该模块中的函数是如何实现的，只需要关心该模块实现怎样的功能。
Tree-shaking
在 Rollup 编译模块的过程中，通过 Tree-shacking 的方式来剔除各模块中最终未被引用到的方法，通过仅保留被调用到的代码块来缩减 bundle 的大小。
这种方法需要 ES2015 的解构赋值语法来配合，多亏了它，Rollup 才能有效地对模块内容进行可靠的静态分析。
如何使用Rollup处理并打包项目文件？
为了开始工作，我们需要一些用来处理的代码。这个教程里，我们将用一个小应用，可从 GitHub 获取。
目录结构如下：
learn-rollup/
├── src/
│ ├── scripts/
│ │ ├── modules/
│ │ │ ├── mod1.js
│ │ │ └── mod2.js
│ │ └── main.js
│ └── styles/
│ └── main.css
└── package.json
你可以在终端执行下面的命令下载这个应用：
# Move to the folder where you keep your dev projects.
cd /path/to/your/projects# Clone the starter branch of the app from GitHub.
git clone -b step-0 --single-branch https://github.com/jlengstorf/learn-
rollup.git# The files are downloaded to /path/to/your/projects/learn-rollup/
安装Rollup并且创建配置文件
第一步，执行下面的命令安装Rollup：
npm install --save-dev rollup
然后，在 learn-rollup 文件夹下新建 rollup.config.js 。在文件中添加如下内容。
export default {
entry: 'src/scripts/main.js',
dest: 'build/js/main.min.js',
format: 'iife',
sourceMap: 'inline',
};
说说每个配置项实际上做了什么：
entry — 希望Rollup处理的文件路径。大多数应用中，它将是入口文件，初始化所有
东西并启动应用。
dest — 编译完的文件需要被存放的路径。
format — Rollup支持多种输出格式。因为我们是要在浏览器中使用，需要使用立即执
行函数表达式(IIFE)[注1]
sourceMap — 调试时sourcemap是非常有用的。这个配置项会在生成文件中添加一个
sourcemap，让开发更方便。
第二步 执行cmd命令：
rollup -c
即可通过默认配置文件（rollup.config.js）所设置的信息来进行打包。
第三步 使用插件
Rollup 也支持使用插件，写到配置对象的 plugin 里即可，这里我们以 rollup-plugin-babel 为例：
import babel from 'rollup-plugin-babel';
export default {
entry: 'src/main.js',
format: 'cjs',
plugins: [ babel() ],
dest: 'rel/bundle.js'
};
比较不爽的是，babel 的预设不像 webpack 可以直接写在配置文件里，而还是得独立写个“src/.babelrc”（注意我们可以写在 src 下，而不是非得放在项目根目录下）：
{
"presets": ["es2015-rollup"]
}
注意咱得确保安装了 rollup-plugin-babel 和 babel 预设 babel-preset-es2015-rollup：
npm i rollup-plugin-babel babel-preset-es2015-rollup
这时候就能配合 babel 一起把 ES6 的模块编译为 ES5 的 bundle 了。
Rollup 也支持直接在模块中来被调用执行，这样很方便跟 grunt/gulp 等工具进行协作。
Rollup 虽然利用 ES6 的特性帮咱节省了不少文件大小，但它并没有类似 webpack 的 -p 参数帮你压缩混淆文件。
因此即使是官方文档也推荐配合使用 UglifyJS 来进一步缩小 bundle 体积。
另外 webpack2 已经出来好几款 beta 版本了，同样也加上了对 Tree-shaking 的支持，相信 webpack2 出来后，Rollup 的热度会大大消减。
参考资料：
1.http://www.w3cplus.com/javascript/learn-rollup-js.html?t=1474412757476
2.http://web.jobbole.com/86230/
3.http://blog.csdn.net/gccll/article/details/52785754
下一代前端模块化打包利器rollup：等您坐沙发呢！
发表评论
