Verstehen Sie ASTS, indem Sie Ihr eigenes Babel -Plugin erstellen

Verwenden Sie das Babel -Plugin, um nicht mehrveränderte Daten für JavaScript

zu fügen zu fügen

In diesem Artikel wird erläutert, wie ein Babel -Plugin geschrieben wird, um javaScript standardmäßig unveränderliche Daten hinzuzufügen. Der Artikel erläutert das Konzept des abstrakten Syntaxbaums (AST) und seine Rolle im Babel-Plug-In in der Tiefe und zeigt, wie man eine Möglichkeit erstellt, normale Objekte und Array-Literale in anhaltende Datenstrukturen in der Mori-Bibliothek durch schrittweise Beispiele für Schrittcode.

Kernpunkte:

• Das Babel -Plugin konvertiert JavaScript -Code, indem ein abstrakter Syntaxbaum (AST) betrieben wird, mit dem Entwickler JavaScript -Funktionen wie unveränderliche Datenstrukturen hinzufügen können.
• AST ist für das Verständnis der Struktur und der Syntaxdarstellung des Codes von wesentlicher Bedeutung, was für Aufgaben wie Codekonvertierung und Codestil -Überprüfung unerlässlich ist.
• Erstellen eines Babel -Plugins beinhaltet das Parsen des Codes in ein AST, durchqueren und möglicherweise das Ändern dieses AST und das Generieren des geänderten Codes zum Standard -JavaScript -Format.
• Verwenden von Online -Tools wie AST Explorer können Entwickler AST visualisieren und damit Babel -Plugins entwickeln und debuggen.
• Dieses Tutorial zeigt die praktischen Schritte zum Erstellen eines Babel -Plugins, von der Einrichtung einer Entwicklungsumgebung bis hin zum Schreiben einer spezifischen Transformationslogik für die Handhabung von Arrays, Objekten und Zuordnungen in JavaScript.

Sprachübersicht:

Unser Ziel ist es, ein Plugin zu entwerfen, mit dem wir reguläre Objekt- und Array -Literale verwenden können, die mithilfe der Mori -Bibliothek in anhaltende Datenstrukturen konvertiert werden.

Wir möchten so Code schreiben:

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

und konvertieren Sie es in den folgenden Code:

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

Beginnen wir mit Moriscript !

Babel -Übersicht:

Wenn wir uns mit Babel befassen, werden wir drei wichtige Tools finden, die den größten Teil des Prozesses abwickeln.

Analyse

babylon ist ein Parser, der weiß, wie JavaScript-Code-Zeichenfolgen in computerfreundliche Darstellungen umwandeln, die als abstrakte Syntaxbäume (ASTS) bezeichnet werden.

konvertieren

Mit dem

babel-traverse -Modul können Sie AST erforschen, analysieren und möglicherweise ändern.

erzeugen

Schließlich wird das

-Modul verwendet, um den konvertierten AST in den regulären Code zurückzuwandeln. babel-generator

Was ist AST?

Bevor Sie dieses Tutorial fortsetzen, ist es wichtig, den Zweck von AST zu verstehen. Lassen Sie uns in das ausgraben, was sie sind und warum wir sie brauchen.

JavaScript -Programme bestehen normalerweise aus einer Reihe von Charakteren, die jeweils mit einer gewissen visuellen Bedeutung für unser menschliches Gehirn sind. Dies funktioniert sehr gut für uns, da wir übereinstimmende Zeichen (

, [], {}), Zeichenpaare ((), '') und eingestuft werden können, um unser Programm einfacher zu erklären. ""

Dies hilft jedoch nicht viel für den Computer. Für sie ist jeder Charakter nur ein numerischer Wert im Speicher und sie können diese Zeichen nicht verwenden, um erweiterte Fragen wie "Wie viele Variablen gibt es in dieser Erklärung?" Stattdessen müssen wir Kompromisse eingehen und einen Weg finden, unseren Code in etwas umzuwandeln, das wir programmieren können, und Computer können verstehen. Siehe den folgenden Code:

Wenn wir AST für dieses Programm generieren, erhalten wir eine Struktur, wie unten gezeigt:

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

Alle ASTs beginnen mit dem Programmknoten an der Wurzel des Baumes, der alle Top-Ebenen im Programm enthält. In diesem Fall haben wir nur zwei:

Eine Variableerklaration mit einem Variableklarator, der die Kennung "A" dem numerischen "3" zuweist.

Eine ExpressionStatement, die wiederum aus einer Binaryexpression besteht, wird als Kennung "A", als Operator "und ein weiterer numerischer" 5 "beschrieben.

Obwohl sie aus einfachen Bausteinen bestehen, bedeutet die Größe von ASTS, dass sie oft sehr komplex sind, insbesondere für nicht triviale Programme. Anstatt zu versuchen, AST selbst herauszufinden, können wir Atexplorer.net verwenden, mit dem wir JavaScript links eingeben und dann eine explorierbare AST -Darstellung auf der rechten Seite ausgeben können. Im weiteren Verlauf werden wir dieses Tool speziell verwenden, um den Code zu verstehen und zu experimentieren.

Um mit Babel übereinzustimmen, wählen Sie "babylon6" als Parser.

Beim Schreiben von Babel -Plugin ist es unsere Aufgabe, das AST zu erhalten und dann einige Knoten einfügen/mov/ersetzen/löschen, um ein neues AST zu erstellen, mit dem der Code generiert werden kann.

Einstellungen:

Vor dem Start stellen Sie sicher, dass Node und NPM installiert sind. Erstellen Sie dann einen Ordner für das Projekt, erstellen Sie eine Datei und installieren Sie die folgenden Entwicklungsabhängigkeiten.

Wir erstellen dann eine Datei für unser Plugin und exportieren eine Standardfunktion darin. 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;

Diese Funktion enthält die Schnittstelle des Besuchermodus, und wir werden später dorthin zurückkehren.

Schließlich werden wir einen Läufer erstellen, um unser Plugin während der Zeit zu testen.

var a = 3;
a + 5

Wir können dieses Skript mit dem Namen der Moriscript -Beispieldatei aufrufen, um zu überprüfen, ob es das erwartete JavaScript generiert. Zum Beispiel

.

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

(Folgendes führt weiter und natürlicher

Das obige ist der detaillierte Inhalt vonVerstehen Sie ASTS, indem Sie Ihr eigenes Babel -Plugin erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!