Aller au contenu

Comment ajouter des alias de mots-clés natifs à Babel

Logo de personne folle

Ceux d’entre vous qui suivent ce blog savent que tous les articles de blog ne sont pas une approbation d’une technologie, mais simplement un didacticiel sur la façon de faire quelque chose. Parfois, l’approche décrite peut ne pas être quelque chose que vous devriez faire. Ceci est l’un de ces articles de blog.

le Analyste Babel est un outil essentiel dans la pile Web de nos jours. Babel nous aide à utiliser les modèles JavaScript avant qu’ils n’atteignent le navigateur (sérialisation facultative) ainsi que JSX pour React. Cela m’a fait penser : à quel point serait-il facile d’écrire une extension Babel pour nous permettre d’aliaser des mots clés, tels que fn Au lieu de function? nous allons jeter un coup d’oeil!

Créer un alias de mot-clé avec Babel est plus facile et plus difficile que vous ne le pensez. D’un point de vue simple, il s’agit essentiellement d’une seule ligne de code. En revanche, vous devez modifier le code de l’analyseur de base babel.

Par exemple, disons que nous voulons un alias fn pour javascript function mot-clé. Un exemple d’extrait de code ressemblerait à ceci :

// Named function
fn myFunction() {
    return true;
}

// Function as variable
const myOtherFunction = fn() {

}

// Instantly executing function
(fn() {

})();

Après analyse, nous aimerions que toutes les instances de fn pour le remplacer function. Pour créer cet alias, nous aurons besoin d’un mod createKeyword Fichier suivant dans

// File: packages/babel-parser/src/tokenizer/types.js
// We'll be adding one line
// ...
function createKeyword(name: string, options: TokenOptions = {}): TokenType {
  options.keyword = name;
  const token = new TokenType(name, options);
  keywords.set(name, token);

  // ADD THIS LINE:
  if (name === "function") keywords.set("fn", token);

  return token;
}
// ...

Pour analyser un exemple de fichier, je peux exécuter :

node packages/babel-parser/bin/babel-parser.js /path/to/sample-file.js

L’analyseur fournira ce qui suit lorsqu’il rencontre une instance fn:

{
        "type": "FunctionDeclaration",
        "start": 0,
        "end": 36,
        "loc": {
          "start": {
            "line": 1,
            "column": 0
          },
          "end": {
            "line": 3,
            "column": 1
          }
        },
        "id": {
          "type": "Identifier",
          "start": 3,
          "end": 13,
          "loc": {
            "start": {
              "line": 1,
              "column": 3
            },
            "end": {
              "line": 1,
              "column": 13
            },
            "identifierName": "myFunction"
          },
          "name": "myFunction"
        }
// ...

Vous vous demandez peut-être « Pourquoi ferais-je ça ? » Eh bien, vous ne le ferez probablement pas – modifier la bibliothèque source pour votre propre usage est un cauchemar de maintenance et utiliser des mots clés malveillants dans votre source… est également un cauchemar de maintenance.

Cela étant dit, si vous souhaitez expérimenter l’ajout d’alias à vos mots clés, la modification du code source de Babel est votre meilleur pari. J’aimerais s’il y avait un moyen d’écrire une extension pour accomplir cela. Merci beaucoup Logan Smith Pour m’aider à naviguer à la source de Babylone !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *