独自のバベルプラグインを構築することにより、ASTを理解します

babelプラグインを使用して、javascriptのデフォルトの未変化データを追加します

この記事では、デフォルトでJavaScriptに不変のデータを追加するためにBabelプラグインを作成する方法について説明します。この記事では、抽象的な構文ツリー（AST）の概念とBabelプラグインにおけるその役割について説明し、通常のオブジェクトと配列リテラルを段階的に森ライブラリの永続的なデータ構造に変換する方法を構築する方法を示しています。ステップコードの例。

コアポイント：

babelプラグインは、抽象的な構文ツリー（AST）を操作することによりJavaScriptコードを変換し、開発者がJavaScriptに不変のデータ構造などの機能を追加できるようにします。
ASTは、コードの構造と構文表現を理解するために不可欠です。これは、コード変換やコードスタイルのチェックなどのタスクに不可欠です。
BABELプラグインの作成には、コードをASTに解析し、このASTを通過して変更し、変更されたコードを標準のJavaScript形式に戻すことが含まれます。
• ASTエクスプローラーなどのオンラインツールを使用して、開発者はASTを視覚化することができ、それによりBabelプラグインを開発およびデバッグするのに役立ちます。
このチュートリアルは、開発環境のセットアップからJavaScriptのアレイ、オブジェクト、および割り当ての処理のための特定の変換ロジックを作成することまで、バベルプラグインを構築するための実用的な手順を示しています。
• 言語の概要：

私たちの目標は、MORIライブラリを使用して永続的なデータ構造に変換される通常のオブジェクトおよび配列リテラルを使用できるプラグインを設計することです。

次のようなコードを書きたい：

そして、それを次のコードに変換します：

<code class="language-javascript">var foo = { a: 1 };
var baz = foo.a = 2;
foo.a === 1;
baz.a === 2;</code>

moriscript

<code class="language-javascript">var foo = mori.hashMap('a', 1);
var baz = mori.assoc(foo, 'a', 2);
mori.get(foo, 'a') === 1;
mori.get(baz, 'a') === 2;</code>

から始めましょう！

babelの概要：

バベルを掘り下げると、ほとんどのプロセスを処理する3つの重要なツールが見つかります。

分析

バビロンは、JavaScriptコード文字列を抽象的構文ツリー（AST）と呼ばれるコンピューターに優しい表現に変換する方法を知っているパーサーです。

変換

モジュールを使用すると、ASTを探索、分析、場合によっては変更できます。

生成babel-traverse

最後に、

モジュールを使用して、変換されたASTを通常のコードに変換します。

babel-generatorASTとは何ですか？

このチュートリアルを継続する前に、ASTの目的を理解することが重要です。彼らが何であるか、そしてなぜ私たちが彼らを必要としているのかを掘り下げましょう。 javascriptプログラムは通常、一連のキャラクターで構成され、それぞれが人間の脳に対して特定の視覚的に重要です。これは、一致する文字（

、

、

）、キャラクターのペア（

、[]）、インデント、インデントを使用してプログラムをより簡単に使用できるため、非常にうまく機能します。 {}

しかし、これはコンピューターにとってあまり役に立ちません。彼らにとって、各文字はメモリ内の数値であり、これらの文字を使用して「この宣言にはいくつの変数がありますか？」などの高度な質問をすることはできません。代わりに、コードを妥協し、プログラムできるものに変換し、コンピューターを理解できるものに変換する方法を見つける必要があります。 次のコードを参照してください：

このプログラムのためにASTを生成すると、以下に示すように構造になります。

<code class="language-javascript">var foo = { a: 1 };
var baz = foo.a = 2;
foo.a === 1;
baz.a === 2;</code>

すべてのASTは、プログラムのすべてのトップレベルステートメントを含むツリーのルートにあるプログラムノードから始まります。この場合、2つしかありません：

識別子「a」を数値の文字 "3"に割り当てるバリエルドクレアレーターを使用したバリエルドクレート。

バイナリエクスペレーションで構成される表現ステートメントは、識別子「A」、演算子」、および別の数値の文字「5」として説明されます。

それらは単純なビルディングブロックで構成されていますが、ASTのサイズは、特に非些細なプログラムでは非常に複雑なことが多いことを意味します。自分自身を把握しようとする代わりに、astexplorer.netを使用することができます。これにより、左側にJavaScriptを入力してから、右側の探索可能なAST表現を出力できます。続行するにつれて、このツールを使用して、コードを理解して実験します。
2. バベルと一致するように、「バビロン6」をパーサーとして選択してください。

Babelプラグインを書くとき、私たちの仕事はASTを取得し、いくつかのノードを挿入/mov/削除/削除して、コードを生成するために使用できる新しいASTを作成することです。

設定：

開始する前に、ノードとNPMがインストールされていることを確認してください。次に、プロジェクトのフォルダーを作成し、

ファイルを作成し、次の開発依存関係をインストールします。

次に、プラグインのファイルを作成し、デフォルト関数をエクスポートします。

package.jsonこの関数は、ビジターモードのインターフェイスを公開し、後で戻ります。

<code class="language-javascript">var foo = mori.hashMap('a', 1);
var baz = mori.assoc(foo, 'a', 2);
mori.get(foo, 'a') === 1;
mori.get(baz, 'a') === 2;</code>

最後に、ランナーを作成してプラグインをテストします。

<code class="language-javascript">var a = 3;
a + 5</code>

Moriscriptサンプルファイルの名前を使用してこのスクリプトを呼び出して、予想されるJavaScriptを生成するかどうかを確認できます。たとえば、

。

（以下は、アレイ、オブジェクト、割り当ての処理、および元のテキストと一致する最終的な結論とFAQを導入し続けていますが、言語と構造はスムーズに調整されています。そして、より自然なことです

以上が独自のバベルプラグインを構築することにより、ASTを理解しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。