基于AST的模拟webpack打包demo

最新推荐文章于 2023-07-15 16:51:12 发布
最新推荐文章于 2023-07-15 16:51:12 发布
阅读量570 收藏 1
点赞数
分类专栏： 前端 Nodejs 文章标签： AST node webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013455430/article/details/98040317
版权

问题提出：

现在有4个文件,文件的引用方式如下，文件中的文本内容很简单就是输出一句简单的话，需要将这四个文件打包成一个可执行的js文件。

main.js:

import './file1.js'
import './file2.js'
console.log('I am done!')

 file1:

console.log('I am file 1')

file2 :

import'./file2_1.js'
console.log('I am file 2')

file2_1 :

console.log('hi ,you get me ')

 

思路梳理:

AST作为语法结构分析的方法效果很显著，所以这里使用AST来获取每个文件中导入的文件地址，文件内容且为每一个文件编号，这里认为是将每一个文件作为一个模块，然后导出每个模块的内容，这里的导出模块需要以一个递归调用的方式逐个导出，下面的代码里会说到.

首先需要写一个获取引用文件的函数，使用的是AST方法，这里给出函数：

function createAsset(filename) {
  console.log(filename)
  //获取文件，返回值是字符串
  const content = fs.readFileSync(filename, "utf-8");

  //讲字符串为ast（抽象语法树， 这个是编译原理的知识，说得简单一点就是，可以把js文件里的代码抽象成一个对象，代码的信息会存在对象中）
  //babylon 这个工具是是负责解析字符串并生产ast。
  const ast = babylon.parse(content, {
    sourceType: "module"
  });
  // https://babeljs.io/docs/en/babel-parser#babelparserparsecode-options
  //用来存储 文件所依赖的模块，简单来说就是，当前js文件 import 了哪些文件，都会保存在这个数组里
  const dependencies = [];

  //遍历当前ast（抽象语法树）
  traverse(ast, {
    //找到有 import语法 的对应节点
    ImportDeclaration: ({ node }) => {
      //把当前依赖的模块加入到数组中，其实这存的是字符串，
      //例如 如果当前js文件 有一句 import message from './message.js'， 
      //'./message.js' === node.source.value
      dependencies.push(node.source.value);
    }
  });

  //模块的id 从0开始， 相当一个js文件 可以看成一个模块
  const id = ID++;

  //这边主要把ES6 的代码转成 ES5
  const { code } = babel.transformFromAstSync(ast, null, {
    presets: ["@babel/preset-env"]
  });
  // https://babeljs.io/docs/en/babel-preset-env#browserslist-integration
  return {
    id,
    filename,
    dependencies,
    code
  };
}

babel的每一个解析函数下面标注了链接，可以查看函数参数和使用方法

这个函数就是转换文本为AST,找到import的节点拿到文件路径，将语法树转为ES5，返回id（作为模块的id），dependencies(文件中的依赖)，code（ES5代码）

如何找到所有的引用文件

这里提供的是广度搜索的思路，采用队列的方式去遍历所有编译路径上的节点（广搜算法不懂的请自行google）

//从入口开始分析所有依赖项，形成依赖图，采用广度遍历
function createGraph(entry) {
  const mainAsset = createAsset(entry);
  
  //既然要广度遍历肯定要有一个队列，第一个元素肯定是 从 "./example/entry.js" 返回的信息
  const queue = [mainAsset];
  
  
  for (const asset of queue) {
    const dirname = path.dirname(asset.filename);
   
    //新增一个属性来保存子依赖项的数据
    //保存类似 这样的数据结构 --->  {"./message.js" : 1}
    asset.mapping = {};

    asset.dependencies.forEach(relativePath => {
      const absolutePath = path.join(dirname, relativePath);
      // console.log(dirname,relativePath,absolutePath)
      //获得子依赖（子模块）的依赖项、代码、模块id，文件名
      const child = createAsset(absolutePath);

      //给子依赖项赋值，
      asset.mapping[relativePath] = child.id;

      //将子依赖也加入队列中，广度遍历
      queue.push(child);
    });
  }
  return queue;
}

函数有个起始文件，即main.js文件路径，调用前面写的语法分析函数，获取返回的数据结构，遍历数据结构中的依赖数组，将返回的结果继续Push到队列中，这里值得注意的是新增了一个mapping的json数据结构，目的是为了后面的导出模块找到依赖的模块关系

导出模块，生成es5的可执行js文件

//根据生成的依赖关系图，生成对应环境能执行的代码，目前是生产浏览器可以执行的
function bundle(graph) {
  let modules = "";

  //循环依赖关系，并把每个模块中的代码存在function作用域里
  graph.forEach(mod => {
    modules += `${mod.id}:[
      function (require, module, exports){
        ${mod.code}
      },
      ${JSON.stringify(mod.mapping)},
    ],`;
  });
  //require, module, exports 是 cjs的标准不能再浏览器中直接使用，所以这里模拟cjs模块加载，执行，导出操作。
  const result = `
    (function(modules){
      //创建require函数， 它接受一个模块ID（这个模块id是数字0，1，2） ，它会在我们上面定义 modules 中找到对应是模块.
      function require(id){
        const [fn, mapping] = modules[id];
        function localRequire(relativePath){
          //根据模块的路径在mapping中找到对应的模块id
          return require(mapping[relativePath]);
        }
        const module = {exports:{}};
        //执行每个模块的代码。
        fn(localRequire,module,module.exports);
        return module.exports;
      }
      //执行入口文件，
      require(0);
    })({${modules}})
  `;

  return result;
}

result 由两部分组成，一部份是自己定义的函数，另一部分就是参数的传入，在自定义的函数里面会调用mapping中的数据，找到下一个参数的模块，localrequire()函数就是深度去遍历所有的依赖关系，逐个输出。

下面完整的代码

const fs = require("fs");
const path = require("path");
const babylon = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const babel = require('@babel/core');


let ID = 0;
//读取文件信息，并获得当前js文件的依赖关系
function createAsset(filename) {
  console.log(filename)
  //获取文件，返回值是字符串
  const content = fs.readFileSync(filename, "utf-8");

  //讲字符串为ast（抽象语法树， 这个是编译原理的知识，说得简单一点就是，可以把js文件里的代码抽象成一个对象，代码的信息会存在对象中）
  //babylon 这个工具是是负责解析字符串并生产ast。
  const ast = babylon.parse(content, {
    sourceType: "module"
  });
  // https://babeljs.io/docs/en/babel-parser#babelparserparsecode-options
  //用来存储 文件所依赖的模块，简单来说就是，当前js文件 import 了哪些文件，都会保存在这个数组里
  const dependencies = [];

  //遍历当前ast（抽象语法树）
  traverse(ast, {
    //找到有 import语法 的对应节点
    ImportDeclaration: ({ node }) => {
      //把当前依赖的模块加入到数组中，其实这存的是字符串，
      //例如 如果当前js文件 有一句 import message from './message.js'， 
      //'./message.js' === node.source.value
      dependencies.push(node.source.value);
    }
  });

  //模块的id 从0开始， 相当一个js文件 可以看成一个模块
  const id = ID++;

  //这边主要把ES6 的代码转成 ES5
  const { code } = babel.transformFromAstSync(ast, null, {
    presets: ["@babel/preset-env"]
  });
  // https://babeljs.io/docs/en/babel-preset-env#browserslist-integration
  return {
    id,
    filename,
    dependencies,
    code
  };
}

//从入口开始分析所有依赖项，形成依赖图，采用广度遍历
function createGraph(entry) {
  const mainAsset = createAsset(entry);
  
  //既然要广度遍历肯定要有一个队列，第一个元素肯定是 从 "./example/entry.js" 返回的信息
  const queue = [mainAsset];
  
  
  for (const asset of queue) {
    const dirname = path.dirname(asset.filename);
   
    //新增一个属性来保存子依赖项的数据
    //保存类似 这样的数据结构 --->  {"./message.js" : 1}
    asset.mapping = {};

    asset.dependencies.forEach(relativePath => {
      const absolutePath = path.join(dirname, relativePath);
      // console.log(dirname,relativePath,absolutePath)
      //获得子依赖（子模块）的依赖项、代码、模块id，文件名
      const child = createAsset(absolutePath);

      //给子依赖项赋值，
      asset.mapping[relativePath] = child.id;

      //将子依赖也加入队列中，广度遍历
      queue.push(child);
    });
  }
  return queue;
}

//根据生成的依赖关系图，生成对应环境能执行的代码，目前是生产浏览器可以执行的
function bundle(graph) {
  let modules = "";

  //循环依赖关系，并把每个模块中的代码存在function作用域里
  graph.forEach(mod => {
    modules += `${mod.id}:[
      function (require, module, exports){
        ${mod.code}
      },
      ${JSON.stringify(mod.mapping)},
    ],`;
  });
  //require, module, exports 是 cjs的标准不能再浏览器中直接使用，所以这里模拟cjs模块加载，执行，导出操作。
  const result = `
    (function(modules){
      //创建require函数， 它接受一个模块ID（这个模块id是数字0，1，2） ，它会在我们上面定义 modules 中找到对应是模块.
      function require(id){
        const [fn, mapping] = modules[id];
        function localRequire(relativePath){
          //根据模块的路径在mapping中找到对应的模块id
          return require(mapping[relativePath]);
        }
        const module = {exports:{}};
        //执行每个模块的代码。
        fn(localRequire,module,module.exports);
        return module.exports;
      }
      //执行入口文件，
      require(0);
    })({${modules}})
  `;

  return result;
}

const graph = createGraph("./main.js");
// console.log(graph)
const ret = bundle(graph);

// 打包生成文件
 fs.writeFileSync("./bundle.js", ret);

生成的文件代码


    (function(modules){
      //创建require函数， 它接受一个模块ID（这个模块id是数字0，1，2） ，它会在我们上面定义 modules 中找到对应是模块.
      function require(id){
        const [fn, mapping] = modules[id];
        // fn是function (require, module, exports)
        // console.log(String(fn))
        function localRequire(relativePath){
          //这里使用深度查找的方式
          console.log(relativePath)
          //根据模块的路径在mapping中找到对应的模块id
          return require(mapping[relativePath]);
        }
        const module = {exports:{}};
        //执行每个模块的代码。
        fn(localRequire,module,module.exports);
        // console.log(localRequire,module.exports)
        return module.exports;
      }
      //执行入口文件，
      require(0);
    })({0:[
      function (require, module, exports){
        "use strict";

require("./file1.js");

require("./file2.js");

console.log('I am ready!');
      },
      {"./file1.js":1,"./file2.js":2},
    ],1:[
      function (require, module, exports){
        "use strict";

console.log('I am file 1');
      },
      {},
    ],2:[
      function (require, module, exports){
        "use strict";

require("./file2_1.js");

console.log('I am file 2');
      },
      {"./file2_1.js":3},
    ],3:[
      function (require, module, exports){
        "use strict";

console.log('hi ,you get me ');
      },
      {},
    ],})

 

The Dark Kinght
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js逆向 webpack_JS逆向:Webpack打包后的代码怎么搞？猿人学爬虫比赛第十六题详细题解...
weixin_30497687的博客
02-06 421
抓包分析地址栏输入 地址，按下F12并回车，发现数据在这里: 查看cookie，无加密相关的字段。请求的接口倒是有个m的加密参数，看来这题的主要目的就是看看m参数怎么进行加密的吧。切换 Initiator,这请求也太明显了，点击下面所示的js文件: 跟进去并美化后，来到这里: 不用过多分析，m加密在这里:1. r.m = n[e(528)](btoa, p_s),2. r.t = p_s;而...
AST介绍和babel插件开发
郊眠寺
05-20 613
babel是个js编译器，写babel插件其实就是操作ast。 我们日常项目中使用ast的场景很多，比如eslint, codemods, css parsers, css in js等等，不同的工具的ast解析规则可能稍有区别，这里以babel的规范为主。 ast介绍 ast的定义如下 An abstract syntax tree is a tree representation of source code written in a programming language. Each node o
JS逆向之Webpack自吐
qq_15326513的博客
07-15 2737
在这篇文章里面，我们重新利用两个方法来实现扣出代码优化代码。webpack自吐所有方法和webpack精减代码法。把这两个方法结合起来使用。一、Webpack是什么？？webpack是一个基于模块化的打包（构建）工具, 它把一切都视作模块.概念：webpack是 JavaScript 应用程序的模块打包器,可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
JS逆向 webpack解密
lmttlw的博客
11-18 3638
JS webpack解密 ，这个网站很坑，那个验证字段搜不到，XHR断点也断不到，就很奇怪，不过竟然我敢写这篇文章，就代表我是过了的。
webpack-AST剖析
莫兮的博客
04-15 1043
webpack-AST 目录 文章目录前言推荐阅读拆解函数`AST`工具 - `recast`制作模具 - `recast.types.builders`如何改装实战 - 命令行修改`js`文件`recast.visit` - `AST`节点遍历`TNT` - 判断`AST`对象类型`AST`修改源码，导出全部方法`Builder`实现一个箭头函数`exportific`前端工具使用`NPM`发包 前言 抽象语法树(AST)，是一个非常重要的知识 JavaScript的语言精髓 可以制作Vue, Rea
ast自动扣webpack脚本实战
zjq592767809的博客
01-07 6764
ast自动扣webpack脚本实战webpack是什么前置阅读webpack自动扣代码脚本实战内容 webpack是什么 webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，通俗来讲，我的理解就是把你在加解密过程中要调用的模块打包成为一个JS文件，然后引入它，自动展现出你要引入的资源。可能我这里说的不是很清楚，可以推荐一篇文章：https://www.cnblogs.com/Eeyhan/p/10584014.html 前置阅读 本文章主要是讲述脚本的
webpack 构建demo 深层打包
08-31
在这个"webpack 构建demo 深层打包"中，我们将深入探讨Webpack的构建流程以及如何处理深层打包。 ### 一、Webpack 基础概念 1. **模块**：Webpack 视任何可以导入的东西为模块，包括JavaScript文件、图片、样式...
webpack （打包react)基本demo
03-27
本文件是为了配合webpack2 打包 react 这篇博文路径教程的 demo文件： http://blog.csdn.net/xuelang532777032/article/details/66969574 方便各位同学下下来学习webpack 打包 react 。
webpack打包的react案例demo.rar
06-13
在本文中，我们将深入探讨如何使用Webpack打包React应用，基于提供的"webpack打包的react案例demo.rar"。这个压缩包包含了经过Webpack打包后的项目文件（dist）以及开发过程中所需的依赖库（node_modules）。让我们...
Webpack打包慢问题的完美解决方法
08-31
Webpack 打包慢问题的完美解决方法 在使用 Webpack 打包项目时，经常会遇到打包速度慢的问题，这是因为 Webpack 需要处理大量的模块，从而导致打包速度慢。为了解决这个问题，我们需要了解 Webpack 的工作原理和...
解决vue+webpack打包路径的问题
08-27
在开发Vue.js应用程序时，通常会使用Webpack进行模块打包。然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解...
ast-demo
03-31
阿斯特·德莫 此示例测试使用Eclipse JDT库，通过使用简单版本的AST API（不带ASTRewrite）以编程方式创建Java类。 它还创建一个Java源文件来存储新创建的类，并使用Reflection API动态加载该类，运行一种方法来验证成功的编译并使测试更加彻底
AST_demo:利用JavaParser框架在编译时修改语法树（源码）的demo-修改
03-24
本示例展示了如下功能： 1，删除方法中的打印日志代码。 2，删除指定的方法和成员变量。 3，检测方法中是否有新的线程代码。 4，生成新的类和方法。并在运行时验证。 5，解析类文件：MainActivity.java，并在打印输出类信息。 6，修改类中的方法。将结果保存在工程目录下的/ output中。 7，在现有类中生成一个方法，并在运行时验证。 环境： gradle4.1 classpath 'com.android.tools.build:gradle:3.0.1' 1，删除类方法中的日志：Log.xxxx System.out.xxx 2，删除指定的方法和成员变量 //过滤如下 成员变量 和 方法 public void test() public int test(int a) String abc String def 3
19.重学webpack——原理之AST抽象语法树
2024路在何方
08-03 1313
【重学webpack系列——webpack5.0】 1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。 从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。 可以点击上方专栏订阅哦。 以下是本节正文： ast语法树(会有专门章节详细介绍AST，本节只是了解大概过程)在我们工作中经常会用到，比如以下场景： 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全
java代码编译时修改行为_GitHub - niuzhihua/AST_demo: 利用JavaParser框架在编译时修改语法树（源码）的 demo...
weixin_30611667的博客
02-28 481
本例子展示了如下功能：1、删除方法中的 打印日志代码。2、删除指定的 方法 和 成员变量。3、检测方法中 是否有 new Thread 代码。4、生成新的类和方法。并在运行时验证。5、解析 类文件： MainActivity.java ， 并在打印输出类信息。6、修改类中的方法。 将结果保存在工程目录下的 /output 中。7、在现有类 中生成一个方法 ，并在运行时验证。环境：gradle...
AST实现函数错误的自动上报(原理到实践)
油墨香^-^的博客
09-23 326
在错误监控中，如何能实现自动为函数自动添加错误捕获。今天我们来聊一聊技术如何实现。先讲原理：在代码编译时，利用 babel 的 loader，劫持所有函数表达。然后利用AST（抽象语法树）修改函数节点，在函数外层包裹 try/catch。然后在 catch 中使用 sdk 将错误信息在运行时捕获上报。如果你对编译打包感兴趣，那么本文就是为你准备的。本文涉及以下知识点：[x] AST[x] npm 包开发[x] Babel。
手写一个webpack，看看AST怎么用
程序员成长指北
02-13 735
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群本文开始我会围绕webpack和babel写一系列的工程化文章，这两个工具我虽然天天用...
【Groovy】编译时元编程 ( 编译 ASTTransformation | 打包 ASTTransformation 字节码文件 | 编译 Groovy 类同进行编译时处理 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-07 947
一、编译 ASTTransformation、 二、打包 ASTTransformation 字节码文件、 三、编译 Groovy 类同进行编译时处理、
webpack源码之ast简介
weixin_33751566的博客
04-04 679
什么是AST 树是一种重要的数据结构,由根结点和若干颗子树构成的。 根据结构的不同又可以划分为二叉树,trie树,红黑树等等。今天研究的对象是AST,抽象语法树,它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。通过操作这棵树,可以精准的定位到声明、赋值、运算语句,从而实现对代码的分析、优化、变更等操作。 AS...
ast webpack
最新发布
09-16
AST（Abstract Syntax Tree，抽象语法树）是一种数据结构，它代表了程序代码的抽象语法结构。在Web开发中，AST通常用于解析和转换JavaScript代码。 Webpack是一个现代化的前端构建工具，它可以将多个模块打包成一个或多个捆绑包，以便在浏览器中使用。Webpack使用AST来分析JavaScript代码的依赖关系，并根据配置文件中的规则进行模块的加载、转换和打包。 在给定的引用中，AST被用于解析JavaScript代码，并使用babel-traverse进行转换。通过解析和转换代码，可以实现Webpack中的别名功能。别名允许您在导入模块时使用简短的路径，而不是完整的相对路径。 通过使用AST和相关的工具库，如babylon、babel-traverse和babel-generator，您可以遍历代码的AST，并对其进行修改。在这个例子中，通过遍历AST并转换导入模块的路径，从而实现了别名的功能。 所以，AST在Webpack中的作用是解析和转换JavaScript代码，以及实现别名功能。它帮助Webpack分析代码的依赖关系，并进行必要的模块加载和转换。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值