Heshiyu's Blog

# Rollup

Rollup和Webpack一样，也是一款打包工具。经过一番研究，在最近的一个小项目nos-js-uploader (opens new window)选用了Rollup作为打包工具。

同时也发现Vue、React、Three.js以及很多知名的库也在使用Rollup。

为什么要用它？怎么使用它的？有哪些库使用它？

更新时间： 2019-03-25

我是导航条：

# Webpack和Rollup的区别

# Webpack

Webpack是在2012年发布的，最初的目的是：构建复杂的单页应用程序（SPA）。

它最大的两个特性：

  • 代码分离
    • 把代码分离到不同bundle中，然后可以按需加载或并行加载这些文件。
  • 静态资源
    • 将所有静态资源导入到应用程序中，进行处理。

详见《Webpack》一文

打包原理：将每个模块封装成一个函数，并将他们放在一个包中。通过浏览器的require实现导入，逐一执行。

优点：能处理很多事情（包括静态资源、HTML、CSS）。

# Rollup

Rollup可以让开发者，将项目 按功能 拆分成一个个子目录。通过模块化的方式，让这些模块相互引用，通过Rollup打包成一个单独JS（即bundle）。

打包原理：把所有代码放在同一个地方，然后一次性执行，从而生成更简洁、更简单的代码，启动更快。

优点：

  • 只处理JS，打包速度快
  • 自动Tree-shaking（清除项目中没使用到的代码）
  • 配置简单

缺点：能处理大多数CommonJS文件（通过插件），但有些语法根本不能转义为ES6

# 两者的选择原则：

Webpack一般适用于大型应用

  • 支持：代码拆分
  • 支持：处理很多静态资源
  • 支持：引入很多CommonJS模块的依赖

Rollup一般适用于JavaScript库

  • 基于ES6模块
  • 希望他人直接能使用

# 开始使用Rollup

# 安装

npm install -save-dev rollup

# 编写配置文件rollup.config.js

// rollup.config.js
export default {
   input: 'src/main.js',
   output: {
      file: 'dist/js/main.min.js',
      format: 'umd',
      name: 'bundle-name'
   }
}
1
2
3
4
5
6
7
8
9

参数说明：

  • input：要打包的文件
  • output
    • file：输出的文件
    • format：输出的文件类型（amd | cjs | es | life | umd）
      • amd：异步模块定义（用于像RequireJS这样的模块加载器）
      • cjs：CommonJS，（适用于Node和Browserify/Webpack）
      • es：将软件包保存为ES模块文件
      • life：一个自动执行的功能，适合作为<script>标签
      • umd：通用模块定义，以amd、cjs和life为一体
    • name：生成包名称

# 启动rollup

一般通过package.json进行打包命令，其中的 -c 表示直接按照配置文件（rollup.config.js）开始打包。

"scripts": {
   "build": "rollup -c"
}
1
2
3

# 常用的Rollup插件

# 兼容CommonJS

原因：Rollup不能识别CommonJS模块，并且在npm中的大多数包都是以CommonJS规范进行开发。需要兼容CommonJS，将CommonJS模块转换成ES6模块。

解决方法：

1、rollup-plugin-commonjs、rollup-plugin-node-resolve

（会和rollup-plugin-node-resolve搭配使用，后者是用来解析依赖的模块路径）

npm install --save-dev rollup-plugin-commonjs rollup-plugin-node-resolve
1

2、更新rollup.config.js

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'

export default {
   input: 'src/main.js',
   output: {
      file: 'dist/js/main.min.js',
      format: 'umd',
      name: 'bundle-name'
   },
   plugins: [
      resolve({
         jsnext: true, // 表示将原来的node模块转化成ES6模块
         main: true, // 决定要将第三方模块内的哪些代码打包到最终文件中
         browser: true // 同上
      }),
      commonjs()
   ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 使用Babel

原因：Rollup不会对ES6的语法（除了ES6模块）进行编译。如果需要使用ES6的语法进行开发，还需要使用babel来把ES6的代码编译成ES5。

解决方法：

1、rollup-plugin-babel

npm install --save-dev rollup-plugin-babel@latest
1

2、配置.babelrc

{
   "presets": [
      [
         "@babel/preset-env",
         {
            "modules": false
         }
     ]
   ],
   "compact": false
}
1
2
3
4
5
6
7
8
9
10
11

上面的modules为true的话，Babel会在Rollup处理之前，将我们模块先转成CommonJS，导致Rollup处理失败

3、更新rollup.config.js

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'

export default {
   input: 'src/main.js',
   output: {
      file: 'dist/js/main.min.js',
      format: 'umd',
      name: 'bundle-name'
   },
   plugins: [
      resolve({
         jsnext: true, // 表示将原来的node模块转化成ES6模块
         main: true, // 决定要将第三方模块内的哪些代码打包到最终文件中
         browser: true // 同上
      }),
      commonjs(),
      babel({
         exclude: 'node_modules/**'
      })
   ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 使用ESLint

解决方法：

1、rollup-plugin-eslint

npm install --save-dev rollup-plugin-eslint
1

2、配置.eslintrc(也可以通过./node_modules/.bin/eslint --init生成大多数配置)

3、更新rollup.config.js

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import { eslint } from 'rollup-plugin-eslint'

export default {
   input: 'src/main.js',
   output: {
      file: 'dist/js/main.min.js',
      format: 'umd',
      name: 'bundle-name'
   },
   plugins: [
      resolve({
         jsnext: true, // 表示将原来的node模块转化成ES6模块
         main: true, // 决定要将第三方模块内的哪些代码打包到最终文件中
         browser: true // 同上
      }),
      commonjs(),
      babel({
         exclude: 'node_modules/**'
      }),
      eslint({
         include: ['src/**'],
         exclude: ['node_modules/**']
      }),
   ]
}
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

# 用replace替换环境变量

原因：在bundle里，出现的ENV变量，如何做到统一根据实际值来替换？

解决方法：

1、rollup-plugin-replace

npm install --save-dev rollup-plugin-replace
1

2、更新rollup.config.js

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import { eslint } from 'rollup-plugin-eslint'
import replace from "rollup-plugin-replace"

export default {
   input: 'src/main.js',
   output: {
      file: 'dist/js/main.min.js',
      format: 'umd',
      name: 'bundle-name'
   },
   plugins: [
      resolve({
         jsnext: true, // 表示将原来的node模块转化成ES6模块
         main: true, // 决定要将第三方模块内的哪些代码打包到最终文件中
         browser: true // 同上
      }),
      commonjs(),
      babel({
         exclude: 'node_modules/**'
      }),
      eslint({
         include: ['src/**'],
         exclude: ['node_modules/**']
      }),
      replace({
            exclude: 'node_modules/**',
            ENV: JSON.stringify(process.env.NODE_ENV)
            // 找到每一个 ENV ，并用 process.env.NODE_ENV 去替换
            // JSON.stringify 用来确保值是双引号的
      }),
   ]
}
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

# 用uglify压缩

原因：减少bundle体积（通过移除注释、缩短变量名等）

解决方法：

1、rollup-plugin-uglify

npm install --save-dev rollup-plugin-uglify
1

2、更新rollup.config.js

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import { eslint } from 'rollup-plugin-eslint'
import replace from "rollup-plugin-replace"
import uglify from "rollup-plugin-uglify"
import { minify } from 'uglify-es';

export default {
   input: 'src/main.js',
   output: {
      file: 'dist/js/main.min.js',
      format: 'umd',
      name: 'bundle-name'
   },
   plugins: [
      resolve({
         jsnext: true, // 表示将原来的node模块转化成ES6模块
         main: true, // 决定要将第三方模块内的哪些代码打包到最终文件中
         browser: true // 同上
      }),
      commonjs(),
      babel({
         exclude: 'node_modules/**'
      }),
      eslint({
         include: ['src/**'],
         exclude: ['node_modules/**']
      }),
      replace({
            exclude: 'node_modules/**',
            ENV: JSON.stringify(process.env.NODE_ENV)
            // 找到每一个 ENV ，并用 process.env.NODE_ENV 去替换
            // JSON.stringify 用来确保值是双引号的
      }),
      uglify(
         {
            compress: {
               drop_console: true,
            },
            mangle: {
               reserved: ['Event'],
            }
         },
         minify,
      )
   ]
}
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
41
42
43
44
45
46
47
48
49

# 有哪些代码库使用了Rollup

# Vue的底层源码

Vue的底层源码是使用Rollup打包的：

alt

alt

上面我写错了，promise不会返回一个bundle文件，而是一个bundle对象。后续可以通过bundle.generate()、bundle.write()来生成最终的bundle文件。

# 我自己的小项目

alt

# 参考链接

rollup.js官网 (opens new window)

《使用rollup打包JS的方法步骤》 (opens new window)

《使用Rollup打包JavaScript》 (opens new window)

更新时间: 11/21/2021, 2:45:24 AM

←