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

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

AST 探索者

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

為什么AST對工具很重要？

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

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

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

語法高亮

代碼完成

靜態(tài)分析

代碼覆蓋率

縮小

即時編譯

源地圖

編譯成JS語言

代碼重構

代碼遷移等等。

代碼模組

在Freshworks，當我們嘗試將Ember代碼遷移到新版本時，我們首先遇到了像Codemods這樣的AST工具。Ember框架和社區(qū)本身提供了許多codemods來幫助您更輕松、更省時地進行遷移。我們已經(jīng)寫了一篇關于我們?nèi)绾问褂肅odemods來遷移我們的代碼庫的博客文章

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

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

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

審核編輯：劉清