为了账号安全,请及时绑定邮箱和手机立即绑定

10分钟快速进阶rollup.js

前言

上一篇教程中,为大家介绍了rollup.js的入门技巧,没有读过的小伙伴可以点击这里,本次我们将继续对rollup.js的进阶技巧进行探讨,想直接看结论的小伙伴可以直接看最后一章。

rollup.js插件

rollup.js的插件采用可拔插设计,它帮助我们增强了rollup.js的基础功能,下面我将重点讲解四个rollup.js最常用的插件。

resolve插件

为什么需要resolve插件?

上一篇教程中,我们打包的对象是本地的js代码和库,但实际开发中,不太可能所有的库都位于本地,我们会通过npm下载远程的库。这里我专门准备了一些测试库,供大家学习rollup.js使用,首先下载测试库:

npm i -S sam-test-data

sam-test-data库默认提供了一个UMD模块,对外暴露了两个变量a和b以及一个random函数,a是0到9之间的一个随机整数,b是0到99之间的一个随机整数,random函数的参数是一个整数,如传入100,则返回一个0到99之间的随机整数,在本地创建测试插件代码的文件夹:

mkdir src/plugin

创建测试代码:

touch src/plugin/main.js

写入以下代码:

import * as test from 'sam-test-data'
console.log(test)
export default test.random

先不使用rollup.js打包,直接通过babel-node尝试运行代码:

babel-node
> require('./src/plugin/main.js')
{ a: 1, b: 17, random: [Function: random] }
{ default: [Function: random] }
> require('./src/plugin/main.js').default(100)
41

可以看到代码可以正常运行,下面我们尝试通过rollup.js打包代码,添加一个新的配置文件:

touch rollup.plugin.config.js

写入以下内容:

import { comment } from './comment-helper-es'

export default {
  input: './src/plugin/main.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs',
    banner: comment('welcome to imooc.com', 'this is a rollup test project'),
    footer: comment('powered by sam', 'copyright 2018')
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es',
    banner: comment('welcome to imooc.com', 'this is a rollup test project'),
    footer: comment('powered by sam', 'copyright 2018')
  }]
}

这里我提供了一个comment-helper-es模块,暴露了一个comment方法,自动读取我们的参数,并帮助生成注释,同时会在注释上方和下方添加等长的分隔符,感兴趣的小伙伴可以直接拿去用:

export function comment() {
  if (arguments.length === 0) {
    return // 如果参数为0直接返回
  }
  let maxlength = 0
  for (let i = 0; i < arguments.length; i++) {
    const length = arguments[i].toString().length
    maxlength = length > maxlength ? length : maxlength // 获取最长的参数
  }
  maxlength = maxlength === 0 ? maxlength : maxlength + 1 // 在最长参数长度上再加1,为了美观
  let seperator = ''
  for (let i = 0; i < maxlength; i++) {
    seperator += '=' // 根据参数长度生成分隔符
  }
  const c = []
  c.push('/**\n') // 添加注释头
  c.push(' * ' + seperator + '\n') // 添加注释分隔符
  for (let i = 0; i < arguments.length; i++) {
    c.push(' * ' + arguments[i] + '\n') // 加入参数内容
  }
  c.push(' * ' + seperator + '\n') // 添加注释分隔符
  c.push(' **/') // 添加注释尾
  return c.join('') // 合并参数为字符串
}

通过rollup.js打包:

$ rollup -c rollup.plugin.config.js 

./src/plugin/main.js  ./dist/index-plugin-cjs.js, ./dist/index-plugin-es.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency
sam-test-data (imported by src/plugin/main.js)
created ./dist/index-plugin-cjs.js, ./dist/index-plugin-es.js in 13ms

可以看到代码生成成功了,但是sam-test-data被当做一个外部的模块被引用,我们查看dist/index-plugin-es.js源码:

/**
 * ==============================
 * welcome to imooc.com
 * this is a rollup test project
 * ==============================
 **/
import * as test from 'sam-test-data';
import { random } from 'sam-test-data';

console.log(test);

var main = random;

export default main;
/**
 * ===============
 * powered by sam
 * copyright 2018
 * ===============
 **/

和我们原本写的代码几乎没有区别,只是通过es6的解构赋值将random函数单独从sam-test-data获取,然后赋给变量main并暴露出来。大家试想,如果我们正在编写一个Javascript类库,用户在引用我们库的时候,还需要手动去下载这个库所有的依赖,这是多么糟糕的体验。为了解决这个问题,将我们编写的源码与依赖的第三方库进行合并,rollup.js为我们提供了resolve插件。

resolve插件的使用方法

首先,安装resolve插件:

npm i -D rollup-plugin-node-resolve

修改配置文件rollup.plugin.config.js:

import resolve from 'rollup-plugin-node-resolve'

export default {
  input: './src/plugin/main.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve()
  ]
}

重新打包:

$ rollup -c rollup.plugin.config.js 

./src/plugin/main.js  ./dist/index-plugin-cjs.js, ./dist/index-plugin-es.js...
created ./dist/index-plugin-cjs.js, ./dist/index-plugin-es.js in 28ms

可以看到警告消除了,我们重新查看dist/index-plugin-es.js源码:

const a = Math.floor(Math.random() * 10);
const b = Math.floor(Math.random() * 100);
function random(base) {
  if (base && base % 1 === 0) {
    return Math.floor(Math.random() * base) 
  } else {
    return 0
  }
}

var test = /*#__PURE__*/Object.freeze({
  a: a,
  b: b,
  random: random
});

console.log(test);

var main = random;

export default main;

很明显sam-test-data库的源码已经与我们的源码集成了。

tree-shaking

下面我们修改src/plugin/main.js的源码:

import * as test from 'sam-test-data'
export default test.random

源码中去掉了console.log(test),重新打包:

rollup -c rollup.plugin.config.js

再次查看dist/index-plugin-es.js源码:

function random(base) {
  if (base && base % 1 === 0) {
    return Math.floor(Math.random() * base) 
  } else {
    return 0
  }
}

var main = random;

export default main;

我们发现关于变量a和b的定义没有了,因为源码中并没有用到这两个变量。这就是ES模块著名的tree-shaking机制,它动态地清除没有被使用过的代码,使得代码更加精简,从而可以使得我们的类库获得更快的加载速度(容量小了,自然加载速度变快)。

external属性

有些场景下,虽然我们使用了resolve插件,但我们仍然某些库保持外部引用状态,这时我们就需要使用external属性,告诉rollup.js哪些是外部的类库,修改rollup.js的配置文件:

import resolve from 'rollup-plugin-node-resolve'

export default {
  input: './src/plugin/main.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve()
  ],
  external: ['sam-test-data']
}

重新打包:

rollup -c rollup.plugin.config.js

查看dist/index-plugin-es.js源码:

import { random } from 'sam-test-data';

var main = random;

export default main;

可以看到虽然使用了resolve插件,sam-test-data库仍被当做外部库处理

commonjs插件

为什么需要commonjs插件?

rollup.js默认不支持CommonJS模块,这里我编写了一个CommonJS模块用于测试,该模块的内容与sam-test-data完全一致,差异仅仅是前者采用了CommonJS规范,先安装这个模块:

npm i -S sam-test-data-cjs

新建一个代码文件:

touch src/plugin/main-cjs.js

写入如下代码:

import test from 'sam-test-data-cjs'
console.log(test)
export default test.random

这段代码非常简单,接下来修改rollup.js的配置文件:

import resolve from 'rollup-plugin-node-resolve'

export default {
  input: './src/plugin/main-cjs.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve()
  ]
}

执行打包:

rollup -c rollup.plugin.config.js 

./src/plugin/main-cjs.js  ./dist/index-plugin-cjs.js, ./dist/index-plugin-es.js...
[!] Error: 'default' is not exported by node_modules/_sam-test-data-cjs@0.0.1@sam-test-data-cjs/index.js
https://rollupjs.org/guide/en#error-name-is-not-exported-by-module-
src/plugin/main-cjs.js (1:7)
1: import test from 'sam-test-data-cjs'
          ^

可以看到默认情况下,rollup.js是无法识别CommonJS模块的,此时我们需要借助commonjs插件来解决这个问题。

commonjs插件的使用方法

首先安装commonjs插件:

npm i -D rollup-plugin-commonjs

修改rollup.js的配置文件:

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: './src/plugin/main-cjs.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve(),
    commonjs()
  ]
}

重新执行打包:

rollup -c rollup.plugin.config.js

打包成功后,我们查看dist/index-plugin-es.js源码:

const a = Math.floor(Math.random() * 10);
const b = Math.floor(Math.random() * 100);
function random(base) {
  if (base && base % 1 === 0) {
    return Math.floor(Math.random() * base) 
  } else {
    return 0
  }
}
var _samTestDataCjs_0_0_1_samTestDataCjs = {
  a, b, random
};

console.log(_samTestDataCjs_0_0_1_samTestDataCjs);
var mainCjs = _samTestDataCjs_0_0_1_samTestDataCjs.random;

export default mainCjs;

可以看到CommonJS模块被集成到代码中了,通过babel-node尝试执行打包后的代码:

babel-node 
> require('./dist/index-plugin-es')
{ a: 7, b: 45, random: [Function: random] }
{ default: [Function: random] }
> require('./dist/index-plugin-es').default(1000)
838

代码执行成功,说明我们的代码打包成功了。

CommonJS与tree-shaking

我们修改src/plugin/main-cjs.js的源码,验证一下CommonJS模块是否支持tree-shaking特性:

import test from 'sam-test-data-cjs'
export default test.random

与resolve中tree-shaking的案例一样,我们去掉console.log(test),重新执行打包后,再查看打包源码:

const a = Math.floor(Math.random() * 10);
const b = Math.floor(Math.random() * 100);
function random(base) {
  if (base && base % 1 === 0) {
    return Math.floor(Math.random() * base) 
  } else {
    return 0
  }
}
var _samTestDataCjs_0_0_1_samTestDataCjs = {
  a, b, random
};

var mainCjs = _samTestDataCjs_0_0_1_samTestDataCjs.random;

export default mainCjs;

可以看到源码中仍然定义了变量a和b,说明CommonJS模块不能支持tree-shaking特性,所以建议大家使用rollup.js打包时,尽量使用ES模块,以获得更精简的代码。

UMD与tree-shaking

UMD模块与CommonJS类似,也是不能够支持tree-shaking特性的,这里我提供了一个UMD测试模块sam-test-data-umd,感兴趣的小伙伴可以自己验证一下。有的小伙伴可能会问,sam-test-data也是一个UMD模块,为什么它能够支持tree-shaking?我们打开sam-test-data的package.json一探究竟:

{
  "name": "sam-test-data",
  "version": "0.0.4",
  "description": "provide test data",
  "main": "dist/sam-test-data.js",
  "module": "dist/sam-test-data-es.js"
}

可以看到main属性指向dist/sam-test-data.js,这是一个UMD模块,但是module属性指向dist/sam-test-data-es.js,这是一个ES模块,rollup.js默认情况下会优先寻找并加载module属性指向的模块。所以sam-test-data的ES模块被优先加载,从而能够支持tree-shaking特性。我们看一下rollup.js官方的说明:

在 package.json 文件的 main 属性中指向当前编译的版本。如果你的 package.json 也具有 module 字段,像 Rollup 和 webpack 2 这样的 ES6 感知工具(ES6-aware tools)将会直接导入 ES6 模块版本。

babel插件

为什么需要babel插件?

在src/plugin目录下创建一个新文件main-es.js:

touch src/plugin/main-es.js

写入如下代码:

import { a, b, random } from 'sam-test-data-es'

console.log(a, b, random)
export default (base) => {
  return random(base)
}

代码中采用了ES6的新特性:箭头函数,修改配置文件:

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: './src/plugin/main-es.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve(),
    commonjs()
  ]
}

重新执行打包:

rollup -c rollup.plugin.config.js 

查看dist/index-plugin-es.js源码:

var mainEs = (base) => {
  return random(base)
};

export default mainEs;

可以看到箭头函数被保留下来,这样的代码在不支持ES6的环境下将无法运行。我们期望在rollup.js打包的过程中就能使用babel完成代码转换,因此我们需要babel插件。

babel插件的使用方法

首先安装babel插件:

npm i -D rollup-plugin-babel

修改配置文件,增加babel插件的引用:

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'

export default {
  input: './src/plugin/main-es.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve(),
    commonjs(),
    babel()
  ]
}

重新打包:

rollup -c rollup.plugin.config.js

再次查看dist/index-plugin-es.js源码:

var mainEs = (function (base) {
  return random(base);
});

export default mainEs;

可以看到箭头函数被转换为了function,babel插件正常工作。

json插件

为什么需要json插件

在src/plugin下创建一个新文件main-json.js:

touch src/plugin/main-json.js

把package.json当做一个模块来引入,并打印package.json中的name和main属性:

import json from '../../package.json'

console.log(json.name, json.main)

使用bable-node尝试执行main-json.js:

$ babel-node src/plugin/main-json.js 
rollup-test index.js

可以看到name和main字段都被打印出来了,babel-node可以正确识别json模块。下面修改rollup.js的配置文件:

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'

export default {
  input: './src/plugin/main-json.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve(),
    commonjs(),
    babel()
  ]
}

重新打包:

$ rollup -c rollup.plugin.config.js 

./src/plugin/main-json.js → ./dist/index-plugin-cjs.js, ./dist/index-plugin-es.js...
[!] Error: Unexpected token (Note that you need rollup-plugin-json to import JSON files)

可以看到默认情况下rollup.js不支持导入json模块,所以我们需要使用json插件来支持。

json插件的使用方法

下载json插件:

npm i -D rollup-plugin-json

修改配置文件:

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import json from 'rollup-plugin-json'

export default {
  input: './src/plugin/main-json.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve(),
    commonjs(),
    babel(),
    json()
  ]
}

重新打包:

rollup -c rollup.plugin.config.js

查看dist/index-plugin-cjs.js源码,可以看到json文件被解析为一个对象进行处理:

var name = "rollup-test";
var version = "1.0.0";
var description = "";
var main = "index.js";
var scripts = {
	test: "echo \"Error: no test specified\" && exit 1"
};
var author = "";
var license = "ISC";
var devDependencies = {
	"@babel/core": "^7.1.6",
	"@babel/plugin-external-helpers": "^7.0.0",
	"@babel/preset-env": "^7.1.6",
	rollup: "^0.67.3",
	"rollup-plugin-babel": "^4.0.3",
	"rollup-plugin-commonjs": "^9.2.0",
	"rollup-plugin-json": "^3.1.0",
	"rollup-plugin-node-resolve": "^3.4.0"
};
var dependencies = {
	epubjs: "^0.3.80",
	loadsh: "^0.0.3",
	"sam-test-data": "^0.0.4",
	"sam-test-data-cjs": "^0.0.1",
	"sam-test-data-es": "^0.0.1",
	"sam-test-data-umd": "^0.0.1"
};
var json = {
	name: name,
	version: version,
	description: description,
	main: main,
	scripts: scripts,
	author: author,
	license: license,
	devDependencies: devDependencies,
	dependencies: dependencies
};

console.log(json.name, json.main);

uglify插件

uglify插件可以帮助我们进一步压缩代码的体积,首先安装插件:

npm i -D rollup-plugin-uglify

修改rollup.js的配置文件:

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import json from 'rollup-plugin-json'
import { uglify } from 'rollup-plugin-uglify'

export default {
  input: './src/plugin/main.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }],
  plugins: [
    resolve(),
    commonjs(),
    babel(),
    json(),
    uglify()
  ]
}

这里要注意的是uglify插件不支持ES模块和ES6语法,所以只能打包成非ES格式的代码,如果碰到ES6语法则会出现报错:

$ rollup -c rollup.plugin.config.js 

./src/plugin/main.js  ./dist/index-plugin-cjs.js, ./dist/index-plugin-es.js...
  19 | var main = random;
  20 | 
> 21 | export default main;
     |       ^ Unexpected token: keyword (default)
[!] (uglify plugin) Error: Unexpected token: keyword (default)

所以这里我们采用sam-test-data进行测试,因为这个模块采用了babel进行编译,其他几个模块uglify都不支持(因为其他几个模块使用了const,const也是ES6特性,uglify不能支持),所以大家在自己编写类库的时候要注意使用babel插件进行编译。配置完成后重新打包:

$ rollup -c rollup.plugin.config.js 

./src/plugin/main.js  ./dist/index-plugin-cjs.js...
created ./dist/index-plugin-cjs.js in 679ms

查看dist/index-plugin-cjs.js源码:

"use strict";var a=Math.floor(10*Math.random()),b=Math.floor(100*Math.random());function random(a){return a&&a%1==0?Math.floor(Math.random()*a):0}var test=Object.freeze({a:a,b:b,random:random});console.log(test);var main=random;module.exports=main;

可以看到代码被最小化了,体积也减小了不少。

rollup.js watch

命令行模式

rollup.js的watch模式支持监听代码变化,一旦修改代码后将自动执行打包,非常方便,使用方法是在打包指令后添加--watch即可:

$ rollup -c rollup.plugin.config.js  --watch

rollup v0.67.1
bundles ./src/plugin/main-json.js  dist/index-plugin-cjs.js, dist/index-plugin-es.js...
created dist/index-plugin-cjs.js, dist/index-plugin-es.js in 24ms

[2018-11-20 22:26:24] waiting for changes...

API模式

rollup.js支持我们通过API来启动watch模式,在项目根目录下创建以下文件:

  • rollup-watch-input-options.js:输入配置
  • rollup-watch-output-options.js:输出配置
  • rollup-watch-options.js:监听配置
  • rollup-watch.js:调用rollup.js的API启动watch模式

为了让node能够执行我们的程序,所以采用CommonJS规范,rollup-watch-input-options.js代码如下:

const json = require('rollup-plugin-json')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const uglify = require('rollup-plugin-uglify').uglify

module.exports = {
  input: './src/plugin/main.js',
  plugins: [
    json(),
    resolve({
      customResolveOptions: {
        moduleDirectory: 'node_modules' // 仅处理node_modules内的库
      }
    }),
    babel({
      exclude: 'node_modules/**' // 排除node_modules
    }),
    commonjs(),
    uglify() // 代码压缩
  ]
}

rollup-watch-output-options.js代码如下:

module.exports = [{
  file: './dist/index-cjs.js',
  format: 'cjs',
  name: 'sam-cjs'
}]

rollup-watch-options.js代码如下:

module.exports = {
  include: 'src/**', // 监听的文件夹
  exclude: 'node_modules/**' // 排除监听的文件夹
}

rollup-watch.js代码如下:

const rollup = require('rollup')
const inputOptions = require('./rollup-watch-input-options')
const outputOptions = require('./rollup-watch-output-options')
const watchOptions = require('./rollup-watch-options')

const options = {
  ...inputOptions,
  output: outputOptions,
  watchOptions
} // 生成rollup的options

const watcher = rollup.watch(options) // 调用rollup的api启动监听

watcher.on('event', event => {
  console.log('重新打包中...', event.code)
}) // 处理监听事件

// watcher.close() // 手动关闭监听

通过node直接启动监听:

$ node rollup-watch.js 
重新打包中... START
重新打包中... BUNDLE_START
重新打包中... BUNDLE_END
重新打包中... END

之后我们再修改src/plugin/main.js的源码,rollup.js就会自动对代码进行打包。

总结

本教程详细讲解了rollup.js的插件、tree-shaking机制和watch模式,涉及知识点整理如下:

  • rollup.js插件
    • resolve插件:集成外部模块
    • commonjs插件:支持CommonJS模块
    • babel插件:编译ES6语法,使低版本浏览器可以识别
    • json插件:支持json模块
    • uglify:代码最小化打包(不支持ES模块)
  • tree-shaking:只有ES模块才支持,大幅精简代码量
  • watch模式:支持命令行和API模式,实时监听代码变更
    ·············································································
    欢迎关注课程:
    Vue2.5 实战微信读书 媲美原生App的企业级web书城
点击查看更多内容
12人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1万
获赞与收藏
438

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消