【前端语言学习】学习minipack源码,了解打包工具的工作原理
作者:王聪
学习目标
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
通过minipack这个项目的源码学习了解上边提到的整个工作流程
demo目录
. ├── example ├── entry.js ├── message.js ├── name.js
入口文件 entry.js:
// 入口文件 entry.js import message from './message.js'; console.log(message);
message.js
// message.js import {name} from './name.js'; export default `hello ${name}!`;
name.js
// name.js export const name = 'world';
入口文件
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
createAsset:生产一个描述该模块的对象
createAsset 函数会解析js文本,生产一个描述该模块的对象
function createAsset(filename) { /*读取文件*/ const content = fs.readFileSync(filename, 'utf-8'); /*生产ast*/ const ast = babylon.parse(content, { sourceType: 'module', }); /* 该数组将保存此模块所依赖的模块的相对路径。*/ const dependencies = []; /*遍历AST以尝试理解该模块所依赖的模块。 为此,我们检查AST中的每个导入声明。*/ traverse(ast, { ImportDeclaration: ({node}) => { /*将导入的值推送到依赖项数组中。*/ dependencies.push(node.source.value); }, }); const id = ID++; /* 使用`babel-preset-env`将我们的代码转换为大多数浏览器可以运行的代码。*/ const {code} = transformFromAst(ast, null, { presets: ['env'], }); /*返回这个描述对象*/ return { id, filename, dependencies, code, }; }
createGraph: 生产依赖关系图
function createGraph(entry) { // 解析入口文件 const mainAsset = createAsset(entry); /*将使用队列来解析每个模块的依赖关系。 为此,定义了一个只包含入口模块的数组。*/ const queue = [mainAsset]; /*我们使用`for ... of`循环迭代队列。 最初,队列只有一个模块,但在我们迭代它时,我们会将其他新模块推入队列。 当队列为空时,此循环将终止。*/ for (const asset of queue) { /*我们的每个模块都有一个它所依赖的模块的相对路径列表。 我们将迭代它们,使用我们的`createAsset()`函数解析它们,并跟踪该模块在此对象中的依赖关系。*/ asset.mapping = {}; // This is the directory this module is in. const dirname = path.dirname(asset.filename); // We iterate over the list of relative paths to its dependencies. asset.dependencies.forEach(relativePath => { // Our `createAsset()` function expects an absolute filename. The // dependencies array is an array of relative paths. These paths are // relative to the file that imported them. We can turn the relative path // into an absolute one by joining it with the path to the directory of // the parent asset. const absolutePath = path.join(dirname, relativePath); // Parse the asset, read its content, and extract its dependencies. const child = createAsset(absolutePath); // It's essential for us to know that `asset` depends on `child`. We // express that relationship by adding a new property to the `mapping` // object with the id of the child. asset.mapping[relativePath] = child.id; // Finally, we push the child asset into the queue so its dependencies // will also be iterated over and parsed. queue.push(child); }); } // At this point the queue is just an array with every module in the target // application: This is how we represent our graph. return queue; }
通过createGraph函数 生成的依赖关系对象:
[ { id: 0, filename: './example/entry.js', dependencies: [ './message.js' ], code: '"use strict";\n\nvar _message = require("./message.js");\n\nvar _message2 = _interopRequireDefault(_message);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nconsole.log(_message2.default);', mapping: { './message.js': 1 } }, { id: 1, filename: 'example/message.js', dependencies: [ './name.js' ], code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\n\nvar _name = require("./name.js");\n\nexports.default = "hello " + _name.name + "!";', mapping: { './name.js': 2 } }, { id: 2, filename: 'example/name.js', dependencies: [], code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nvar name = exports.name = \'world\';', mapping: {} } ]
bundle 打包
bundle函数把上边得到的依赖关系对象作为参数,生产浏览器可以运行的包
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}}) `; // We simply return the result, hurray! :) return 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); })({ 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'; }, {}, ], })
分析打包后的这段代码
这是一个自执行函数
(function (modules) { ... })({...})
函数体内声明了 require
函数,并执行调用了require(0);
require函数就是 从参数modules对象中找到对应id的 [fn, mapping]
如果模块有依赖其他模块的话,就会执行传入的require
函数,也就是localRequire
函数
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; }
接收一个模块id,过程如下:
第一步:解构module(数组解构),获取fn和当前module的依赖路径
第二步:定义引入依赖函数(相对引用),函数体同样是获取到依赖module的id,localRequire 函数传入到fn中
第三步:定义module变量,保存的是依赖模块导出的对象,存储在module.exports中,module和module.exports也传入到fn中
第四步:递归执行,直到子module中不再执行传入的require函数
要更好了解“打包”的原理,就需要学习“模块化”的知识。
参考: