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

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

コアポイント：

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

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

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

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

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

moriscript

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

から始めましょう！

babelの概要：

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

分析

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

変換

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

生成babel-traverse

最後に、

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

babel-generatorASTとは何ですか？

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

、

、

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

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

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

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

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

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

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

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

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

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

設(shè)定：

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

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

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

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

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

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

。

（以下は、アレイ、オブジェクト、割り當ての処理、および元のテキストと一致する最終的な結(jié)論とFAQを?qū)毪肪Aけていますが、言語と構(gòu)造はスムーズに調(diào)整されています。そして、より自然なことです

以上が獨自のバベルプラグインを構(gòu)築することにより、ASTを理解しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。