共计 7125 个字符,预计需要花费 18 分钟才能阅读完成。
前言
为了学习 rollup 打包原理,我克隆了最新版(v2.26.5)的源码。而后发现打包器和我想像的不太一样,代码切实太多了,光看 d.ts 文件就看得头疼。为了看看源码到底有多少行,我写了个脚本,后果发现有 19650 行,解体 …
这就能打消我学习 rollup 的信心吗?不可能,退而求其次,我下载了 rollup 初版源码,才 1000 行左右。
我的目标是学习 rollup 怎么打包的,怎么做 tree-shaking 的。而初版源码曾经实现了这两个性能(半成品),所以看初版源码曾经足够了。
好了,上面开始注释。
注释
rollup 应用了 acorn
和 magic-string
两个库。为了更好的浏览 rollup 源码,必须对它们有所理解。
上面我将简略的介绍一下这两个库的作用。
acorn
acorn
是一个 JavaScript 语法解析器,它将 JavaScript 字符串解析成语法形象树 AST。
例如以下代码:
export default function add(a, b) {return a + b}
将被解析为:
{
"type": "Program",
"start": 0,
"end": 50,
"body": [
{
"type": "ExportDefaultDeclaration",
"start": 0,
"end": 50,
"declaration": {
"type": "FunctionDeclaration",
"start": 15,
"end": 50,
"id": {
"type": "Identifier",
"start": 24,
"end": 27,
"name": "add"
},
"expression": false,
"generator": false,
"params": [
{
"type": "Identifier",
"start": 28,
"end": 29,
"name": "a"
},
{
"type": "Identifier",
"start": 31,
"end": 32,
"name": "b"
}
],
"body": {
"type": "BlockStatement",
"start": 34,
"end": 50,
"body": [
{
"type": "ReturnStatement",
"start": 36,
"end": 48,
"argument": {
"type": "BinaryExpression",
"start": 43,
"end": 48,
"left": {
"type": "Identifier",
"start": 43,
"end": 44,
"name": "a"
},
"operator": "+",
"right": {
"type": "Identifier",
"start": 47,
"end": 48,
"name": "b"
}
}
}
]
}
}
}
],
"sourceType": "module"
}
能够看到这个 AST 的类型为 program
,表明这是一个程序。body
则蕴含了这个程序上面所有语句对应的 AST 子节点。
每个节点都有一个 type
类型,例如 Identifier
,阐明这个节点是一个标识符;BlockStatement
则表明节点是块语句;ReturnStatement
则是 return 语句。
如果想理解更多详情 AST 节点的信息能够看一下这篇文章《应用 Acorn 来解析 JavaScript》。
magic-string
magic-string
也是 rollup 作者写的一个对于字符串操作的库。上面是 github 上的示例:
var MagicString = require('magic-string');
var s = new MagicString('problems = 99');
s.overwrite(0, 8, 'answer');
s.toString(); // 'answer = 99'
s.overwrite(11, 13, '42'); // character indices always refer to the original string
s.toString(); // 'answer = 42'
s.prepend('var').append(';'); // most methods are chainable
s.toString(); // 'var answer = 42;'
var map = s.generateMap({
source: 'source.js',
file: 'converted.js.map',
includeContent: true
}); // generates a v3 sourcemap
require('fs').writeFile('converted.js', s.toString() );
require('fs').writeFile('converted.js.map', map.toString() );
从示例中能够看进去,这个库次要是对字符串一些罕用办法进行了封装。这里就不多做介绍了。
rollup 源码构造
│ bundle.js // Bundle 打包器,在打包过程中会生成一个 bundle 实例,用于收集其余模块的代码,最初再将收集的代码打包到一起。│ external-module.js // ExternalModule 内部模块,例如引入了 'path' 模块,就会生成一个 ExternalModule 实例。│ module.js // Module 模块,开发者本人写的代码文件,都是 module 实例。例如有 'foo.js' 文件,它就对应了一个 module 实例。│ rollup.js // rollup 函数,所有的开始,调用它进行打包。│
├─ast // ast 目录,蕴含了和 AST 相干的类和函数
│ analyse.js // 次要用于剖析 AST 节点的作用域和依赖项。│ Scope.js // 在剖析 AST 节点时为每一个节点生成对应的 Scope 实例,次要是记录每个 AST 节点对应的作用域。│ walk.js // walk 就是递归调用 AST 节点进行剖析。│
├─finalisers
│ cjs.js // 打包模式,目前只反对将代码打包成 common.js 格局
│ index.js
│
└─utils // 一些帮忙函数
map-helpers.js
object.js
promise.js
replaceIdentifiers.js
下面是初版源码的目录构造,在持续深刻前,请仔细阅读下面的正文,理解一下每个文件的作用。
rollup 如何打包的?
在 rollup 中,一个文件就是一个模块。每一个模块都会依据文件的代码生成一个 AST 语法形象树,rollup 须要对每一个 AST 节点进行剖析。
剖析 AST 节点,就是看看这个节点有没有调用函数或办法。如果有,就查看所调用的函数或办法是否在以后作用域,如果不在就往上找,直到找到模块顶级作用域为止。
如果本模块都没找到,阐明这个函数、办法依赖于其余模块,须要从其余模块引入。
例如 import foo from './foo.js'
,其中 foo()
就得从 ./foo.js
文件找。
在引入 foo()
函数的过程中,如果发现 foo()
函数依赖其余模块,就会递归读取其余模块,如此循环直到没有依赖的模块为止。
最初将所有引入的代码打包在一起。
下面例子的示例图:
接下来咱们从一个具体的示例开始,一步步剖析 rollup 是如何打包的 。
以下两个文件是代码文件。
// main.js
import {foo1, foo2} from './foo'
foo1()
function test() {const a = 1}
console.log(test())
// foo.js
export function foo1() {}
export function foo2() {}
上面是测试代码:
const rollup = require('../dist/rollup')
rollup(__dirname + '/main.js').then(res => {res.wirte('bundle.js')
})
1. rollup 读取 main.js
入口文件。
rollup()
首先生成一个 Bundle
实例,也就是打包器。而后依据入口文件门路去读取文件,最初依据文件内容生成一个 Module
实例。
fs.readFile(path, 'utf-8', (err, code) => {if (err) reject(err)
const module = new Module({
code,
path,
bundle: this, // bundle 实例
})
})
2. new Moudle() 过程
在 new 一个 Module
实例时,会调用 acorn
库的 parse()
办法将代码解析成 AST。
this.ast = parse(code, {
ecmaVersion: 6, // 要解析的 JavaScript 的 ECMA 版本,这里按 ES6 解析
sourceType: 'module', // sourceType 值为 module 和 script。module 模式,能够应用 import/export 语法
})
接下来须要对生成的 AST 进行剖析。
第一步 ,剖析导入和导出的模块,将引入的模块和导出的模块填入对应的对象。
每个 Module
实例都有一个 imports
和 exports
对象,作用是将该模块引入和导出的对象填进去,代码生成时要用到。
上述例子对应的 imports
和 exports
为:
// key 为要引入的具体对象,value 为对应的 AST 节点内容。imports = {foo1: { source: './foo', name: 'foo1', localName: 'foo1'},
foo2: {source: './foo', name: 'foo2', localName: 'foo2'}
}
// 因为没有导出的对象,所以为空
exports = {}
第二步 ,剖析每个 AST 节点间的作用域,找出每个 AST 节点定义的变量。
每遍历到一个 AST 节点,都会为它生成一个 Scope
实例。
// 作用域
class Scope {constructor(options = {}) {
this.parent = options.parent // 父作用域
this.depth = this.parent ? this.parent.depth + 1 : 0 // 作用域层级
this.names = options.params || [] // 作用域内的变量
this.isBlockScope = !!options.block // 是否块作用域
}
add(name, isBlockDeclaration) {if (!isBlockDeclaration && this.isBlockScope) {
// it's a `var` or function declaration, and this
// is a block scope, so we need to go up
this.parent.add(name, isBlockDeclaration)
} else {this.names.push(name)
}
}
contains(name) {return !!this.findDefiningScope(name)
}
findDefiningScope(name) {if (this.names.includes(name)) {return this}
if (this.parent) {return this.parent.findDefiningScope(name)
}
return null
}
}
Scope
的作用很简略,它有一个 names
属性数组,用于保留这个 AST 节点内的变量。
例如上面这段代码:
function test() {const a = 1}
打断点能够看进去,它生成的作用域对象,names
属性就会蕴含 a
。并且因为它是模块下的一个函数,所以作用域层级为 1(模块顶级作用域为 0)。
第三步 ,剖析标识符,并找出它们的依赖项。
什么是标识符?如变量名,函数名,属性名,都归为标识符。当解析到一个标识符时,rollup 会遍历它以后的作用域,看看有没这个标识符。如果没有找到,就往它的父级作用域找。如果始终找到模块顶级作用域都没找到,就阐明这个函数、办法依赖于其它模块,须要从其余模块引入。如果一个函数、办法须要被引入,就将它增加到 Module
的 _dependsOn
对象里。
例如 test()
函数中的变量 a
,能在以后作用域找到,它就不是一个依赖项。foo1()
在以后模块作用域找不到,它就是一个依赖项。
打断点也能发现 Module
的 _dependsOn
属性里就有 foo1
。
这就是 rollup 的 tree-shaking 原理。
rollup 不看你引入了什么函数,而是看你调用了什么函数。如果调用的函数不在此模块中,就从其它模块引入。
换句话说,如果你手动在模块顶部引入函数,但又没调用。rollup 是不会引入的。从咱们的示例中能够看出,一共引入了 foo1()
foo2()
两个函数,_dependsOn
里却只有 foo1()
,因为引入的 foo2()
没有调用。
_dependsOn
有什么用呢?前面生成代码时会依据 _dependsOn
里的值来引入文件。
3. 依据依赖项,读取对应的文件。
从 _dependsOn
的值能够发现,咱们须要引入 foo1()
函数。
这时第一步生成的 imports
就起作用了:
imports = {foo1: { source: './foo', name: 'foo1', localName: 'foo1'},
foo2: {source: './foo', name: 'foo2', localName: 'foo2'}
}
rollup 将 foo1
当成 key,找到它对应的文件。而后读取这个文件生成一个新的 Module
实例。因为 foo.js
文件导出了两个函数,所以这个新 Module
实例的 exports
属性是这样的:
exports = {
foo1: {
node: Node {
type: 'ExportNamedDeclaration',
start: 0,
end: 25,
declaration: [Node],
specifiers: [],
source: null
},
localName: 'foo1',
expression: Node {
type: 'FunctionDeclaration',
start: 7,
end: 25,
id: [Node],
expression: false,
generator: false,
params: [],
body: [Node]
}
},
foo2: {
node: Node {
type: 'ExportNamedDeclaration',
start: 27,
end: 52,
declaration: [Node],
specifiers: [],
source: null
},
localName: 'foo2',
expression: Node {
type: 'FunctionDeclaration',
start: 34,
end: 52,
id: [Node],
expression: false,
generator: false,
params: [],
body: [Node]
}
}
}
这时,就会用 main.js
要导入的 foo1
当成 key 去匹配 foo.js
的 exports
对象。如果匹配胜利,就把 foo1()
函数对应的 AST 节点提取进去,放到 Bundle
中。如果匹配失败,就会报错,提醒 foo.js
没有导出这个函数。
4. 生成代码。
因为曾经引入了所有的函数。这时须要调用 Bundle
的 generate()
办法生成代码。
同时,在打包过程中,还须要对引入的函数做一些额定的操作。
移除额定代码
例如从 foo.js
中引入的 foo1()
函数代码是这样的:export function foo1() {}
。rollup 会移除掉 export
,变成 function foo1() {}
。因为它们就要打包在一起了,所以就不须要 export
了。
重命名
例如两个模块中都有一个同名函数 foo()
,打包到一起时,会对其中一个函数重命名,变成 _foo()
,以防止抵触。
好了,回到注释。
还记得文章一开始提到的 magic-string
库吗?在 generate()
中,会将每个 AST 节点对应的源代码增加到 magic-string
实例中:
magicString.addSource({
content: source,
separator: newLines
})
这个操作实质上相当于拼字符串:
str += '这个操作相当于将每个 AST 的源代码当成字符串拼在一起,就像当初这样'
最初将拼在一起的代码返回。
return {code: magicString.toString() }
到这就曾经完结了,如果你想把代码生成文件,能够调用 write()
办法生成文件:
rollup(__dirname + '/main.js').then(res => {res.wirte('dist.js')
})
这个办法是写在 rollup()
函数里的。
function rollup(entry, options = {}) {const bundle = new Bundle({ entry, ...options})
return bundle.build().then(() => {
return {generate: options => bundle.generate(options),
wirte(dest, options = {}) {const { code} = bundle.generate({
dest,
format: options.format,
})
return fs.writeFile(dest, code, err => {if (err) throw err
})
}
}
})
}
结尾
本文对源码进行了形象,所以很多实现细节都没说进去。如果对实现细节有趣味,能够看一下源码。代码放在我的 github 上。
我曾经对 rollup 初版源码进行了删减,并增加了大量正文,让代码更加易读。