帶你揭開神秘的Javascript AST面紗之Babel AST 四件套的使用方法

来源:https://www.cnblogs.com/Jcloud/archive/2023/04/12/17308807.html
-Advertisement-
Play Games

作者：京東零售 周明亮 寫在前面 這裡我們初步提到了一些基礎概念和應用： 分析器 抽象語法樹 AST AST 在 JS 中的用途 AST 的應用實踐 有了初步的認識，還有常規的代碼改造應用實踐，現在我們來詳細說說使用 AST， 如何進行代碼改造？ Babel AST 四件套的使用方法 其實在解析 A ...


作者：京東零售 周明亮

寫在前面

這裡我們初步提到了一些基礎概念和應用：

  • 分析器
  • 抽象語法樹 AST
  • AST 在 JS 中的用途
  • AST 的應用實踐

有了初步的認識，還有常規的代碼改造應用實踐，現在我們來詳細說說使用 AST， 如何進行代碼改造？

Babel AST 四件套的使用方法

其實在解析 AST 這個工具上，有很多可以使用，上文我們已經提到過了。對於 JS 的 AST 大家已經形成了統一的規範命名，唯一不同的可能是，不同工具提供的詳細程度不一樣，有的可能會額外提供額外方法或者屬性。

所以，在選擇工具上，大家按照各自喜歡選擇即可，這裡我們選擇了babel這個老朋友。

初識 Babel

我相信在這個前端框架頻出的時代，應該都知道babel的存在。 如果你還沒聽說過babel，那麼我們通過它的相關文檔，繼續深入學習一下。

因為，它在任何框架裡面，我們都能看到它的影子。

  • Babel JS 官網
  • Babel JS Github

作為使用最廣泛的 JS 編譯器，他可以用於將採用 ECMAScript 2015+ 語法編寫的代碼轉換為向後相容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。

而它能夠做到向下相容或者代碼轉換，就是基於代碼解析和改造。接下來，我們來說說：如何使用@babel/core裡面的核心四件套：@babel/parser、@babel/traverse、@babel/types及@babel/generator。

1. @babel/parser

@babel/parser 核心代碼解析器，通過它進行詞法分析及語法分析過程，最終轉換為我們提到的 AST 形式。

假設我們需要讀取React中index.tsx文件中代碼內容，我們可以使用如下代碼：

const { parse } = require("@babel/parser")

// 讀取文件內容
const fileBuffer = fs.readFileSync('./code/app/index.tsx', 'utf8');
// 轉換位元組 Buffer
const fileCode = fileBuffer.toString();
// 解析內容轉換為 AST 對象
const codeAST = parse(fileCode, {
  // parse in strict mode and allow module declarations
  sourceType: "module",
  plugins: [
    // enable jsx and typescript syntax
    "jsx",
    "typescript",
  ],
});

當然我不僅僅只讀取React代碼，我們甚至可以讀取Vue語法。它也有對應的語法分析器，比如：@vue/compiler-dom。

此外，通過不同的參數傳入 options，我們可以解析各種各樣的代碼。如果，我們只是讀取普通的.js文件，我們可以不使用任何插件屬性即可。

const codeAST = parse(fileCode, {
  // parse in strict mode and allow module declarations
  sourceType: "module"
});

通過上述的代碼轉換，我們就可以得到一個標準的 AST 對象。在上一篇文章中，已做詳細分析，在這裡不在展開。比如：

// 原代碼
const me = "我"
function write() {
  console.log("文章")
}

// 轉換後的 AST 對象
const codeAST = {
  "type": "File",
  "errors": [],
  "program": {
    "type": "Program",
    "sourceType": "module",
    "interpreter": null,
    "body": [
      {
        "type": "VariableDeclaration",
        "declarations": [
          {
            "type": "VariableDeclarator",
            "id": {
              "type": "Identifier",
              "name": "me"
            },
            "init": {
              "type": "StringLiteral",
              "extra": {
                "rawValue": "我",
                "raw": "\"我\""
              },
              "value": "我"
            }
          }
        ],
        "kind": "const"
      },
      {
        "type": "FunctionDeclaration",
        "id": {
          "type": "Identifier",
          "name": "write"
        },
        "generator": false,
        "async": false,
        "params": [],
        "body": {
          "type": "BlockStatement",
          "body": [
            {
              "type": "ExpressionStatement",
              "expression": {
                "type": "CallExpression",
                "callee": {
                  "type": "MemberExpression",
                  "object": {
                    "type": "Identifier",
                    "computed": false,
                    "property": {
                      "type": "Identifier",
                      "name": "log"
                    }
                  },
                  "arguments": [
                    {
                      "type": "StringLiteral",
                      "extra": {
                        "rawValue": "文章",
                        "raw": "\"文章\""
                      },
                      "value": "文章"
                    }
                  ]
                }
              }
            }
          ]
        }
      }
    ]
  }
}

2. @babel/traverse

當我們拿到一個標準的 AST 對象後，我們要操作它，那肯定是需要進行樹結構遍歷。這時候，我們就會用到 @babel/traverse 。

比如我們得到 AST 後，我們可以進行遍歷操作：

const { default: traverse } = require('@babel/traverse');

// 進入結點
const onEnter = pt => {
   // 進入當前結點操作
   console.log(pt)
}
// 退出結點
const onExit = pe => {
  // 退出當前結點操作
}
traverse(codeAST, { enter: onEnter, exit: onExit })

那麼我們訪問的第一個結點，列印出pt的值，是怎樣的呢？

// 已省略部分無效值
<ref *1> NodePath {
  contexts: [
    TraversalContext {
      queue: [Array],
      priorityQueue: [],
      ...
    }
  ],
  state: undefined,
  opts: {
    enter: [ [Function: onStartVist] ],
    exit: [ [Function: onEndVist] ],
    _exploded: true,
    _verified: true
  },
  _traverseFlags: 0,
  skipKeys: null,
  parentPath: null,
  container: Node {
    type: 'File',
    errors: [],
    program: Node {
      type: 'Program',
      sourceType: 'module',
      interpreter: null,
      body: [Array],
      directives: []
    },
    comments: []
  },
  listKey: undefined,
  key: 'program',
  node: Node {
    type: 'Program',
    sourceType: 'module',
    interpreter: null,
    body: [ [Node], [Node] ],
    directives: []
  },
  type: 'Program',
  parent: Node {
    type: 'File',
    errors: [],
    program: Node {
      type: 'Program',
      sourceType: 'module',
      interpreter: null,
      body: [Array],
      directives: []
    },
    comments: []
  },
  hub: undefined,
  data: null,
  context: TraversalContext {
    queue: [ [Circular *1] ],
    priorityQueue: [],
    ...
  },
  scope: Scope {
    uid: 0,
    path: [Circular *1],
    block: Node {
      type: 'Program',
      sourceType: 'module',
      interpreter: null,
      body: [Array],
      directives: []
    },
    ...
  }
}

是不是發現，這一個遍歷怎麼這麼多東西？太長了，那麼我們進行省略，只看關鍵部分：

// 第1次
<ref *1> NodePath {
  listKey: undefined,
  key: 'program',
  node: Node {
    type: 'Program',
    sourceType: 'module',
    interpreter: null,
    body: [ [Node], [Node] ],
    directives: []
  },
  type: 'Program',
}

我們可以看出是直接進入到了程式program結點。 對應的 AST 結點信息：

  program: {
    type: 'Program',
    sourceType: 'module',
    interpreter: null,
    body: [
      [Node]
      [Node]
    ],
  },

接下來，我們繼續列印輸出的結點信息，我們可以看出它訪問的是program.body結點。

// 第2次
<ref *2> NodePath {
  listKey: 'body',
  key: 0,
  node: Node {
    type: 'VariableDeclaration',
    declarations: [ [Node] ],
    kind: 'const'
  },
  type: 'VariableDeclaration',
}

// 第3次
<ref *1> NodePath {
  listKey: 'declarations',
  key: 0,
  node: Node {
    type: 'VariableDeclarator',
    id: Node {
      type: 'Identifier',
      name: 'me'
    },
    init: Node {
      type: 'StringLiteral',
      extra: [Object],
      value: '我'
    }
  },
  type: 'VariableDeclarator',
}

// 第4次
<ref *1> NodePath {
  listKey: undefined,
  key: 'id',
  node: Node {
    type: 'Identifier',
    name: 'me'
  },
  type: 'Identifier',
}

// 第5次
<ref *1> NodePath {
  listKey: undefined,
  key: 'init',
  node: Node {
    type: 'StringLiteral',
    extra: { rawValue: '我', raw: "'我'" },
    value: '我'
  },
  type: 'StringLiteral',
}
  • node當前結點
  • parentPath父結點路徑
  • scope作用域
  • parent父結點
  • type當前結點類型

現在我們可以看出這個訪問的規律了，他會一直找當前結點node屬性，然後進行層層訪問其內容，直到將 AST 的所有結點遍歷完成。

這裡一定要區分NodePath和Node兩種類型，比如上面：pt是屬於NodePath類型，pt.node才是Node類型。

其次，我們看到提供的方法除了進入 [enter]還有退出 [exit]方法，這也就意味著，每次遍歷一次結點信息，也會退出當前結點。這樣，我們就有兩次機會獲得所有的結點信息。

當我們遍歷結束，如果找不到對應的結點信息，我們還可以進行額外的操作，進行代碼結點補充操作。結點完整訪問流程如下：

  • 進入>Program
    • 進入>node.body[0]
      • 進入>node.declarations[0]
        • 進入>node.id
        • 退出<node.id
        • 進入>node.init
        • 退出<node.init
      • 退出<node.declarations[0]
    • 退出<node.body[0]
    • 進入>node.body[1]
      • ...
      • ...
    • 退出<node.body[1]
  • 退出<Program

3. @babel/types

有了前面的鋪墊，我們通過解析，獲得了相關的 AST 對象。通過不斷遍歷，我們拿到了相關的結點，這時候我們就可以開始改造了。@babel/types 就提供了一系列的判斷方法，以及將普通對象轉換為 AST 結點的方法。

比如，我們想把代碼轉換為：

// 改造前代碼
const me = "我"
function write() {
  console.log("文章")
}

// 改造後的代碼
let you = "你"
function write() {
  console.log("文章")
}

首先，我們要分析下，這個代碼改了哪些內容？

  1. 變數聲明從const改為let
  2. 變數名從me改為you
  3. 變數值從"我"改為"你"

那麼我們有兩種替換方式：

  • 方案一：整體替換，相當於把program.body[0]整個結點進行替換為新的結點。
  • 方案二：局部替換，相當於逐個結點替換結點內容，即：program.body.kind,program.body[0].declarations[0].id，program.body[0].declarations[0].init。

藉助@babel/types我們可以這麼操作，一起看看區別：

const bbt = require('@babel/types');
const { default: traverse } = require('@babel/traverse');

// 進入結點
const onEnter = p => {
  // 方案一，全結點替換
  if (bbt.isVariableDeclaration(p.node) && p.listKey == 'body') {
    // 直接替換為新的結點
    p.replaceWith(
      bbt.variableDeclaration('let', [
        bbt.variableDeclarator(bbt.identifier('you'),           
        bbt.stringLiteral('你')),
      ]),
    );
  }
  // 方案二，單結點逐一替換
  if (bbt.isVariableDeclaration(p.node) && p.listKey == 'body') {
    // 替換聲明變數方式
    p.node.kind = 'let';
  }
  if (bbt.isIdentifier(p.node) && p.node.name == 'me') {
    // 替換變數名
    p.node.name = 'you';
  }
  if (bbt.isStringLiteral(p.node) && p.node.value == '我') {
    // 替換字元串內容
    p.node.value = '你';
  }  
};
traverse(codeAST, { enter: onEnter });

我們發現，不僅可以進行整體結點替換，也可以替換屬性的值，都能達到預期效果。

當然 我們不僅僅可以全部遍歷，我們也可以只遍歷某些屬性，比如VariableDeclaration，我們就可以這樣進行定義:

traverse(codeAST, { 
  VariableDeclaration: function(p) {
    // 只操作類型為 VariableDeclaration 的結點
    p.node.kind = 'let';
  }
});

@babel/types提供大量的方法供使用，可以通過官網查看。對於@babel/traverse返回的可用方法，可以查看 ts 定義：
babel__traverse/index.d.ts 文件。

常用的方法：p.stop()可以提前終止內容遍歷， 還有其他的增刪改查方法，可以自己慢慢摸索使用！它就是一個樹結構，我們可以操作它的兄弟結點，父節點，子結點。

4. @babel/generator

完成改造以後，我們需要把 AST 再轉換回去，這時候我們就需要用到 @babel/generator 工具。只拆不組裝，那是二哈【狗頭】。能裝能組，才是一個完整工程師該乾的事情。

廢話不多說，上代碼：

const fs = require('fs-extra');
const { default: generate } = require('@babel/generator');

// 生成代碼實例
const codeIns = generate(codeAST, { retainLines: true, jsescOption: { minimal: true } });

// 寫入文件內容
fs.writeFileSync('./code/app/index.js', codeIns.code);

配置項比較多，大家可以參考具體的說明，按照實際需求進行配置。

這裡特別提一下：jsescOption: { minimal: true }這個屬性，主要是用來保留中文內容，防止被轉為unicode形式。

Babel AST 實踐

嘿嘿～ 都到這裡了，大家應該已經能夠上手操作了吧！

什麼？還不會，那再把 1 ～ 4 的步驟再看一遍。慢慢嘗試，慢慢修改，當你發現其中的樂趣時，這個 AST 的改造也就簡單了，並不是什麼難事。

留個課後練習：

// 改造前代碼
const me = "我"
function write() {
  console.log("文章")
}

// 改造後的代碼
const you = "你"
function write() {
  console.log("文章")
}
console.log(you, write())

大家可以去嘗試下，怎麼操作簡單的 AST 實現代碼改造！寫文章不易，大家記得一鍵三連哈～

AST 應用是非常廣泛，再來回憶下，這個 AST 可以幹嘛？

  1. 代碼轉換領域，如：ES6 轉 ES5， typescript 轉 js，Taro 轉多端編譯，CSS預處理器等等。
  2. 模版編譯領域，如：React JSX 語法，Vue 模版語法 等等。
  3. 代碼預處理領域，如：代碼語法檢查（ESLint），代碼格式化（Prettier），代碼混淆/壓縮（uglifyjs） 等等
  4. 低代碼搭建平臺，拖拽組件，直接通過 AST 改造生成後的代碼進行運行。

下一期預告

《帶你揭開神秘的Javascript AST面紗之手寫一個簡單的 Javascript 編譯器》


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 基於chunjun純鈞的增量數據同步問題排查【博客園-實習小生】
    ☞ 商品介面的定義 價格、庫存量、發貨地點等。此外，它還可以提供商品的詳細信息，包括商品的圖片、詳細描述、規格參數、售後服務等。這些信息可以幫助用戶更好地瞭解商品，從而更好地選擇商品。 其次，電商平臺商品詳情介面的實現原理是基於RESTful API。RESTful API是一種基於HTTP協議的A ...
  • 數據開發提效有秘訣！離線開發BatchWorks 六大典型場景拆解
    回顧大數據的發展歷程，一句話概括就是海量數據的高效處理。在當今快節奏、不斷變化的市場環境下，優秀的開發效率已經成為企業數字化轉型的必備條件。 數棧離線開發BatchWorks 是一款專註離線數據ELT開發的產品，採用先進的大數據生態底層技術，具備高性能且功能豐富的大數據處理能力，對大數據離線計算、數 ...
  • 活動 | GreatSQL社區亮相2023 DTC 分享開源技術成果實踐
    4月7-8日，年度資料庫行業盛會——2023數據技術嘉年華（DTC 2023）如期而至。 此次盛會匯聚了全國各地數千名數據領域學術精英、領袖人物、技術專家、從業者和技術愛好者，共同見證行業蓬勃發展、生態融合共贏、技術迭代升級及市場風雲變遷。 GreatSQL作為萬里資料庫主導成立的開源資料庫社區，首 ...
  • ORACLE如何查看用戶管理備份與恢復的記錄
    在Oracle資料庫中，如果我們使用用戶管理備份與恢復（User-Managed Backup and Recovery）方式去備份還原資料庫的話，如何獲取用戶管理備份與恢復的記錄信息呢？例如，我要查看某個資料庫實例做用戶管理備份的記錄。一般使用下麵腳本。似乎用戶管理備份比較“簡單”，目前我查了相關 ...
  • Redis - 底層數據結構
    Redis 構造了多種底層數據結構供使用，不同的數據類型有可能使用到多種底層數據結構存儲，因此，需要理解為何 Redis 會有這樣的設計，理解每個底層數據結構的概念之後，就能知曉在極端性能上如何做取捨。 ...
  • 新人必看| 移動端“動態化”是什麼意思？
    蘋果在iOS16.1系統對第三方開放了靈動島的API，並允許開發者基於靈動島開發相應軟體，越來越多的APP開始基於靈動島的交互進行設計和開發，本文將簡單介紹靈動島開發的流程和將其與業務場景相結合的思考。 ...
  • 【D01】Django中實現帶進度條的倒計時功能（簡易版）
    首先說明簡易版是只有一個 倒計時 和一個 進度條，頁面載入後自動開始計時，下次計時需要手動刷新頁面。 後續會更新實現完整的倒計時功能的文章 前期準備 前端框架 你需要準備一些前端框架：Bootstrap4 和 jQuery 安裝方法請自行查閱官方文檔或教程 Bootstrap4：https://v4 ...
  • 記錄-vue項目中使用PWA
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言： 梳理了一下項目中的PWA的相關用法，下麵我會正對vue2和vue3的用法進行一些教程示例，引入離線緩存機制，即使你斷網，也能訪問頁面。一旦用戶訪問了我們的網頁，我們就像牛皮糖一樣粘連著他，他永遠都可以訪問，即使斷網也能訪問。有一天 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類