经过bundler学习webpack模块依赖分析
你知道webpack是如何分析模块各个依赖关系的？是如何将ES6代码编译成浏览器可执行代码的吗？node
项目初始化
- 建立文件夹
mkdir bundler
cd bundler
复制代码
- 建立相关文件 在bundler中建立src文件夹，在src文件夹新建index.js,message.js,word.js。文件内容以下：
// word.js
export const word="word";
// message.js
import {word} from "./word.js";
const message=`hello ${word}`;
export default message;
// index.js
import message from "./message.js";
console.log(message);
复制代码
若是想直接在浏览器中运行index.js的话，固然是不能的，浏览器没法识别es6的语法，之前咱们都是经过相似webpack的打包工具将es6代码转换成es5的代码，而后直接在浏览器中运行。webpack
入口文件依赖分析
在项目根目录下新建一个bundler文件，实现打包过程。其实所谓的webpack编译打包就是经过一些特定的方法函数将源代码转换成浏览器可识别的代码es6
- 定义一个模块分析函数
const moduleAnalyser=(filename)=>{
}
moduleAnalyser("./src/index.js");// 入口函数
复制代码
- 读取文件内容 这里使用了node中的一个核心模块fs。
const fs=require("fs");
const moduleAnalyser=(filename)=>{
const content=fs.readFileSync(filename,"utf-8");// 读取文件内容
console.log(content);
}
moduleAnalyser("./src/index.js");// 入口函数
复制代码
在终端中执行node命令web
node bundler.js
复制代码
就会输出index.js的文件内容 npm
- 解析文件依赖
（1）执行npm init -y初始化数组
（2）安装一个babel模块浏览器
npm install @babel/parser --save
复制代码
（3）使用parserbash
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"
}));
}
moduleAnalyser("./src/index.js");// 入口函数
复制代码
再次执行node命令，node bundler.js，查看文件内容,输出的就是常说的AST,描述了文件的相关依赖关系。 babel
修改一下bundler函数
...
const ast=parser.parse(content,{
sourceType:"module"
})
console.log(ast.program.body);
...
复制代码
执行node bundler.js命令就会获得以下输出内容
（4）安装模块
npm install @babel/traverse --save
复制代码
（5）使用traverse
...
traverse(ast,{
ImportDeclaration({node}){
console.log(node)// 查看node内容
}
})
...
复制代码
继续改写bundler.js
const dependencies=[];
traverse(ast,{
ImportDeclaration({node}){
dependencies.push(node.source.value);
}
})
console.log(dependencies)// 获得依赖数组
复制代码
继续改写bundler.js
const dependencies={};// 变成对象，key是依赖路径，value是相对依赖路径。便于以后使用
traverse(ast,{
ImportDeclaration({node}){
const dirname=path.dirname(filename);//filename对应的文件夹路径
const newFile="./"+path.join(dirname,node.source.value);
dependencies[node.source.value]=newFile;
}
})
复制代码
（6）安装babel/core转换代码
npm install @babel/core @babel/preset-env --save
复制代码
（7）转换代码
const { code }=babel.transformFromAst(ast,null,{
presets:["@babel/preset-env"]
})//转换ast
console.log(code);
复制代码
执行node bundler.js命令就会获得以下输出内容
入口文件的依赖分析就完成了。完整代码以下：
const fs=require("fs");
const path=require("path");
const babel=require("@babel/core");
const parser=require("@babel/parser");
const traverse=require("@babel/traverse").default;// 默认es module导出
const moduleAnalyser=(filename)=>{
const content=fs.readFileSync(filename,"utf-8");// 读取文件内容
const ast=parser.parse(content,{
sourceType:"module"
})
const dependencies={};
traverse(ast,{
ImportDeclaration({node}){
const dirname=path.dirname(filename);//filename对应的文件夹路径
const newFile="./"+path.join(dirname,node.source.value);
dependencies[node.source.value]=newFile;
}
})
const { code } = babel.transformFromAst(ast,null,{
presets:["@babel/preset-env"]
})//转换ast
return {
filename,
dependencies,
code
}
}
const moduleInfo=moduleAnalyser("./src/index.js");// 入口函数
console.log(moduleInfo);
复制代码
构建依赖图谱
一个项目不可能只有一个文件，这就须要咱们分析整个项目的依赖关系，即生成获得依赖图谱。
- 定义生成依赖图谱方法
const makeDependenciesGraph=(entry)=>{
const entryModule=moduleAnalyser(entry);
console.log(entryModule);
}
复制代码
- 从入口开始，循环递归分析依赖关系
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);
}
复制代码
执行node bundler.js命令就会获得以下输出内容
- 生成依赖图谱graph对象，完整代码以下：
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
}
});
return graph;
}
复制代码
生成浏览器可识别代码
const generateCode=(entry)=>{
const graph=JSON.stringify(makeDependenciesGraph(entry));
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})
`;
}
复制代码
执行node bundler.js命令就会获得以下输出内容
bundler文件完整代码：
const fs=require("fs");
const path=require("path");
const babel=require("@babel/core");
const parser=require("@babel/parser");
const traverse=require("@babel/traverse").default;// 默认es module导出
const moduleAnalyser=(filename)=>{
const content=fs.readFileSync(filename,"utf-8");// 读取文件内容
const ast=parser.parse(content,{
sourceType:"module"
})
const dependencies={};
traverse(ast,{
ImportDeclaration({node}){
const dirname=path.dirname(filename);//filename对应的文件夹路径
const newFile="./"+path.join(dirname,node.source.value);
dependencies[node.source.value]=newFile;
}
})
const { code }=babel.transformFromAst(ast,null,{
presets:["@babel/preset-env"]
})//转换ast
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]))
}
}
}
// 转换为对象 便于使用
const graph={}
graphArray.forEach(item=>{
graph[item.filename]={
dependencies:item.dependencies,
code:item.code
}
});
return graph;
}
const generateCode=(entry)=>{
const graph=JSON.stringify(makeDependenciesGraph(entry));
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);
复制代码
以上就是一个webpack代码转换编译的整个过程。继续学习中！
参考资料
相关文章
- 1. Android 经过 APT 解耦模块依赖
- 2. webpack如何查找模块依赖
- 3. webpack打包结果依赖分析
- 4. webpack-bundle-analyzer 模块分析
- 5. Maven依赖分析
- 6. Angular JS的模块依赖
- 7. jetty7模块依赖关系
- 8. Maven多模块依赖
- 9. maven 依赖模块 eclipse
- 10. webpack 依赖管理
- 更多相关文章...
- • Maven 依赖管理 - Maven教程
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里云，牛客助您找到心仪好工作
- 2. 解决jdbc(jdbctemplate)在测试类时不报错在TomCatb部署后报错
- 3. 解决PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE无法输入中文
- 4. vue+ant design中关于图片请求不显示的问题。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解决IDEA用Maven创建的Web工程不能创建Java Class文件的问题
- 7. [已解决] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea让java文件夹正常使用
- 9. Eclipse启动提示“subversive connector discovery”
- 10. 帅某-技巧-快速转帖博主文章（article_content）
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Android 经过 APT 解耦模块依赖
- 2. webpack如何查找模块依赖
- 3. webpack打包结果依赖分析
- 4. webpack-bundle-analyzer 模块分析
- 5. Maven依赖分析
- 6. Angular JS的模块依赖
- 7. jetty7模块依赖关系
- 8. Maven多模块依赖
- 9. maven 依赖模块 eclipse
- 10. webpack 依赖管理