webpack中bundler源码编写

新建一个项目，再新建一个src文件夹，里面有三个文件，word.js,message.js,index.js

word.js

export const word = 'hello';

message.js

import { word } from './word.js';
const message = `say ${word}`;
export default message;

index.js

import message from './message.js';
console.log(message);

这三个模块通过调用，最后打印出say hello。那我们说，如果直接想src目录下的代码运行下浏览器下，是不可以的；浏览器根本就不认识这种语法。所以我们需要通过webpack类似的打包工具帮助我们进行项目的打包。在根目录下创建一个bundler.js，这就是我们要做的打包工具

首先打包工具肯定是用node.js来做开发的，所以需要安装node。用了webpack，肯定是装了node的。

bundler.js

const fs = require('fs'); // 帮助我们获取一些文件的信息

// 分析模块
const moduleAnalyser = (filename) => {
　　// 读取文件内容
　　const content = fs.readFileSync(filename, 'utf-8');
　　console.log(content);
}

moduleAnalyser('./src/index.js');

运行node bundler.js，输出出来的就是index.js里面的内容。这里在控制台显示的内容，黑色的文本，不是很好看。我们可以安装一个工具 

sudo npm install cli-highlight -g

然后运行 node bundler.js | highlight

这个时候，打印出来的代码就会高亮。

拿到文件内容以后。需要分析这个文件里面有哪些依赖，怎么拿到依赖呢？字符串截取可以，但如果很多个模块引入的时候，字符串截取就会显得非常麻烦。我们安装babel的第三方模块帮助我们去分析依赖，安装

npm install @babel/parser --save

安装好之后我们就可以使用了

bundler.js

const fs = require('fs'); // 帮助我们获取一些文件的信息
const parser = require('@babel/parser'); // 帮助我们分析代码，引入的文件


// 分析模块
const moduleAnalyser = (filename) => {
　　// 读取文件内容
　　const content = fs.readFileSync(filename, 'utf-8');
　　console.log(parser.parse(content, {
　　　　sourceType: 'module' // 说明是es module的引入方式
　　}));
}

moduleAnalyser('./src/index.js');

这个时候打印出来一个对象。这个对象就是我们听说的一个概念，叫做抽象语法树。也就是ast

 

这个对象可以很好的表述我当前的这段代码。这个对象里有一个program这样的一个字段，表示当前运行的程序，里面有个body字段，我们可以打印这个字段看一下。

bundler.js

const fs = require('fs'); // 帮助我们获取一些文件的信息
const parser = require('@babel/parser'); // 帮助我们分析代码，引入的文件

// 分析模块
const moduleAnalyser = (filename) => {
　　// 读取文件内容
　　const content = fs.readFileSync(filename, 'utf-8');
　　const ast = parser.parse(content, {
　　　　sourceType: 'module' // 说明是es module的引入方式
　　})
　　console.log(ast.program.body);
}

moduleAnalyser('./src/index.js');

 

这个时候打印出来body的两个节点，首先第一个节点ImportDeclaration，确实是import一些东西。也就是引入的声明。第二个节点是ExpressionStatement，是一个表达式的声明，console.log确实是一个表达式的语句。所以通过babel.parser可以分析出抽象语法树。通过抽象语法树，我们就可以找到一些声明的语句，而声明的语句，放置的就是入口文件对应的一些依赖关系。我们可以遍历body,找到ImportDeclaration这样的一些内容，如果自己写一些遍历的话，还是有点麻烦，babel还提供给我们一个模块，可以帮助我们快速的找到import的节点。所以我们需要安装这样的一个模块

npm install @babel/traverse --save

bundler.js

const fs = require('fs'); // 帮助我们获取一些文件的信息
const parser = require('@babel/parser'); // 帮助我们分析代码，引入的文件
const traverse = require('@babel/traverse').default;// 因为是export出来的内容，必须加一个default属性才可以
 

// 分析模块
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 }){
　　　　　　dependencies.push(node.source.value);
　　　　}
　　});
　　console.log(dependencies);
}
 

moduleAnalyser('./src/index.js');

再次运行 node bundler.js | highlight。发现已经打印出了依赖的模块。[ './message.js' ]。

这个时候对入口文件对依赖分析就分析出来了。但是这个路径是相对路径，相对于传进来对index.js。在真正做代码打包的时候，我们这些依赖文件他不能是相对路径。他必须是一个绝对路径。或者如果一定要相对路径，也要相对于bundler这个项目，打包才不会有问题。解决这个问题，引入node的另外一个核心模块，叫做path

const fs = require('fs'); // 帮助我们获取一些文件的信息
const path = require('path'); // 打包的时候需要绝对路径，借助path这个模块
const parser = require('@babel/parser'); // 帮助我们分析代码，引入的文件
const traverse = require('@babel/traverse').default;// 因为是export出来的内容，必须加一个default属性才可以
 

// 分析模块
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);
　　　　　　// 对这个文件夹的路径进行一个转化,将引入的模块转化成绝对路径
　　　　　　const newFile = path.join(dirname, node.source.value);
　　　　　　console.log(newFile);
　　　　　　dependencies.push(node.source.value);
　　　　}
　　});
}
 

moduleAnalyser('./src/index.js');

 这个时候打印出来的就是引入的模块的绝对路径。入口文件和相对应的依赖，都可以分析出来了。但是我们的代码，浏览器还是不支持的，需要借助babel去解析我们es6的代码。

安装 

npm install @babel/core --save

这是babel的核心模块

 

bundler.js

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 moduleInfo = moduleAnalyser('./src/index.js');
console.log(moduleInfo);

这个时候就分析好了文件该有的内容，入口文件，对应的依赖，翻译好的代码。那么接下来就是分析其他的文件