从minipack看打包原理
从minipack看打包原理
前端有很多的打包工具如webpack等，但是打包工具的原理是什么呢？
minipack是一个小型的打包工具，作者ronami，用来解析打包工具的基本原理。代码中有相当多的注释，理解起来也非常容易。
先放其中测试的代码文件，代码文件只有三个，每个都只有一两行代码：
// entry.js
import message from './message.js';
console.log(message);
// message.js
import {name} from './name.js';
export default `hello ${name}!`;
// name.js
export const name = 'world';
在模块化编程中，开发人员将程序分解为离散的功能块，称为模块。
三个代码文件就是三个模块，它们之间存在依赖关系。
然后是正文，这是实现打包功能用到的库：
// fs读取文件
const fs = require('fs');
// path库解析文件路径
const path = require('path');
// babylon用于AST解析，构造AST语法树
const babylon = require('babylon');
// travers对AST语法树进行遍历
const traverse = require('babel-traverse').default;
// transformFromAst将语法树转换为代码
const {transformFromAst} = require('babel-core');
createAsset获取模块信息
第一个函数是createAsset()函数，获取模块的信息。主要包括四个部分：
- id：每个模块的唯一标识符；
- filename：模块的文件名；
- dependencies：模块的依赖列表，数据结构为数组；
- code：模块中的代码。
let ID = 0;
// 接受一个文件参数，为模块创建一个抽象语法树，
// 遍历该树，得到模块的信息对象，属性包括id,文件名，依赖，代码
function createAsset(filename) {
// 获取文件内容，编码格式utf-8
const content = fs.readFileSync(filename, 'utf-8');
// JavaScript解析器会生成抽象语法树
const ast = babylon.parse(content, {
sourceType: 'module',
});
const dependencies = [];
// 遍历抽象语法树，从导入声明中获取依赖列表
traverse(ast, {
ImportDeclaration: ({node}) => {
dependencies.push(node.source.value);
},
});
// 获取id
const id = ID++;
// 从AST解析获取代码
const {code} = transformFromAst(ast, null, {
presets: ['env'],
});
return {
id,
filename,
dependencies,
code,
};
}
如entry.js文件经过该函数处理后，会得到以下数据：
{
id: 0,
filename: './example/entry.js',
dependencies: ['./message.js'],
code: '"use strict";\n' +
'\n' +
'var _message = require("./message.js");\n' +
'\n' +
'var _message2 = _interopRequireDefault(_message);\n' +
'\n' +
'function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n' +
'\n' +
'console.log(_message2.default);'
}
构建依赖图
第二个函数createGraph()接受一个文件，从该文件开始向前遍历，直到处理完所有的模块。
// 函数接受一个入口文件，从入口文件开始，向前递归寻找依赖文件，最后返回一个包含所有模块的数组
function createGraph(entry) {
// 从入口文件开始获取依赖项
const mainAsset = createAsset(entry);
// 创建一个数组类型的队列，起始队列中只有入口文件一个元素
const queue = [mainAsset];
// 使用for..of...循环遍历队列，添加一个mapping对象，将依赖项的相对地址改为绝对地址
for (const asset of queue) {
asset.mapping = {};
const dirname = path.dirname(asset.filename);
// 将每个依赖项的相对地址转为绝对地址，获取到依赖项的全部信息后，
asset.dependencises.forEach(relativePath => {
const absolutePath = path.join(dirname, relativePath);
const child = createAsset(absolutePath);
// 为mapping添加relativePath属性，属性值为依赖项的id
asset.mapping[relativePath] = child.id;
// 将child推到依赖项队列中
queue.push(child);
});
}
return queue;
}
在第二个函数中，为模块对象添加了一个mapping属性，用于保存依赖的模块的相对路径和模块id的映射。如{'./message.js': 1}。遍历完成后，函数返回一个依赖图数组。返回结果大致如下：
[
{
id: 0,
filename: './example/entry.js',
dependencies: [ './message.js' ],
code: '',
mapping: { './message.js': 1 }
},
{
id: 1,
filename: 'example/message.js',
dependencies: [ './name.js' ],
code: '',
mapping: { './name.js': 2 }
},
{
id: 2,
filename: 'example/name.js',
dependencies: [],
code: '',
mapping: {}
}
]
mapping属性解决的问题是，当依赖列表中出现相同的文件时，可以使用唯一标识符id进行区分。
bundle函数
bundle()函数首先对参数进行处理，对每一个模块进行处理，将所有的模块转换成key:value形式，key为模块的唯一标识符id，value是一个二值数组，第一个值是模块的代码，第二个值是mapping。代码如下：
function bundle(graph) {
let modules = '';
graph.forEach(mod => {
modules += `${mod.id}: [
function (require, module, exports) {
${mod.code}
},
${JSON.stringify(mod.mapping)},
],`;
});
const result = `
(function(modules) {
function require(id) {
const [fn, mapping] = modules[id];
function localRequire(name) {
return require(mapping[name]);
}
const module = { exports : {} };
fn(localRequire, module, module.exports);
return module.exports;
}
require(0);
})({${modules}})
`;
return result;
}
const graph = createGraph('./example/entry.js');
const result = bundle(graph);
console.log(result);
中间这段代码与webpack的runtime函数很像。Runtime函数帮助模块顺利地执行模块的导入、导出和执行。
这里的runtime函数，接受依赖图作为参数，但是数据结构已经不同。runtime定义了一个require函数，运行require(0)，表示从入口文件开始解析，由于id具有唯一性，所以将id作为参数。
为了实现模块化，runtime构造了函数作用域，模块内的代码被包裹在函数内。minipack项目运行结果中modules为：
{0: [
function (require, module, exports) {
"use strict";
var _message = require("./message.js");
var _message2 = _interopRequireDefault(_message);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log(_message2.default);
},
{"./message.js":1},
],
1: [
function (require, module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _name = require("./name.js");
exports.default = "hello " + _name.name + "!";
},
{"./name.js":2},
],
2: [
function (require, module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var name = exports.name = 'world';
},
{},
],}
总结
打包的基本过程为：
- 从entry开始生成AST，从导入声明中获取依赖列表
- 获取entry模块的全部信息
- 对entry的依赖文件重复上述操作，直到遍历完成
- 生成依赖图数组
- 构建runtime函数
- 将依赖图传递给runtime函数，生成代码
