手写简易打包工具webpack-demo
webpack作为一款打包工具，在学习它之前，对它感到特别陌生，最近花了一些时间，学习了下。
学习的最大收获是手写一个简易的打包工具webpack-demo。
webpack-demo分为主要分为三个部分：
- 生成抽象语法树
- 获取各模块依赖
- 生成浏览器能够执行的代码
依赖准备
src目录下有三个文件：index.js、message.js、word.js。他们的依赖关系是：index.js是入口文件，其中index.js依赖message.js，message.js依赖word.js。
index.js：
import message from "./message.js";
console.log(message);message.js：
import { word } from "./word.js";
const message = `say ${word}`;
export default message;word.js：
var word = "uccs";
export { word };现在要要编写一个bundle.js将这三个文件打包成浏览器能够运行的文件。
打包的相关配置项写在webpack.config.js中。配置比较简易只有entry和output。
const path = require("path");
module.exports = {
entry: path.join(__dirname, "./src/index.js"),
output: {
path: path.join(__dirname, "dist"),
filename: "main.js",
},
};代码分析
获取入口文件的代码
通过node提供的fs.readFileSync获取入口文件的内容
const fs = require("fs");
const content = fs.readFileSync("./src/index.html", "utf-8");拿到入口文件的内容后，就需要获取到它的依赖./message。因为它是string类型。自然就想到用字符串截取的方式获取，但是这种方式太过麻烦，假如依赖项有很多的话，这个表达式就会特别复杂。
那有什么更好的方式可以获取到它的依赖呢？
生成抽象语法树
babel提供了一个解析代码的工具@babel/parser，这个工具有个方法parse，接收两个参数：
code：源代码options：源代码使用ESModule，需要传入sourceType: module
function getAST(entry) {
const source = fs.readFileSync(entry, "utf-8");
return parser.parse(source, {
sourceType: "module",
});
}这个ast是个对象，叫做抽象语法树，它可以表示当前的这段代码。
ast.program.body存放着我们的程序。通过抽象语法树可以找到声明的语句，声明语句放置就是相关的依赖关系。
通过下图可以看到第一个是import声明，第二个是表达式语句。
接下来就是拿到这段代码中的所有依赖关系。
一种方式是自己写遍历，去遍历body中的type: ImportDeclaration，这种方式呢有点麻烦。
有没有更好的方式去获取呢？
获取相关依赖
babel就提供一个工具@babel/traverse，可以快速找到ImportDeclaration。
traverse接收两个参数：
ast：抽象语法树options：遍历，需要找出什么样的元素，比如ImportDeclaration，只要抽象语法树中有ImportDeclaration就会进入这个函数。
function getDependencies(ast, filename) {
const dependencies = {};
traverse(ast, {
ImportDeclaration({ node }) {
const dirname = path.dirname(filename);
const newFile = path.join(dirname, node.source.value);
dependencies[node.source.value] = newFile;
},
});
return dependencies;
}ImportDeclaration：会接收到一个节点node，会分析出所有的ImportDeclaration。
通过上图可以看到node.source.value就是依赖。将依赖保存到dependencies对象中就行了，这里面的依赖路径是相对于bundle.js或者是绝对路径，否则打包会出错。
代码转换
依赖分析完了之后，源代码是需要转换的，因为import语法在浏览器中是不能直接运行的。
babel提供了一个工具@babel/core，它是babel的核心模块，提供了一个transformFromAst方法，可以将ast转换成浏览器可以运行的代码。
它接收三个参数：
ast：抽象语法树code：不需要，可传入nulloptions：在转换的过程中需要用的presents: ["@babel/preset-env"]
function transform(ast) {
const { code } = babel.transformFromAst(ast, null, {
presets: ["@babel/preset-env"],
});
return code;
}获取所有依赖
入口文件分析好之后，它的相关依赖放在dependencies中。下一步将要去依赖中的模块，一层一层的分析最终把所有模块的信息都分析出来，如何实现这个功能？
先定义一个buildModule函数，用来获取entryModule。entryModule包括filename、code、dependencies
function buildModule(filename) {
let ast = getAST(filename);
return {
filename,
code: transform(ast),
dependencies: getDependencies(ast, filename),
};
}通过遍历modules获取所有的模块信息，当第一次走完for循环后，message.js的模块分析被推到modules中，这时候modules的长度变成了2，所以它会继续执行for循环去分析message.js，发现message.js的依赖有word.js，将会调用buildModule分析依赖，并推到modules中。modules的长度变成了3，在去分析word.js的依赖，发现没有依赖了，结束循环。
通过不断的循环，最终就可以把入口文件和它的依赖，以及它依赖的依赖都推到modules中。
const entryModule = this.buildModule(this.entry);
this.modules.push(entryModule);
for (let i = 0; i < this.modules.length; i++) {
const { dependencies } = this.modules[i];
if (dependencies) {
for (let j in dependencies) {
// 有依赖调用 buildmodule 再次分析，保存到 modules
this.modules.push(this.buildModule(dependencies[j]));
}
}
}modules是个的数组，在最终生成浏览器可执行代码上有点困难，所以这里做一个转换
const graphArray = {};
this.modules.forEach((module) => {
graphArray[module.filename] = {
code: module.code,
dependencies: module.dependencies,
};
});生成浏览器可执行的代码
所有的依赖计算完之后，就需要生成浏览器能执行的代码。
这段代码是一个自执行函数，将graph传入。
graph传入时需要用JSON.stringify转换一下，因为在字符串中直接传入对象，会变成[object Object]。
在打包后的代码中，有个require方法，这个方法浏览器是不支持的，所有我们需要定义这个方法。
require在导入路径时需要做一个路径转换，否在将找不到依赖，所以定义了localRequire。
require内部还是一个自执行函数，接收三个参数：localRequire、exports、code。
const graph = JSON.stringify(graphArray);
const outputPath = path.join(this.output.path, this.output.filename);
const bundle = `
(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("${this.entry}")
})(${graph})
`;
fs.writeFileSync(outputPath, bundle, "utf-8");总结
通过手写一个简单的打包工具后，对webpack内部依赖分析、代码转换有了更深的理解，不在是一个可以使用的黑盒了。