技术长期主义:用本分思维重构JavaScript逆向知识体系(一)Babel、AST、ES6+、ES5、浏览器环境、Node.js环境的关系和处理流程

基础不牢,地动山摇,逆向越久,越发现基础的重要性,本系列,回顾js逆向基础,让自己的知识体系更加系统化。

以下是 Babel、AST、ES6+、ES5、浏览器环境、Node.js环境 的关系和流程的详细说明及图表:


一、核心关系图表

ES6+ 代码
Babel:解析,转换,生成
AST抽象语法树:语法树操作
ES5 代码:浏览器/Node.js兼容
Polyfill如 core-js
浏览器环境
Node.js环境

二、详细流程与关系说明

1. 开发阶段:ES6+ 代码
  • 目标:开发者编写现代 JavaScript(ES6+),使用新语法(如箭头函数、classasync/await)。
  • 问题:旧浏览器(如 IE)或低版本 Node.js 无法直接运行 ES6+ 代码。
2. 构建阶段:Babel 处理
  • 步骤 1:解析(Parsing)

    • 工具@babel/parser
    • 输入:ES6+ 代码字符串。
    • 输出:生成 AST(抽象语法树),结构化表示代码逻辑。
  • 步骤 2:转换(Transformation)

    • 工具@babel/traverse + 插件(如 @babel/preset-env
    • 操作:通过访问者模式遍历 AST,修改语法节点:
      • constvar
      • 将箭头函数 → 普通函数
      • class → 原型链函数
      • 其他语法降级(如解构赋值、模板字符串)。
  • 步骤 3:生成(Generation)

    • 工具@babel/generator
    • 输入:修改后的 AST。
    • 输出:生成 ES5 代码。
  • 步骤 4:Polyfill 注入

    • 工具core-js + regenerator-runtime
    • 作用:补充 ES5 中缺失的 API(如 PromiseArray.from)。
3. 运行阶段:目标环境
  • 浏览器环境

    • 输入:转换后的 ES5 代码 + Polyfill。
    • 兼容性:确保代码在旧浏览器(如 IE 11)中运行。
    • 注意:Polyfill 需通过

你可能感兴趣的:(javascript,重构,es6)