深入了解抽象語法樹(AST)及其在使用工具和庫中的應用

在本文中，我們將深入了解抽象語法樹(AST)及其在日常工作中使用的工具和庫中的應用。我們更感興趣的是AST的實際使用和應用，而不是編譯器、解析器等編程語言開發工具的晦澀學術理論。

這是一系列文章中的第一篇，該文章探討了Freshworks的前端開發人員構建和使用的各種AST工具來執行大量活動，例如大規模代碼遷移、重構等。

AST 探索者

有一個在線工具可以探索由各種語言解析器生成的AST，稱為ASTExplorer，由Facebook的工程師構建。它支持多種語言和解析器。您可以輸入代碼并獲取它表示的AST格式，并在同一瀏覽器窗口中檢查節點和數據。您還可以編寫轉換函數，這將幫助您使用AST更改或重構代碼。對于任何想要了解AST并在其幫助下創建工具的人來說，這是學習和使用AST的最佳工具。

為什么AST對工具很重要？

抽象語法樹是任何語言開發工具的構建塊，因為它們是有效操作源代碼的可擴展手段。通過將代碼表示為樹狀結構，您可以利用樹數據結構附帶的所有有效操作機制。它比處理以文本片段或字符串表示形式表示的源代碼要快得多。這是因為如果您想對源代碼進行高級和復雜的操作，那么使用純字符串和字符序列將是一場噩夢。如果您希望有一個方便的表示來對您的代碼進行更改而不會產生意想不到的后果和副作用，那么AST是最好的表示。將源代碼轉換為抽象語法樹格式后，

這就是為什么所有語言標準都默認帶有AST規范的原因。該語言本身具有用于創建、轉換和使用AST的內置API。除此之外，總會有外部工具和庫使使用AST成為一項方便而輕松的任務。

那么我們實際上在哪里使用AST呢？簡而言之，它在工具和庫的Javascript生態系統中無處不在。從這個列表中可以看出，如果沒有AST，則根本不可能為Javascript項目提供工具。

語法高亮

代碼完成

靜態分析

代碼覆蓋率

縮小

即時編譯

源地圖

編譯成JS語言

代碼重構

代碼遷移等等。

代碼模組

在Freshworks，當我們嘗試將Ember代碼遷移到新版本時，我們首先遇到了像Codemods這樣的AST工具。Ember框架和社區本身提供了許多codemods來幫助您更輕松、更省時地進行遷移。我們已經寫了一篇關于我們如何使用Codemods來遷移我們的代碼庫的博客文章

您可能想查看它以重新了解codemod，包括為什么它們有意義，以及為什么它們應該成為您的自動遷移工具的關鍵部分。甚至諸如React、Angular和Vue之類的框架也推薦并提供codemods用于從框架的一個版本遷移到下一個版本的升級。

一旦我們開始使用Codemods進行遷移，我們的開發人員發現將他們的代碼遷移到較新版本的框架非常有用且節省時間。我們需要越來越多的codemod來解決我們的一些遷移問題。因此，我們開始探索和編寫專門解決我們自己的代碼遷移問題的codemod，但同時使codemod更加通用，以便我們可以與更大的JavaScript開發人員社區共享它們并使其開源。

但是我們的一些開發人員無法完全掌握AST等Codemod的底層架構以及Babel、recast和jscodeshift等相關工具。所以我們決定讓我們的開發人員更容易理解這一點，并減少學習的痛苦。我們圍繞AST構建了一堆工具來幫助開發人員熟悉AST和codemods。本系列博文將深入探討這些工具的內部架構和組件，從而抓住這些工具的本質和意義。

審核編輯：劉清