最近在写一个插件,听说 Rollup 更适合用于 Library 的构建打包,可以让你的bundle最小化,于是就打算尝试下 Rollup.js。

# 介绍

先来复习几个概念

  • 包管理工具(package manager): npm, yarn, bower 等。
  • 模块加载器(module loader): requirejs, seajs 等。
  • 打包工具(bundler): r.js, browserify, webpack, rollup 等。
  • 自动化构建工具(build system): grunt, gulp 等。

简单而言,Rollup 其实和 Webpack 一样,都是对模块进行打包的工具,但 Rollup 更轻量。虽然功能少了很多,但这也意味着配置要更简单。(不折腾的工具就是好工具)

Rollup 可以打出更快更小的包,通过过滤树(Tree Shaking)技术,Rollup 可以静态分析你引入的模块,去掉没有真正用到的部分,减少项目的体积。

目前有许多开源库使用 Rollup 进行打包:Vue、Angular、React、D3、Moment等……

补充:Webpack从2.0起已支持 Tree Shaking

# 使用

# 安装

npm i -g rollup

rollup既可以通过一个配置文件来调用,也可以它自己的Javascript API使用, 可以输入 rollup 来查看命令指引

# 配置

Rollup 可以将按照 ES6 规范编写的代码构建为如下格式(通过 format 属性配置):

  • IIFE: 自执行函数, 可通过 <script> 标签加载
  • AMD: 浏览器端的模块规范, 可通过 RequireJS 可加载
  • CommonJS: Node 默认的模块规范, 可通过 Webpack 加载
  • UMD: 兼容 IIFE, AMD, CJS 三种模块规范
  • ES: ES2015 Module 规范(默认值), 可用 Webpack, Rollup 加载

你可以创建一个配置文件 rollup.config.js

export default {
  input: 'src/main.js',
  output: {
    file: 'build/js/bundle.js',
    format: 'umd'
  }
};

# 打包

  • 使用Rollup提供的API进行打包:
# 浏览器环境:编译成自执行函数,可直接在html中引入
$ rollup main.js --format iife --output bundle.js

# Node.js环境:编译成 CommonJS 模块
$ rollup main.js --format cjs --output bundle.js

# 浏览器和 Node.js兼容环境:
$ rollup main.js --format umd --name "myBundle" --outpub bundle.js
  • 你也可以在package.json中创建一条打包命令:
{
  ...
  "scripts":{
    "build": "rollup -c" // 等价于 rollup --config
  }
}

这个前提是你已经配置了 rollup.config.js

# 开发

使用npm run dev 实时监控编译

通过安装rollup-watch 可以实现实时编译。

npm install --save-dev rollup-watch

package.json

{
  ...,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w"
  },
  ...
}

# 基础插件

  • rollup-plugin-json

    使rollup导入json里的数据

  • rollup-plugin-node-resolve

    帮助 Rollup 查找外部模块,然后安装

  • rollup-plugin-commonjs

    解决 ES6模块的查找导入,由于npm中的大多数包都是以CommonJS模块的形式出现的,所以需要使用这个插件将CommonJS模块转换为 ES2015 供 Rollup 处理

  • rollup-plugin-babel

    编译ES6语法

    依赖以下插件: @babel/core @babel/plugin-external-helpers @babel/preset-env

  • rollup-plugin-uglify

    压缩bundle文件

  • rollup-plugin-eslint

    代码检查

    需要创建 .eslintrc 文件配置 eslint 规则

  • rollup-plugin-replace

    变量替换,可以将动态设置的变量提取出来在配置文件中设置

  • rollup-plugin-postcss

    需要额外安装 node-sass

  • rollup-watch 监控文件变化

    然后在 package.json 中设置 scripts属性即可

    "build": "rollup -c", "dev": "rollup -c -w"

  • rollup-plugin-serve

    类似 webpack-dev-server, 提供静态服务器能力

此处有一些关于插件使用的介绍

List of plugins

Rollup插件详解

# 本地https环境

详细教程可参考这里: 如何在5分钟内让HTTPS在您的本地开发环境中工作

快速运行脚本可参考: local-cert-generator

生成证书之后,安装 rollup-plugin-serve

然后写入如下配置:

serve({
  ...,
  https: {
    key: fs.readFileSync("/public/ssl/server.key"),
    cert: fs.readFileSync("/public/ssl/server.crt"),
    ca: fs.readFileSync("/public/ssl/ca.pem")
  }
})

本地亲测没问题。

# 脚手架

我开发了一个脚手架,用于快速开发基于Rollup的应用:https://github.com/hellodigua/rollup-starter

# Demo

这个网页内置相机是基于Rollup.js和Vue进行开发的:WebRTC

更多资料可参考以下文档:

rollup.js 中文文档