学习rollup.js来打包代码

rollup.js

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

我经常使用的three.js就是通过Rollup打包的，而不是Webpack。所以我也来研究一下这个打包工具。

参考网站

rollup.js中文文档

第一个rollup.js项目

1. 初始化一个npm项目
   npm init
2. 安装rollup
   npm install rollup --save-dev
3. 安装失败，学习结束。
4. cnpm 安装，安装成功。
   npm install rollup --save-dev --registry=https://registry.npm.taobao.org
5. 创建src/main.js文件。随便写上几行代码。
6. 新建配置文件
   rollup.config.js

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    name:'test',
    format: 'cjs'
  }
};

7. 编译运行
   rollup -c。把命令写在package.json中：“build”: “rollup -c”。运行npm run build

最基础最简单的rollup.js教程就到此结束。

对比一下源文件和编译后的文件。变量b没有使用，也没有被打包。相比webpack打包后的文件，rollup相对简洁很多，这正是我想要的结果，多文件合并（但是下面的代码并没有演示多文件合并，不急，慢慢来）。

//main.js
var a = 10;
console.log(a);
var b = 30;

//index.js
(function (factory) {
	typeof define === 'function' && define.amd ? define(factory) :
	factory();
}(function () { 'use strict';

	var a = 10;
	console.log(a);

}));