最近在学习 webpack源码,由于源码比较复杂,就先梳理了一下整体流程,就参考官网的例子,手写一个最基本的 webpack 模块解析器。
代码很少,github地址:手写webpack模块解析器
整体流程分析
1、读取入口文件。
2、将内容转换成 ast 语法树。
3、深度遍历语法树,找到所有的依赖,并加入到一个数组中。
4、将 ast 代码转换回可执行的 js 代码。
5、编写 require 函数,根据入口文件,自动执行完所有的依赖。
6、输出运行结果。
createAsset
// 读取内容并提取它的依赖关系 function createAsset(filename) { // 以字符串的形式读取文件 const content = fs.readFileSync(filename, "utf-8"); // 转换字符串为ast抽象语法树 const ast = babylon.parse(content, { sourceType: "module" }); const dependencies = []; // 遍历抽象语法树 traverse(ast, { // 每当遍历到import语法的时候 ImportDeclaration: ({ node }) => { // 把依赖的模块加入到数组中 dependencies.push(node.source.value); } }); const id = ID++; // 转换为浏览器可运行的代码 const { code } = babel.transformFromAstSync(ast, null, { presets: ["@babel/preset-env"] }); return { id, filename, dependencies, code }; }
createGraph
// 从入口开始,分析所有依赖项,形成依赖图,采用深度优先遍历 function createGraph(entry) { const mainAsset = createAsset(entry); // 定义一个保存依赖项的数组 const queue = [mainAsset]; for (const asset of queue) { const dirname = path.dirname(asset.filename); // 定义一个保存子依赖项的属性 asset.mapping = {}; asset.dependencies.forEach(relativePath => { const absolutePath = path.join(dirname, relativePath); const child = createAsset(absolutePath); // 给子依赖项赋值 asset.mapping[relativePath] = child.id; // 将子依赖也加入队列中,循环处理 queue.push(child); }); } return queue; }
bundle
// 根据生成的依赖关系图,生成浏览器可执行文件 function bundle(graph) { let modules = ""; // 把每个模块中的代码放在一个function作用域内 graph.forEach(mod => { modules += `${mod.id}:[ function (require, module, exports){ ${mod.code} }, ${JSON.stringify(mod.mapping)}, ],`; }); // require, module, exports 不能直接在浏览器中使用,这里模拟了模块加载,执行,导出操作。 const result = ` (function(modules){ // 创建一个require()函数: 它接受一个 模块ID 并在我们之前构建的模块对象查找它. function require(id){ const [fn, mapping] = modules[id]; function localRequire(relativePath){ // 根据mapping的路径,找到对应的模块id return require(mapping[relativePath]); } const module = {exports:{}}; // 执行转换后的代码,并输出内容。 fn(localRequire,module,module.exports); return module.exports; } // 执行入口文件 require(0); })({${modules}}) `; return result; }
执行解析
const graph = createGraph("./entry.js"); const result = bundle(graph);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 王子异《1996 Part.2》[320K/MP3][18.29MB]
- 群星.1994-宝丽金最倾情3CD【宝丽金】【WAV+CUE】
- 乐俊亨.2024-同泪【CharioticMusic】【FLAC分轨】
- 何耀珊.2006-收获【华纳】【WAV+CUE】
- 梁汉文1994-壹精选[华星][WAV+CUE]
- 洪荣宏1981-歹路不可行·相思雨(飞跃复刻版)[光美][WAV+CUE]
- 旅行团2015-10Day’s[来福胶泥][WAV+CUE]
- 龙千玉.2011-卡将哟【豪记】【WAV+CUE】
- 蔣志光.1993-多情多寂寞(国专)【BMG】【WAV+CUE】
- 陈慧娴.1996-雪映美白96演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 王子异《1996 Part.2》[FLAC/分轨][50.66MB]
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[320K/MP3][155.91MB]
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[FLAC/分轨][251.78MB]
- 黄韵玲2001-巴结音乐[全员集合][WAV+CUE]
- 郑绪岚2015-流金岁月·精选[首版][WAV+CUE]