通過構建自己的Babel插件來了解AST

使用Babel插件為JavaScript添加默認不變數據

本文探討如何編寫Babel插件，為JavaScript默認添加不可變數據。文章深入講解了抽象語法樹（AST）的概念及其在Babel插件中的作用，並通過逐步的代碼示例，演示瞭如何構建一個將普通對象和數組字面量轉換為Mori庫中持久化數據結構的Babel插件。

核心要點：

• Babel插件通過操作抽象語法樹（AST）來轉換JavaScript代碼，允許開發者為JavaScript添加諸如不可變數據結構之類的功能。
• AST對於理解代碼的結構和語法表示至關重要，這對於代碼轉換和代碼風格檢查等任務必不可少。
• 創建Babel插件涉及將代碼解析為AST，遍歷並可能修改此AST，然後將修改後的代碼生成回標準JavaScript格式。
• 使用AST Explorer等在線工具，開發者可以可視化AST，從而幫助開發和調試Babel插件。
• 本教程演示了構建Babel插件的實際步驟，從設置開發環境到編寫用於處理JavaScript中數組、對象和賦值的特定轉換邏輯。

語言概述：

我們的目標是設計一個插件，允許我們使用常規的對象和數組字面量，這些字面量將使用Mori庫轉換為持久化數據結構。

我們希望編寫這樣的代碼：

var foo = { a: 1 };
var baz = foo.a = 2;
foo.a === 1;
baz.a === 2;

並將其轉換為如下代碼：

var foo = mori.hashMap('a', 1);
var baz = mori.assoc(foo, 'a', 2);
mori.get(foo, 'a') === 1;
mori.get(baz, 'a') === 2;

讓我們開始使用MoriScript！

Babel概述：

如果我們深入研究Babel，就會發現三個重要的工具處理了大部分流程。

解析

Babylon是解析器，它知道如何將JavaScript代碼字符串轉換為稱為抽象語法樹（AST）的計算機友好表示。

轉換

babel-traverse模塊允許您探索、分析並可能修改AST。

生成

最後，babel-generator模塊用於將轉換後的AST轉換回常規代碼。

什麼是AST？

在繼續本教程之前，理解AST的目的至關重要。讓我們深入了解它們是什麼以及為什麼我們需要它們。

JavaScript程序通常由一系列字符組成，每個字符對我們人類的大腦都有一定的視覺意義。這對我們來說非常有效，因為它允許我們使用匹配的字符（[]、{}、()）、字符對（''、""）和縮進，使我們的程序更容易解釋。

然而，這對計算機來說並沒有多大幫助。對它們來說，每個字符都只是內存中的一個數值，它們無法使用這些字符來提出諸如“此聲明中有多少個變量？”之類的高級問題。相反，我們需要妥協，找到一種方法將我們的代碼轉換成我們可以編程和計算機可以理解的東西。

請看以下代碼：

var foo = { a: 1 };
var baz = foo.a = 2;
foo.a === 1;
baz.a === 2;

當我們為此程序生成AST時，最終會得到一個如下所示的結構：

所有AST都以樹根處的Program節點開始，其中包含程序中所有頂級語句。在本例中，我們只有兩個：

1. 一個VariableDeclaration，帶有一個VariableDeclarator，它將標識符“a”賦值給NumericLiteral“3”。
2. 一個ExpressionStatement，它又由一個BinaryExpression組成，它被描述為一個標識符“a”、一個運算符“ ”和另一個NumericLiteral“5”。

儘管它們是由簡單的構建塊組成的，但AST的大小意味著它們通常非常複雜，特別是對於非平凡的程序。與其自己嘗試弄清楚AST，我們可以使用astexplorer.net，它允許我們在左邊輸入JavaScript，然後在右邊輸出可探索的AST表示。在繼續的過程中，我們將專門使用此工具來理解和試驗代碼。

為了與Babel保持一致，請確保選擇“babylon6”作為解析器。

在編寫Babel插件時，我們的工作是獲取AST，然後插入/移動/替換/刪除一些節點以創建一個新的AST，該AST可用於生成代碼。

設置：

在開始之前，請確保已安裝node和npm。然後為項目創建一個文件夾，創建一個package.json文件並安裝以下開發依賴項。

var foo = mori.hashMap('a', 1);
var baz = mori.assoc(foo, 'a', 2);
mori.get(foo, 'a') === 1;
mori.get(baz, 'a') === 2;

然後，我們將為我們的插件創建一個文件，並在其中導出一個默認函數。

var a = 3;
a + 5

此函數公開了訪問者模式的接口，我們稍後將回到它。

最後，我們將創建一個運行器，以便在進行過程中測試我們的插件。

mkdir moriscript && cd moriscript
npm init -y
npm install --save-dev babel-core

我們可以使用MoriScript示例文件的名稱來調用此腳本，以檢查它是否生成了我們期望的JavaScript。例如，node run.js example.ms。

(以下內容繼續介紹數組、對象和賦值的處理，以及最終的結論和常見問題解答，與原文保持一致，但語言和結構進行了調整，使其更流暢自然。由於篇幅限制，此處省略了原文剩餘部分的偽原創內容。)

以上是通過構建自己的Babel插件來了解AST的詳細內容。更多資訊請關注PHP中文網其他相關文章！