webpack打包原理，手写一个自己的bundler
webpack这类的打包工具，能帮助我们把用esModule组织起来的代码打包到一个js文件中，在浏览器中运行。实现前端项目的模块化，同时优化请求数量，文件大小等。
话不多说，我们自己来实现一个类似的bundler,对模块化的前端代码进行打包，输出能在浏览器运行的js文件。
准备工作
先来看看我们要处理的项目是怎么组织的，我们放一个src文件夹，里面放上index.js，hello.js，word.js每个文件的内容如下
//index.jsimport hello from "./hello.js"
console.log(hello)//hello.jsimport word from './word.js'
export default `hello ${word}`//word.js const word = "word";
export default word;
想干的事儿也很简单，就是用esModule的方式，最终在index.js里拼装一个console.log('hello word')，在浏览器中执行这段js，能够在控制台打印一个'hello word'。
那么我们就在src文件夹的同级创建一个bundler.js，帮助我们对代码进行打包，输入可执行的js。
解析入口文件 我们知道，webpack是通过一个entry来输入要打包文件的入口的，类似的，我们也希望通过输入文件访问地址的方式，告诉我们的bundler要把哪个文件作为入口进行打包。
先来看代码：
const fs = require('fs')
const path = require('path')
const paser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const { transformFromAst } = require('@babel/core')
const moduleAnalyser = (filename) => {
const content = fs.readFileSync(filename, 'utf-8');
//{1}
const ast = paser.parse(content,{//{2}
sourceType: 'module'
})
const dependencies = {};
traverse(ast, {//{3}
ImportDeclaration({node}){
const dirname = path.dirname(filename);
const newFile = './' + path.join(dirname, node.source.value)
dependencies[node.source.value] = newFile
}
})
const { code } = transformFromAst(ast, null, {//{4}
presets: ["@babel/preset-env"]
})
return {
filename,
dependencies,
code
}
}1、文件读取 我们定义一个 moduleAnalyser 方法来对模块进行分析，既然要对文件进行分析，就要用到node的fs模块，将文件读取进来。于是在{1}处，我们将文件读取了进来。
2、生成抽象语法树 拿到文件得内容之后，要对它进行解析，正好Babel提供的@babel/parser能帮我对文件进行解析，生成抽象语法树，于是我们在{2}处，对fs拿到的文件进行解析，生成了AST。如下：
{
type: 'File',
start: 0,
end: 50,
loc: SourceLocation {
start: Position { line: 1, column: 0 },
end: Position { line: 3, column: 18 },
filename: undefined,
identifierName: undefined
},
errors: [],
program: Node {
type: 'Program',
start: 0,
end: 50,
loc: SourceLocation {
start: [Position],
end: [Position],
filename: undefined,
identifierName: undefined
},
sourceType: 'module',
interpreter: null,
body: [ [Node], [Node] ],
directives: []
},
comments: []
}我们把重点放在program.body上，里面有两个对象，其实就是index.js中的两条语句，打印一下可以看到如下：
[
Node {
type: 'ImportDeclaration',
start: 0,
end: 30,
loc: SourceLocation {
start: [Position],
end: [Position],
filename: undefined,
identifierName: undefined
},
specifiers: [ [Node] ],
source: Node {
type: 'StringLiteral',
start: 18,
end: 30,
loc: [SourceLocation],
extra: [Object],
value: './hello.js'
}
},
Node {
type: 'ExpressionStatement',
start: 32,
end: 50,
loc: SourceLocation {
start: [Position],
end: [Position],
filename: undefined,
identifierName: undefined
},
expression: Node {
type: 'CallExpression',
start: 32,
end: 50,
loc: [SourceLocation],
callee: [Node],
arguments: [Array]
}
}
]3、获取依赖 看type可以知道，第一条其实就是一条引用语句，看到这儿应该就很敏感了，我们要对文件进行打包，这种引用关系当然是非常重要的。我们要接下来要继续解析，肯定要通过这样的引用关系找到被引用的文件，所以这个import的语句要存下来。好在Babel提供了@babel/traverse(遍历)方法来维护AST的整体状态,我们在{3}使用它来帮我们找出依赖模块。
值得一提的是traverse解析出来的是个相对路径，但为了方便我们接下来处理，要把这个相对路径转换成绝对路径，具体方法如代码中所示。
4、AST转可执行code 除了拿依赖关系，我们还需要把 AST 转换为浏览器可执行代码，而Babel 提供的@babel/core 和 @babel/preset-env正好可以做这个事儿，于是在{4}，我们做了这一步转换。
至此，我们就完成了对一个模块的解析，不妨看一下我们会拿到什么结果：
{
filename: './src/index.js',
dependencies: { './hello.js': './src\\hello.js' },
code: '"use strict";
\n' +
'\n' +
'var _hello = _interopRequireDefault(require("./hello.js"));
\n' +
'\n' +
'function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj };
}\n' +
'\n' +
'console.log(_hello["default"]);
'
}可以看到，我们知道了解析的文件是谁，有什么依赖，可执行的js代码是什么。
获取依赖图谱 到现在，我们拿到了一个模块的解析，要能完整实现一个功能，我们还需要对它所依赖的所有模块进行处理。于是需要一个方法帮我们拿到整个依赖的图谱，所以我们定义了makeDenpendenciesGraph方法帮我们做这个事。
直接先看代码：
const makeDenpendenciesGraph = (entry) => {//分析所有依赖模块，获得依赖图谱
const entryModule = moduleAnalyser(entry);
const graph = {};
const graphArray = [ entryModule ];
while(graphArray.length > 0){
[...graphArray].forEach(item => {
graphArray.shift();
const { dependencies } = item;
graph[item.filename] = {
dependencies: item.dependencies,
code: item.code
}
if(dependencies) {
for(let j in dependencies){
graphArray.push(moduleAnalyser(dependencies[j]))
}
}
});
}
return graph;
}这部分其实比较简单，我们使用一个广度优先遍历，从moduleAnalyser解析出来的结果里看还有没有依赖，有的话就再继续解析出来，把所有解析的结果放到一起。看一下生成的依赖图谱：
{
'./src/index.js': {
dependencies: { './hello.js': './src\\hello.js' },
code: '"use strict";
\n' +
'\n' +
'var _hello = _interopRequireDefault(require("./hello.js"));
\n' +
'\n' +
'function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj };
}\n' +
'\n' +
'console.log(_hello["default"]);
'
},
'./src\\hello.js': {
dependencies: { './word.js': './src\\word.js' },
code: '"use strict";
\n' +
'\n' +
'Object.defineProperty(exports, "__esModule", {\n' +
'value: true\n' +
'});
\n' +
'exports["default"] = void 0;
\n' +
'\n' +
'var _word = _interopRequireDefault(require("./word.js"));
\n' +
'\n' +
'function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj };
}\n' +
'\n' +
'var _default = "hello ".concat(_word["default"]);
\n' +
'\n' +
'exports["default"] = _default;
'
},
'./src\\word.js': {
dependencies: {},
code: '"use strict";
\n' +
'\n' +
'Object.defineProperty(exports, "__esModule", {\n' +
'value: true\n' +
'});
\n' +
'exports["default"] = void 0;
\n' +
'var word = "word";
\n' +
'var _default = word;
\n' +
'exports["default"] = _default;
'
}
}生成可执行js 我们拿到了依赖图谱，其实就剩下最后一步了，要把解析出来的内容整合到一起，并且生成可被执行的js文件。上代码：
const generateCode = (entry) => {
const graph = makeDenpendenciesGraph(entry);
return `(function(graph){
function require(module){
function localRequire(relativePath){
return require(graph[module].dependencies[relativePath]);
}
var exports = {};
(function(require, exports, code){
eval(code)
})(localRequire, exports, graph[module].code);
return exports;
};
require('${entry}')
})(${JSON.stringify(graph)})`;
}其实我们就是要把依赖图谱中的code放到一起，返回一个可执行的js,其实也就是返回了一个js字符串。
我们注意到在code中有一个require方法和一个exports对象，如果我们没定义这两个东西，js执行的时候一定会报错的。
在闭包内我们拿require作入口，又拿一个闭包把各个模块划分开防止内部变量污染。同时我们注意到code中使用的是相对路径，所以定义了一个localRequire来做一个绝对路径的转化，才能找到依赖的模块。
至此，就完成了一个对esModule组织的代码的打包，看看结果吧：
(function(graph){
function require(module){
function localRequire(relativePath){
return require(graph[module].dependencies[relativePath]);
}
var exports = {};
(function(require, exports, code){
eval(code)
})(localRequire, exports, graph[module].code);
return exports;
};
require('./src/index.js')
})({"./src/index.js":{"dependencies":{"./hello.js":"./src\\hello.js"},"code":"\"use strict\";
\n\nvar _hello = _interopRequireDefault(require(\"./hello.js\"));
\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj };
}\n\nconsole.log(_hello[\"default\"]);
"},"./src\\hello.js":{"dependencies":{"./word.js":"./src\\word.js"},"code":"\"use strict\";
\n\nObject.defineProperty(exports, \"__esModule\", {\nvalue: true\n});
\nexports[\"default\"] = void 0;
\n\nvar _word = _interopRequireDefault(require(\"./word.js\"));
\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj };
}\n\nvar _default = \"hello \".concat(_word[\"default\"]);
\n\nexports[\"default\"] = _default;
"},"./src\\word.js":{"dependencies":{},"code":"\"use strict\";
\n\nObject.defineProperty(exports, \"__esModule\", {\nvalue: true\n});
\nexports[\"default\"] =void 0;
\nvar word = \"word\";
\nvar _default = word;
\nexports[\"default\"] = _default;
"}})【webpack打包原理，手写一个自己的bundler】放到浏览器中执行这段代码，就打印出了我们预期的 'hello word'
完整代码如下：
const fs = require('fs')
const path = require('path')
const paser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const { transformFromAst } = require('@babel/core')
const moduleAnalyser = (filename) => {//解析一个模块，生成抽象语法树，并转换成好处理的对象
const content = fs.readFileSync(filename, 'utf-8');
const ast = paser.parse(content,{
sourceType: 'module'
})
const dependencies = {};
traverse(ast, {
ImportDeclaration({node}){
const dirname = path.dirname(filename);
const newFile = './' + path.join(dirname, node.source.value)
dependencies[node.source.value] = newFile
}
})
const { code } = transformFromAst(ast, null, {
presets: ["@babel/preset-env"]
})
return {
filename,
dependencies,
code
}
}
const makeDenpendenciesGraph = (entry) => {
const entryModule = moduleAnalyser(entry);
const graph = {};
const graphArray = [ entryModule ];
while(graphArray.length > 0){
[...graphArray].forEach(item => {
graphArray.shift();
const { dependencies } = item;
graph[item.filename] = {
dependencies: item.dependencies,
code: item.code
}
if(dependencies) {
for(let j in dependencies){
graphArray.push(moduleAnalyser(dependencies[j]))
}
}
});
}
return graph;
}
const generateCode = (entry) => {
const graph = makeDenpendenciesGraph(entry);
return `(function(graph){
function require(module){
function localRequire(relativePath){
return require(graph[module].dependencies[relativePath]);
}
var exports = {};
(function(require, exports, code){
eval(code)
})(localRequire, exports, graph[module].code);
return exports;
};
require('${entry}')
})(${JSON.stringify(graph)})`;
}const code = generateCode('./src/index.js')
console.log(code)推荐阅读
- 做一件事情的基本原理是什么（）
- 【读书笔记】贝叶斯原理
- Beego打包部署到Linux
- SG平滑轨迹算法的原理和实现
- “写作宝典”《金字塔原理》之读书笔记
- Spring|Spring 框架之 AOP 原理剖析已经出炉！！！预定的童鞋可以识别下发二维码去看了
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- Vue源码分析—响应式原理(二)
- MYSQL主从同步的实现
- (1)redis集群原理及搭建与使用(1)