Rollup-前端模块化打包工具入门

【翻译】Rollup.js前端模块化打包工具入门

Rollup.js向导，入门指引

概念：什么是Rollup.js？

　　最直接的解释就是，Rollup是前端模块化的一个打包工具，将模块文件根据命令或者根据rollup.config.js配置文件将多个模块文件打包成一个文件，然后就可以通过HTML的<script>标签去导入这一个结果文件即可，从而使代码最小化，并且Rollup会自动过滤掉那些没有被使用过的函数或变量。

什么是模块？为何要使用模块？

　　模块其实就相当于一个js文件，让单一功能或者一个完整的功能集中到一个地方，当使用的时候直接引入该模块即可，从而不需要关心该模块中的函数是如何实现的，只需要关心该模块实现怎样的功能。

例如：（下面的代码示例演示了简单的模块使用）

// 导入模块内容，从模块文件中
import dictionary from './dictionary.js';
// 使用{}可实现同时导入多个元素
import { extractWords } from './string-utils.js';// 这里用export将当前文件的该函数导出了，
// 其他文件同样可以通过上面的import方式来使用该模块的spellcheck函数
export default function spellcheck ( text ) {// 这里调用了string-utils模块里的extractWords方法var words       = extractWords( text );var mistakes    = [];words.forEach( function ( word ) {// 这里使用了dictionary模块的dictionary方法if ( !dictionary.contains( word.text ） ） {mistakes.push({start: word.start,end: word.end,suggestions: dictionary.getSuggestions( word.text )});}});// ... //
}// PS: 上述方法，使用的是类似AMD的一次性导入方式，与CMD的使用时导入不同

通过上述方式的调用我们就不需要再关心dictionary和string-utils模块里的extractWrods是怎么对文本进行处理的，以及dictionary的数据又是从哪里来的，或者他们的实现原理以及用到的算法又是什么样的，我们只需要关心这些接口是干什么用的，如果出现问题我们该从哪里去定位。

模块化给我们带来的好处
- 代码可重用，由于通过模块化使得单一功能实现集中到一个文件中，当我们使用的时候只需要引入该模块即可而不需要做任何的移植或修改，从而达到一次编写多次使用的目的；
- 可维护性，在出现问题，或者需要修改代码时，可直接以模块为目标去做定位，更易于维护；
- 可测试性，由于整个模块都处于一个文件中，我们可以很方便的去测试该功能；
- 有助于编程人员之间的合作和协调，在有多个人员使用该模块时，更易于协调和合作，因为该功能都几种在一个模块中，当大家都需要该模块的时候，或者需要修改的时候，只需要针对这个一个文件进行修改，从而减少对其他程序员的影响；
- 减少BUG：使用模块化可以让我们放心的编写自己的代码，而不需要担心命名冲突等一系列问题。

使用Rollup创建第一个打包Demo

安装Rollup，很简单，在保证机器安装了nodeJS和npm的基础上使用下面命令即可

npm install rollup --global # ornpm i rollup -gfor short
测试rollup，直接输入rollup命令，查看是否安装成功或者通过rollup --help / -h

rollup
创建Demo工程

mkdir -p my-rollup-project/src

cd my-rollup-project

创建入口文件：main.js

touch src/main.js

输入以下内容：

// 从foo模块导入foo变量
import foo from './foo.js';// 创建并导出默认函数，即该函数导出时的函数名即该模块文件的文件名
// 这里是'main', 该方式采用的是ES6标准的模块'定义导出方式'
export default function () {console.log( foo );
}

创建入口文件所依赖的的文件：foo.js

touch src/foo.js

包含以下内容：

export default 48; // ES6标准的定义导出方式
将main.js打包，直接输出

rollup src/main.js

将会输出以下内容：
```
var foo = 48;function main () {console.log( foo );
}export default main;
```
将打包后的内容输出到指定文件，使用参数 -o 或者 –output

rollup src/main.js -o bundle.js

执行该命令之后，上面直接输出的内容将会出现在bundle.js文件中
并且还可以通过 -f 或者 –format命令指定输出的格式（-f cjs = commonJS, amd = AMD, …）

rollup src/main.js -o bundle.js -f cjs

通过指定 -f cjs 输出成commonJS的格式，将得到以下内容：
```
'use strict'var foo = 48;function main () {console.log( foo );
}module.exports = main;
```

使用打包后的bundle.js

通过’node’命令进入，node模式

node// 这里通过require方式去引入模块
> var myBundle = require('./bundle.js');
> myBundle();// 得出结果：48

使用Rollup的配置文件`rollup.config.js`，从而减少打包步骤

这还是简单的例子，如果是比较大的工程通过命令去完成就显得有些繁琐了，因此我们可以通过创建和书写rollup的配置文件来减少操作步骤，并且有了配置文件还可以一劳永逸，不用每次都输入命令完成；

rollup.config.js内容或书写格式

export default {// 指定入口文件，即我们要打包成bundle.js的源文件entry: './main.js', // 指定要打包成什么格式，等同： rollup src/main.js -o bundle.js -f cjs中的'-f cjs'参数format: 'cjs', // 最后是指定输出文件，即命令中的'-o bundle.js'参数dest: 'bundle.js'
}

配置文件书写好之后，在工程目录下就可以直接使用rollup -c命令去完成之前通过多条命令才能完成的操作了

通过 -c 指定rollup命令使用的配置文件，如果不指定就会去使用rollup.config.js默认配置，所以在没有修改默认配置文件的情况下可以直接使用下面这个命令去完成打包工作。
rollup -c
修改默认配置文件名，通过--config指定

rollup --config rollup.config.dev.js
rollup --config rollup.config.prod.js

rollup插件的使用: json插件，`rollup-plugin-json`

Rollup插件

通过rollup插件从JSON文件中导入数据（比如：package.json）

package.json包含内容，比如：（该项目的项目名称以及版本信息）
```
{"name": "my-rollup-project","version": "1.0.0"
}
```
安装rollup的json插件, 这个一定要在项目目录下执行

npm install --save-dev rollup-plugin-json

或者简写：

npm i -D rollup-plugin-json

安装之后package.json内容会有变化，如下：

{"name": "my-rollup-project","version": "1.0.0","devDependencies": {"rollup-plugin-json": "^2.0.2"}
}

使用json插件，在main.js里面就可以通过import去引入并使用package.json里面的数据了

// src/main.js
import { version } from "../package.json"export default function () {console.log( 'current version is ' + version );
}

修改配置文件rollup.config.js，加入插件配置项

// 引入json插件
import json from 'rollup-plugin-json';export default {entry: 'src/main.js',format: 'cjs',// 以数组形式出现，且数组成员使用小括号，比如：[ json(), a(), b() ...]plugins: [ json() ], dest: 'bundle.js'
};

最后通过rollup -c打包，得出：

'use strict'var version = '1.0.0';function main () {console.log( 'current version is ' + version );
}module.exports = main;

rollup插件的使用: Babel插件，`rollup-plugin-json`

Babel插件，使用目前浏览器未支持的JS功能

安装Babel: npm i -D rollup-plugin-babel

添加到配置文件rollup.config.js

// 加载插件
import json from 'rollup-plugin-json';
import babel from 'rollup-plugin-babel';export default {entry: 'src/main.js',format: 'cjs',plugins: [ json(), babel() ],dest: 'bundle.js'
};

在使用Babel去编译代码之前需要进行一些配置，该配置文件需要在src/目录下创建

touch src/.babelrc

内容：
```
{"presets": ["es2015-rollup"]
}
```
在经过上一步配置之后，还需要安装一下babel-preset-es2015-rollup

npm i -D babel-preset-es2015-rollup

上述步骤完成之后我们就可以在文件中使用ES2015特性了，如：

// src/main.js
import { version } from '../package.json';const message = `current version is ${version}`;export default () => console.log( message );

最后使用rollup -c打包得出以下结果：

// bundle.js
'use strict';var version = '1.0.0';var message = 'current version is ' + version;var main = (function () {console.log( message );
});module.exports = main;

总结

// 可以通过Babel插件来使用ES2015的那些还没有被广泛使用的新特性，Babel插件的使用步骤如下：// 1. 安装
npm i -D rollup-plugin-babel  // 2. 在rollup配置文件中加载该插件，即在导出的默认配置的'plugins'属性中的数组中添加一项'babel()'
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';export default {...// json插件安装：npm i -D rollup-plugin-json"plugins": [ babel(), json() ],...
}// 3. 创建并配置Babel的配置文件： src/.babelrc
{"presets": [ "es2015-rollup" ] // 预设让rollup支持es2015
}// 4. 由于预设中需要用到es2015-rollup，所以需要先安装Babel的这个插件
npm i -D babel-preset-es2015-rollup// 5. 上述准备工作完成之后，就可以创建我们的工程模块文件了，并在其中可以使用ES2015新特性了，然后进行打包生成目标文件
// src/main.js
import { version } from '../package.json';// ES2015新语法，声明变量，赋值中使用反引号，${}来引用模块中的变量
const message = `current version is ${version}`;// 新的函数声明方式，等价于 export defualt function () { console.log( message ); }
export default () => console.log( message );// 6. 最后进行打包得到最终目标文件：bundle.js
// 该命令会根据默认的 rollup.config.js文件中的配置信息进行打包
rollup -c// bundle.js
'use strict';var version = "1.0.0";var message = "current version is " + version;// 注意通过新特新打包出来的函数，是表达式函数
var main = (function () {console.log( message );
});module.exports = main;

通过`npm`使用`Rollup`

创建npm-rollup工程目录

mkdir -p npm-rollup-project/src
创建package.json，位置保存在工程根目录下即npm-rollup-project/，保存配置信息以及其他数据等，可以预先设置一些属性

cd npm-rollup-project

touch package.json

并将想要的一些属性预设到package.json，比如：
```
{"name": "npm-rollup-project","version": "1.0.0"
}
```

初始化，可以通过npm init命令初始化，同时给package.json配置额外属性

npm init

配置完成后package.json内容大致如下：

{"name": "npm-rollup-project","version": "1.0.0","main": "index.js",   // 主入口文件"scripts": {"test": "echo ...."},"keywords": "rollup", // 项目相关的关键字"author": "lizc","license": "ISC","description": ""
}

准备工作完成之后，就可以开始给项目安装rollup了

npm install --save rollup

创建入口文件，使用ES2015模块标准，同时可以使用ES2015的新特性

// src/main.jsimport foo from './foo.js';export default function () {console.log( foo );
}

创建main.js依赖文件foo.js
```
// src/foo.jsexport default 45;
```

在package.json中创建新的脚本

"scripts": {// ... others"build": "rollup src/main.js --output bundle.js"
}

运行package.json中的build脚本

npm run build

至此得到编译后并打包的脚本文件bundle.js
```
var foo = 45;function main() {console.log( foo );
}export default main;
```

总结

// 使用npm进行模块化，打包步骤
// 1. 创建package.json配置文件，并初始化npm init，package.json内容将发生如下变化
{"name": "...","version": "...","main": "..js","scripts": {// 打包时需要运行的脚本，或其他脚本，比如："build": "rollup src/main.js --output bundle.js"},// 以及其他等配置信息
}// 2. 给项目安装rollup，安装完成之后工程目录下就会有一个名为"node_modules"的目录
npm install --save rollup// 3. 创建项目入口文件main.js，以及其依赖文件foo.js或其他项目所需文件// 4. 在package.json中的"scripts"属性中编写，打包需要执行的命令，比如：
"scripts": {"build": "rollup src/main.js --output bundle.js"  // 脚本名字'build'可以根据需要取
}    // 5. 执行脚本中的命令，run后面的命令需要跟"scripts"中命令的名字相一致
npm run build