Comprendre les asts en construisant votre propre plugin Babel

Utilisez le plugin Babel pour ajouter des données inchangées par défaut pour JavaScript

Cet article examine comment rédiger un plugin Babel pour ajouter des données immuables à JavaScript par défaut. L'article explique le concept d'arbre de syntaxe abstrait (AST) et son rôle dans le plug-in de Babel en profondeur, et montre comment construire un moyen de convertir les objets normaux et les littéraux de tableau en structures de données persistantes dans la bibliothèque MORI via étape par étape. Exemples de code d'étape.

Points de base:

• Le plugin Babel convertit le code JavaScript en fonctionnant une arborescence de syntaxe abstraite (AST), permettant aux développeurs d'ajouter des fonctionnalités telles que des structures de données immuables à JavaScript.
• AST est essentiel pour comprendre la structure et la représentation de syntaxe du code, ce qui est essentiel pour les tâches telles que la conversion de code et la vérification du style de code.
• La création d'un plugin Babel implique l'analyse du code dans un AST, traversant et éventuellement modifier cet AST, puis générant le code modifié au format JavaScript standard.
• À l'aide d'outils en ligne tels que AST Explorer, les développeurs peuvent visualiser AST, aidant ainsi à développer et à déboguer les plugins Babel.
• Ce didacticiel montre les étapes pratiques de la construction d'un plugin Babel, de la mise en place d'un environnement de développement à l'écriture de la logique de transformation spécifique pour la gestion des tableaux, des objets et des affectations en JavaScript.

Présentation du langage:

Notre objectif est de concevoir un plugin qui nous permet d'utiliser des littéraux d'objet et de tableau réguliers qui seront convertis en structures de données persistantes à l'aide de la bibliothèque MORI.

Nous voulons écrire du code comme ceci:

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

et convertissez-le au code suivant:

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

Commençons par Moriscript !

Babel Aperçu:

Si nous nous plongeons dans Babel, nous trouverons trois outils importants qui gèrent la majeure partie du processus.

Analyse

Babylon est un analyseur qui sait comment convertir les chaînes de code JavaScript en représentations conviviales appelées arbres de syntaxe abstraites (AST).

converti

Le module

babel-traverse vous permet d'explorer, d'analyser et éventuellement de modifier AST.

Générer

Enfin, le module babel-generator est utilisé pour convertir l'AST converti en code ordinaire.

Qu'est-ce que AST?

Avant de continuer ce tutoriel, il est crucial de comprendre le but de l'AST. Faisons ce qu'ils sont et pourquoi nous en avons besoin.

Les programmes JavaScript sont généralement composés d'une série de caractères, chacun avec une certaine signification visuelle pour notre cerveau humain. Cela fonctionne très bien pour nous car il nous permet d'utiliser des caractères correspondants ([], {}, ()), des paires de caractères ('', "") et des retraits pour rendre notre programme plus facile à expliquer.

Cependant, cela n'aide pas beaucoup pour l'ordinateur. Pour eux, chaque personnage n'est qu'une valeur numérique en mémoire et ils ne peuvent pas utiliser ces caractères pour poser des questions avancées comme "Combien de variables y a-t-il dans cette déclaration?" Au lieu de cela, nous devons faire des compromis et trouver un moyen de convertir notre code en quelque chose que nous pouvons programmer et que les ordinateurs peuvent comprendre. Veuillez consulter le code suivant:

Lorsque nous générons AST pour ce programme, nous nous retrouvons avec une structure comme indiqué ci-dessous:

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

Tous les AST commencent par le nœud de programme à la racine de l'arbre, qui contient toutes les instructions de niveau supérieur du programme. Dans ce cas, nous n'en avons que deux:

une variable-éclaration avec un variabledEclarator qui attribue à l'identifiant "A" à NumericLiteral "3".

Un statement d'expression, qui à son tour consiste en une expression binaire, est décrit comme un identifiant "A", un opérateur "" et un autre "5" numérique.

Bien qu'ils soient composés de blocs de construction simples, la taille des AST signifie qu'ils sont souvent très complexes, en particulier pour les programmes non triviaux. Au lieu d'essayer de comprendre AST nous-mêmes, nous pouvons utiliser Astexplorer.net, qui nous permet d'entrer JavaScript à gauche, puis de sortir une représentation AST explorable à droite. Au fur et à mesure que nous continuerons, nous utiliserons cet outil spécifiquement pour comprendre et expérimenter le code.

Pour être cohérent avec Babel, assurez-vous de sélectionner "Babylon6" comme analyseur.

Lors de l'écriture du plugin Babel, notre travail consiste à obtenir l'AST, puis à insérer / déplacer / remplacer / supprimer certains nœuds pour créer un nouveau AST qui peut être utilisé pour générer le code.

Paramètres:

avant de commencer, assurez-vous que le nœud et le NPM sont installés. Créez ensuite un dossier pour le projet, créez un fichier et installez les dépendances de développement suivantes.

Nous allons ensuite créer un fichier pour notre plugin et exporter une fonction par défaut. 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;

Cette fonction expose l'interface du mode visiteur, et nous y reviendrons plus tard.

Enfin, nous créerons un coureur pour tester notre plugin au fur et à mesure.

var a = 3;
a + 5

Nous pouvons appeler ce script en utilisant le nom du fichier d'exemple de Moriscript pour vérifier s'il génère le javascript que nous attendons. Par exemple,

.

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

(Ce qui suit continue d'introduire le traitement des tableaux, des objets et des affectations, ainsi que les conclusions finales et les FAQ, qui sont cohérentes avec le texte d'origine, mais la langue et la structure ont été ajustées pour la rendre plus fluide et plus naturel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!