Rollup处理并打包JS文件项目实例

关于Rollup

rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当咱们使用ES6模块编写应用或者库时，它能够打包成一个单独文件提供浏览器和Node.js来使用。 它的优势有以下：

1. 能组合咱们的脚本文件。
2. 移除未使用的代码(仅仅使用ES6语法中)。
3. 在浏览器中支持使用 Node modules。
4. 压缩文件代码使文件大小尽量最小化。

Rollup最主要的优势是它是基于ES2015模块的，相比于webpack或Browserify所使用的CommonJS模块更加有效率，由于Rollup使用一种叫作tree-shaking的特性来移除模块中未使用的代码，这也就是说当咱们引用一个库的时候，咱们只用到一个库的某一段的代码的时候，它不会把全部的代码打包进来，而仅仅打包使用到的代码(webpack2.0+貌似也引入了tree-shaking)。

注意：Rollup只会在ES6模块中支持tree-shaking特性。目前按照CommonJS模块编写的jquery不能被支持tree-shaking。

Rollup的应用场景

如今目前流行的打包有 gulp 和 webpack，那么与前面两个对比，我以为rollup更适合打包js库，可是对于打包一个项目的整个应用的话，我到以为webpack更适合，好比打包一些图片，字体等资源文件的时候，webpack很适合。

本项目的使用方法

项目地址：GitHub

经过GitHub下载项目文件，在命令行工具定位到项目根目录，而后输入 npm install 安装模块，在输入下面其中一个命令：

一、在命令行中输入如下命令，便可监听文件变化并打包文件

npm run dev

二、在命令行中输入如下命令，便可完成打包

npm run build