快速入门 rollup.js

快速入门 rollup.js

Q：为啥要学习 rollup.js

A：因为大家都在卷（rollup）

开个玩笑，今天学习的是 JavaScript 模块打包器 – rollup.js，这个时候有人会问，为啥不用 webpack 打包呢？它俩有啥不一样的呢？

打包界流传一句话， Use webpack for apps, and Rollup for libraries

像打包成 sdk 或 liarary, rollup 会比 webpack 更小更快，具体原因，可以参考这个文章JS SDK 构建实现 Webpack VS Rollup - 掘金 (juejin.cn)

使用 rollup.js 创建第一个 bundle

命令行形式

使用 rollup 最简单的方式，全局安装

1
npm i rollup -g

安装完毕，就阔以使用 rollup 命令

1
rollup //和 rollup -h 或 rollup --help 是一样

我们浅写一个模块应用

1
2
3
4
5
6
7
// src/index.js
import module_a from './module_a'
export function clog() {
  console.log(module_a)
}
// src/module_a.js
export default module_a = '俺是模块A'

使用 rollup 命令打包

1
rollup src/index.js -f cjs

其中 -f 选项（--output.format 的缩写），所导出的 commojs 类型。还可以指定 esm、umd、iife 等

1
2
3
4
5
6
7
8
9
10
11
12
// 打包之后的 bundle.js 文件
'use strict'

Object.defineProperty(exports, '__esModule', { value: true })

var module_a$1 = (module_a = '俺是模块A')

function clog() {
  console.log(module_a$1)
}

exports.clog = clog

恭喜你通关命令打包 bundle 的关卡 😀

使用配置文件

上面那种方式，放在项目中，打包会略显的繁琐，所以我们可以通过创建 rollup.config.js 文件写入打包相关配置

我们编写一个简易的 rollup.config.js

1
2
3
4
5
6
7
8
9
10
11
12
// rollup.config.js
export default {
  // 入口
  input: 'src/index.js',
  // 出口
  output: {
    // 写入的文件路径
    file: 'dist/bundle.js',
    // 导出的格式，cjs / esm / umd
    format: 'cjs',
  },
}

运行 rollup 命令，其中 -c 表明使用配置文件

1
2
3
4
# 默认指向 rollup.config.js
rollup -c
# 编写不同环境下，配置文件,替换默认
rollup -c rollup.config.dev.js

使用插件

可以使用各种各样的插件，来个性化打包你的 JavaScript 程序

比如，我们使用压缩插件，来将代码都压缩成一行

安装 rollup-plugin-terser 依赖

1
npm install -D rollup-plugin-terser

修改 rollup.config.js 文件

1
2
3
4
5
6
7
8
9
// rollup.config.js
// rollup-plugin-terser --- plugin
import { terser } from "rollup-plugin-terser"
export default {
   ...
    plugins: [
      terser()
    ]
  };

运行 rollup -c 打包，打包出的 bundle.js 就会压缩到一行，压缩了文件的体积

1
2
3
4
5
6
'use strict'
Object.defineProperty(exports, '__esModule', { value: !0 })
var e = (module_a = '俺是模块A')
exports.clog = function () {
  console.log(e)
}

ok，你已经完成 rollup 入门教学 ⭐

还有许多各种 plugin 玩法，可以参考以下文章

rollup/awesome: ⚡️ Delightful Rollup Plugins, Packages, and Resources (github.com)

【水文】学习 Rollup.js 打包之插件详解 - 掘金 (juejin.cn)