webpack中bundler源码编写2
通过第一部分的学习，我们已经可以分析一个js的文件。这节课我们学习Dependencies Graph，也就是依赖图谱。对所有模块进行分析。先分析index.js。index.js里面引入了messgage.js。再去分析message，一层一层的去分析，要想实现这个效果，需要去写个函数。
const fs = require('fs'); // 帮助我们获取一些文件的信息
const path = require('path'); // 打包的时候需要绝对路径，借助path这个模块
const parser = require('@babel/parser'); // 帮助我们分析代码，引入的文件
const traverse = require('@babel/traverse').default;// 因为是export出来的内容，必须加一个default属性才可以
const babel = require('@babel/core'); // babel的核心模块，转化代码，转化成浏览器认识的代码
// 分析模块
const moduleAnalyser = (filename) => {
// 读取文件内容
const content = fs.readFileSync(filename, 'utf-8');
// 利用parser.parse获取到ast，抽象语法树
const ast = parser.parse(content, {
sourceType: 'module' // 说明是es module的引入方式
});
// 利用traverse对代码进行一个分析
const dependencies = {};
traverse(ast, {
// 只要抽象语法树有ImportDeclaration就会进入这个方法,node是节点
ImportDeclaration({ node }){
// 拿到filename对应的文件夹路径
const dirname = path.dirname(filename);
// 对这个文件夹的路径进行一个转化,将引入的模块转化成相对于bundler的相对路径
const newFile = './' + path.join(dirname, node.source.value);
// 为了方便，把相对路径，绝对路径都存上，key是相对路径，value是绝对路径
dependencies[node.source.value] = newFile;
}
});
// 这个方法可以将抽象语法树转化成浏览器可以运行代码。
const { code } = babel.transformFromAst(ast, null, {
presets: ['@babel/preset-env'] // 把es6语法翻译成es5语法
});
// 返回入口文件和相对应的依赖，都可以分析出来了。
return {
filename,
dependencies,
code
}
}
// 依赖图谱函数，将所有分析好的模块放在这里
const makeDependenciesGraph = (entry) => {
const entryModule = moduleAnalyser(entry);
const graphArray = [entryModule];
// 循环入口文件
for(let i = 0; i < graphArray.length; i++) {
const item = graphArray[i];
const { dependencies } = item;
// 如果该模块有依赖文件，那么就对相应的依赖文件继续进行分析
if(dependencies) {
for(let j in dependencies) {
graphArray.push(moduleAnalyser(dependencies[j]));
}
}
}
// 打印出来，发现所有模块都分析好了。
console.log(graphArray);
}
const graphInfo = makeDependenciesGraph('./src/index.js');
运行node bundler.js | highlight。发现所有模块的文件，依赖和翻译的代码都分析好了打印出来。这个就是我们的依赖图谱。
在后面我们打包代码的时候，如果是个数组的话，打包起来不是特别的容易，所以对这个数组进行一个格式化对转化。
// 依赖图谱函数，将所有分析好的模块放在这里 const makeDependenciesGraph = (entry) => { const entryModule = moduleAnalyser(entry); const graphArray = [entryModule]; // 循环入口文件 for(let i = 0; i < graphArray.length; i++) { const item = graphArray[i]; const { dependencies } = item; // 如果该模块有依赖文件，那么就对相应的依赖文件继续进行分析 if(dependencies) { for(let j in dependencies) { graphArray.push(moduleAnalyser(dependencies[j])); } } }
const graph = {}; graphArray.forEach(item => { graph[item.filename] = { dependencies: item.dependencies, code: item.code } })
console.log(graph);
}
这个时候数组就编程了一个对象。
通过这个函数makeDependenciesGraph，我们就把这个项目的所有文件的以来关系都表示出来了。所以所有代码如下。
const fs = require('fs'); // 帮助我们获取一些文件的信息
const path = require('path'); // 打包的时候需要绝对路径，借助path这个模块
const parser = require('@babel/parser'); // 帮助我们分析代码，引入的文件
const traverse = require('@babel/traverse').default;// 因为是export出来的内容，必须加一个default属性才可以
const babel = require('@babel/core'); // babel的核心模块，转化代码，转化成浏览器认识的代码
// 分析模块
const moduleAnalyser = (filename) => {
// 读取文件内容
const content = fs.readFileSync(filename, 'utf-8');
// 利用parser.parse获取到ast，抽象语法树
const ast = parser.parse(content, {
sourceType: 'module' // 说明是es module的引入方式
});
// 利用traverse对代码进行一个分析
const dependencies = {};
traverse(ast, {
// 只要抽象语法树有ImportDeclaration就会进入这个方法,node是节点
ImportDeclaration({ node }){
// 拿到filename对应的文件夹路径
const dirname = path.dirname(filename);
// 对这个文件夹的路径进行一个转化,将引入的模块转化成相对于bundler的相对路径
const newFile = './' + path.join(dirname, node.source.value);
// 为了方便，把相对路径，绝对路径都存上，key是相对路径，value是绝对路径
dependencies[node.source.value] = newFile;
}
});
// 这个方法可以将抽象语法树转化成浏览器可以运行代码。
const { code } = babel.transformFromAst(ast, null, {
presets: ['@babel/preset-env'] // 把es6语法翻译成es5语法
});
// 返回入口文件和相对应的依赖，都可以分析出来了。
return {
filename,
dependencies,
code
}
}
// 依赖图谱函数，将所有分析好的模块放在这里
const makeDependenciesGraph = (entry) => {
const entryModule = moduleAnalyser(entry);
const graphArray = [entryModule];
// 循环入口文件
for(let i = 0; i < graphArray.length; i++) {
const item = graphArray[i];
const { dependencies } = item;
// 如果该模块有依赖文件，那么就对相应的依赖文件继续进行分析
if(Object.getOwnPropertyNames(dependencies).length) {
for(let j in dependencies) {
graphArray.push(moduleAnalyser(dependencies[j]));
}
}
}
const graph = {};
graphArray.forEach(item => {
graph[item.filename] = {
dependencies: item.dependencies,
code: item.code
}
})
return graph;
}
const graphInfo = makeDependenciesGraph('./src/index.js');
console.log(graphInfo);
接下来我们就只要借助dependenciesGraph来生成真正可以在浏览器运行的代码。
const fs = require('fs'); // 帮助我们获取一些文件的信息
const path = require('path'); // 打包的时候需要绝对路径，借助path这个模块
const parser = require('@babel/parser'); // 帮助我们分析代码，引入的文件
const traverse = require('@babel/traverse').default;// 因为是export出来的内容，必须加一个default属性才可以
const babel = require('@babel/core'); // babel的核心模块，转化代码，转化成浏览器认识的代码
// 分析模块
const moduleAnalyser = (filename) => {
// 读取文件内容
const content = fs.readFileSync(filename, 'utf-8');
// 利用parser.parse获取到ast，抽象语法树
const ast = parser.parse(content, {
sourceType: 'module' // 说明是es module的引入方式
});
// 利用traverse对代码进行一个分析
const dependencies = {};
traverse(ast, {
// 只要抽象语法树有ImportDeclaration就会进入这个方法,node是节点
ImportDeclaration({ node }){
// 拿到filename对应的文件夹路径
const dirname = path.dirname(filename);
// 对这个文件夹的路径进行一个转化,将引入的模块转化成相对于bundler的相对路径
const newFile = './' + path.join(dirname, node.source.value);
// 为了方便，把相对路径，绝对路径都存上，key是相对路径，value是绝对路径
dependencies[node.source.value] = newFile;
}
});
// 这个方法可以将抽象语法树转化成浏览器可以运行代码。
const { code } = babel.transformFromAst(ast, null, {
presets: ['@babel/preset-env'] // 把es6语法翻译成es5语法
});
// 返回入口文件和相对应的依赖，都可以分析出来了。
return {
filename,
dependencies,
code
}
}
// 依赖图谱函数，将所有分析好的模块放在这里
const makeDependenciesGraph = (entry) => {
const entryModule = moduleAnalyser(entry);
const graphArray = [entryModule];
// 循环入口文件
for(let i = 0; i < graphArray.length; i++) {
const item = graphArray[i];
const { dependencies } = item;
// 如果该模块有依赖文件，那么就对相应的依赖文件继续进行分析
if(Object.getOwnPropertyNames(dependencies).length) {
for(let j in dependencies) {
graphArray.push(moduleAnalyser(dependencies[j]));
}
}
}
const graph = {};
graphArray.forEach(item => {
graph[item.filename] = {
dependencies: item.dependencies,
code: item.code
}
})
return graph;
}
// 这个函数结合dependenciesGraph来生成最后的代码
const generateCode = (entry) => {
// 拿到生成的 graph对象
const graph = JSON.stringify(makeDependenciesGraph(entry));
/**
* 1、避免污染全局，放在大的闭包里面
* 2、我们看到graph里面的源码有require,export这样的关键字，这个浏览器也是看不懂的，
* 所以如果想去直接去执行每个模块的代码，会报错的。所以首先需要在里面构建require
* 3、localRequire是相对路径转化的函数
*/
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}')
})(${graph});
`;
}
const code = generateCode('./src/index.js');
console.log(code);
