到2018年，javaScript.fun上面的打包工具已经森罗万象，据17年统计，使用率最高的打包工具应该是webpack了，
星星数🌟也是遥遥领先，就这些工具而言，好坏差距并不是很大，有些需要根据我们项目择优选择。
前言
webpack
支持’commonjs’，具有比较丰富的插件，支持混淆转义、压缩、语法转型等生态，可以支持部分gulp/grunt的工作。与vue\react\angular等生态结合的很好，方便单页应用。
browserify
在node环境中使用amd方式来引入，功能没有webpack那么强大，本质上来说rollup与之有相似处理方法，但rollup已经以更加丰富的编译形式与更快的编译速度领先。
parcel
新一代打包工具，与其他妖艳贱货不一样的是它不以js为主要打包入口，反而是index.html，通过你的页面将所有引入的资源生成sourcemap进行管理。
rollup
官方放出的下一代打包工具，工程是蛮早就开始了，最近的发展有反超之势，简单易用，结合了webpack与browserify的优点，配置要简单化。特色是treeshaking，可以消除不必要的多余引用。
那么现在我们便开始初探这个神秘的工具吧！🕺🏻
体验
1
2
| // 获取最新版本
npm install --global rollup@latest
|
它的模式以下几个版本
for browser
1
| rollup main.js --file bundle.js --format iife
|
for nodejs
1
| rollup main.js --file bundle.js --format cjs
|
for nodejs、browser
1
| rollup main.js --file bundle.js --format umd --name 'myBundle'
|
除了在命令行使用，也可以通过写配置文件的方式搞定
1
2
3
4
5
6
7
8
| // rollup.config.js
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
}
};
|
这种写法让我们想到webpack，可以方便地过渡过来。
看看还有哪些配置选项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
export default {
// 核心选项
input, // 必须
external,
plugins,
// 额外选项
onwarn,
// danger zone
acorn,
context,
moduleContext,
legacy
output: { // 必须 (如果要输出多个，可以是一个数组)
// 核心选项
file, // 必须
format, // 必须
name,
globals,
// 额外选项
paths,
banner,
footer,
intro,
outro,
sourcemap,
sourcemapFile,
interop,
// 高危选项
exports,
amd,
indent
strict
},
};
|
除了更多地配置了解这些以外，我们也要对命令行参数有所了解，才能搭配地更好去编译文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
-i, --input 要打包的文件（必须）
-o, --output.file 输出的文件 (如果没有这个参数，则直接输出到控制台)
-f, --output.format [es] 输出的文件类型 (amd, cjs, es, iife, umd)
-e, --external 将模块ID的逗号分隔列表排除
-g, --globals 以`module ID:Global` 键值对的形式，用逗号分隔开
任何定义在这里模块ID定义添加到外部依赖
-n, --name 生成UMD模块的名字
-m, --sourcemap 生成 sourcemap (`-m inline` for inline map)
--amd.id AMD模块的ID，默认是个匿名函数
--amd.define 使用Function来代替`define`
--no-strict 在生成的包中省略`"use strict";`
--no-conflict 对于UMD模块来说，给全局变量生成一个无冲突的方法
--intro 在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容
--outro 在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容
--banner 在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
--footer 在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容
--interop 包含公共的模块（这个选项是默认添加的）
|
这些可以通过 -h/--help 获取。
如果你想在node文件中使用可以方便地引用官方给出的几个api，其中最常见的引导是rollup.rollup，该函数返回一个promise，解析一个bundle对象，方便使用者阅读其输出项。
