- Compiler.js:负责整个编译过程的控制和管理，包含compiler构造函数，在构造函数中获取webpack.config.js的出口、入口、参数等
- Bundler.js:引入webpack.config.js和compiler.js，创建compiler实例化对象并传入options。
- 拿到webpack配置参数后开始根据入口文件解析文件内容（fs.readFileSync读取文件内容）
(1). @babel/parser:将文件内容的的源代码解析成AST语法树，AST语法树的节点包含了文件依赖的文件名称。(type,start,end,…)
(2). @babel/traverse:提取依赖的文件名称到一个数组中
(3). @babel/core：通过babel.transformFromAst方法将ast转换成浏览器可执行的代码；返回一个对象{文件名，依赖数组，可执行代码}，作为依赖图的一个节点
(4). 遍历入口文件的依赖数组，数组中是文件名，递归执行上述方法直到找到所有的依赖，然后返回依赖对象。 - Bundler.js使用compiler对象的run方法生成依赖对象，并通过bundle方法解析graph（依赖图对象），使用eval方法来调用code并输出分发代码
- Bundler.js使用fs.writeFileSync将分发代码输出到文件中，生成bundle。
complier.js
// 文件操作模块，读取文件内容
const fs = require("fs");
const path = require("path");
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const babel = require("@babel/core");
module.exports = class Complier {constructor(options) {const { entry, output } = options;this.entry = entry;this.output = output;} // 拿到参数、执行、分析入口文件run() {const mainAsset = this.createAsset(this.entry);const queue = [mainAsset];for (const asset of queue) {Object.values(asset.dependencies).forEach((filename) => {const child = this.createAsset(filename);queue.push(child);});}console.log(queue);return queue;}// 开始编译，构建ast语法树 filename: ./src/index.jscreateAsset(filename) {const content = fs.readFileSync(filename, "utf-8");const ast = parser.parse(content, { sourceType: "module" });// 创建依赖const dependencies = {};traverse(ast, {ImportDeclaration: ({ node }) => {// 获取文件的路径名如 './src/index.js' dirname='./src'const dirname = path.dirname(filename);const absPath = path.join(dirname, node.source.value);dependencies[node.source.value] = absPath;},});// 将ast转换成代码 // https://www.babeljs.cn/docs/babel-coreconst { code } = babel.transformFromAst(ast, null, {presets: ["@babel/preset-env"],});return { filename, dependencies, code };}
};
bundler.js
// 引入配置
const fs = require('fs');
const path = require('path')
const options = require('../webpack.config')const complier = require('./complier')const { entry, output } = optionsfunction bundle(graph){// 得到以依赖文件名的对象 let modules = {};graph.forEach(item => {modules[item.filename] = {dependencies: item.dependencies,code: item.code}})modules = JSON.stringify(modules)const result = `(function(graph){function require(filepath) {function localRequire(relativePath) {// 将代码中的require中的路径转换成dependencies存储的带文件夹名的路径return require(graph[filepath].dependencies[relativePath])}var exports = {}function fn(require, exports, code) {eval(code)}fn(localRequire, exports, graph[filepath].code)return exports}require('${entry}')})(${modules})`return result
}function createFile(code) {fs.writeFileSync(path.join(output.path, output.filename), code)
}const graph = new complier(options).run()
const result = bundle(graph)
createFile(result)
多串口进行重定向（printf函数发送数据）)
)
)
