使用Babel插件為JavaScript添加默認(rèn)不變數(shù)據(jù)

本文探討如何編寫B(tài)abel插件，為JavaScript默認(rèn)添加不可變數(shù)據(jù)。文章深入講解了抽象語法樹（AST）的概念及其在Babel插件中的作用，並通過逐步的代碼示例，演示瞭如何構(gòu)建一個(gè)將普通對象和數(shù)組字面量轉(zhuǎn)換為Mori庫中持久化數(shù)據(jù)結(jié)構(gòu)的Babel插件。

核心要點(diǎn)：

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

語言概述：

我們的目標(biāo)是設(shè)計(jì)一個(gè)插件，允許我們使用常規(guī)的對象和數(shù)組字面量，這些字面量將使用Mori庫轉(zhuǎn)換為持久化數(shù)據(jù)結(jié)構(gòu)。

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

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

並將其轉(zhuǎn)換為如下代碼：

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，就會(huì)發(fā)現(xiàn)三個(gè)重要的工具處理了大部分流程。

解析

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

轉(zhuǎn)換

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

生成

最後，babel-generator模塊用於將轉(zhuǎn)換後的AST轉(zhuǎn)換回常規(guī)代碼。

什麼是AST？

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

JavaScript程序通常由一系列字符組成，每個(gè)字符對我們?nèi)祟惖拇竽X都有一定的視覺意義。這對我們來說非常有效，因?yàn)樗试S我們使用匹配的字符（[]、{}、()）、字符對（''、""）和縮進(jìn)，使我們的程序更容易解釋。

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

請看以下代碼：

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

當(dāng)我們?yōu)榇顺绦蛏葾ST時(shí)，最終會(huì)得到一個(gè)如下所示的結(jié)構(gòu)：

所有AST都以樹根處的Program節(jié)點(diǎn)開始，其中包含程序中所有頂級(jí)語句。在本例中，我們只有兩個(gè)：

1. 一個(gè)VariableDeclaration，帶有一個(gè)VariableDeclarator，它將標(biāo)識(shí)符“a”賦值給NumericLiteral“3”。
2. 一個(gè)ExpressionStatement，它又由一個(gè)BinaryExpression組成，它被描述為一個(gè)標(biāo)識(shí)符“a”、一個(gè)運(yùn)算符“ ”和另一個(gè)NumericLiteral“5”。

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

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

在編寫B(tài)abel插件時(shí)，我們的工作是獲取AST，然後插入/移動(dòng)/替換/刪除一些節(jié)點(diǎn)以創(chuàng)建一個(gè)新的AST，該AST可用於生成代碼。

設(shè)置：

在開始之前，請確保已安裝node和npm。然後為項(xiàng)目創(chuàng)建一個(gè)文件夾，創(chuàng)建一個(gè)package.json文件並安裝以下開發(fā)依賴項(xiàng)。

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

然後，我們將為我們的插件創(chuàng)建一個(gè)文件，並在其中導(dǎo)出一個(gè)默認(rèn)函數(shù)。

var a = 3;
a + 5

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

最後，我們將創(chuàng)建一個(gè)運(yùn)行器，以便在進(jìn)行過程中測試我們的插件。

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

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

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

以上是通過構(gòu)建自己的Babel插件來了解AST的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！