Aller au contenu principal

@babel/standalone

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

@babel/standalone fournit une version autonome de Babel utilisable dans les navigateurs et autres environnements non-Node.js.

Quand utiliser (ou non) @babel/standalone​

En production, vous ne devriez normalement pas utiliser @babel/standalone. Utilisez plutôt un système de build exécuté sur Node.js comme Webpack, Rollup ou Parcel pour transpiler votre JS à l'avance.

Cependant, certains cas d'usage sont pertinents pour @babel/standalone :

  • Prototypage rapide et pratique : avec @babel/standalone, une simple balise script dans votre HTML suffit pour démarrer avec Babel.

  • Sites compilant du JavaScript utilisateur en temps réel : JSFiddle, JS Bin, REPL du site Babel, JSitor, etc.

  • Applications embarquant directement un moteur JavaScript comme V8 nécessitant la compilation Babel.

  • Applications utilisant JavaScript comme langage de script d'extension, bénéficiant des fonctionnalités ES modernes.

  • Autres environnements non-Node.js (ReactJS.NET, ruby-babel-transpiler, php-babel-transpiler, etc).

Installation​

Plusieurs méthodes pour obtenir @babel/standalone :

  • Via UNPKG : méthode simple pour l'intégrer dans une page web sans configuration supplémentaire.

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  • Installation manuelle :

    npm install --save @babel/standalone

Balises script​

Dans un navigateur, @babel/standalone compile et exécute automatiquement les balises script de type text/babel ou text/jsx :

<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
  const getMessage = () => "Hello World";
  document.getElementById("output").innerHTML = getMessage();
</script>

Attributs​

data-type​

Ajouté dans : v7.10.0

Pour utiliser le support natif des modules ES, définissez normalement l'attribut type="module".

Avec @babel/standalone, utilisez plutôt data-type="module" :

<script type="text/babel" data-type="module">

data-presets​

Activez les presets Babel intégrés via l'attribut data-presets. Valeurs multiples séparées par des virgules :

<script type="text/babel" data-presets="env,react">

Presets populaires : env, react, typescript, flow. Utilisez Babel.availablePresets pour lister les presets disponibles.

Pour passer des options supplémentaires, consultez la section presets personnalisés.

data-plugins​

Activez les plugins Babel intégrés via l'attribut data-plugins. Valeurs multiples séparées par des virgules.

<script type="text/babel" data-plugins="transform-class-properties">

Liste des plugins intégrés dans @babel/standalone ici. Accessible via Babel.availablePlugins.

Pour ajouter des plugins personnalisés, consultez la section plugins personnalisés.

data-targets​

Ajouté dans : v7.29.0

Utilisez l'attribut data-targets pour spécifier les cibles de compilation du projet.

Par défaut, Babel transpile toutes les fonctionnalités jusqu'à ES3 pris en charge par IE 8 et d'autres navigateurs anciens. Vous pouvez spécifier la requête browserslist defaults qui couvre la plupart des navigateurs modernes. Ce sera la cible par défaut de Babel 8.

<script type="text/babel" data-presets="env" data-targets="defaults">

src​

Le chargement de scripts externes via l'attribut src est également pris en charge :

<script type="text/babel" src="foo.js"></script>

async​

Vous pouvez également définir l'attribut async pour les scripts externes.

<script type="text/babel" src="foo.js" async></script>

API​

Chargez babel.js ou babel.min.js dans votre environnement. Cela exposera l'API de Babel dans un objet Babel :

JavaScript
var input = 'const getMessage = () => "Hello World";';
var output = Babel.transform(input, { presets: ["env"] }).code;

Notez que les fichiers de configuration ne fonctionnent pas avec @babel/standalone, car aucun accès au système de fichiers n'est disponible. Les presets et/ou plugins à utiliser doivent être spécifiés dans les options passées à Babel.transform.

Packages internes​

@babel/standalone expose certains packages internes de Babel dans l'objet Babel.packages :

  • Babel.packages.generator

  • Babel.packages.parser

  • Babel.packages.template

  • Babel.packages.traverse

  • Babel.packages.types

Personnalisation​

Plugins personnalisés​

Les plugins et presets personnalisés peuvent être ajoutés en utilisant respectivement les méthodes registerPlugin et registerPreset :

JavaScript
// Simple plugin that converts every identifier to "LOL"
function lolizer() {
  return {
    visitor: {
      Identifier(path) {
        path.node.name = "LOL";
      },
    },
  };
}
Babel.registerPlugin("lolizer", lolizer);

Une fois enregistré, vous pouvez soit utiliser le plugin personnalisé dans un script en ligne :

<script type="text/babel" data-plugins="lolizer">

Soit utiliser le plugin avec Babel.transform :

JavaScript
var output = Babel.transform("function helloWorld() { alert(hello); }", {
  plugins: ["lolizer"],
});
// Returns "function LOL() { LOL(LOL); }"

Presets personnalisés : passage d'options aux presets/plugins intégrés​

Si vous souhaitez passer des options aux plugins et presets intégrés, vous pouvez créer un nouveau preset et passer ces options à l'intérieur du preset.

JavaScript
// Define a preset
Babel.registerPreset("env-plus", {
  presets: [[Babel.availablePresets["env"], { loose: true }]],
  plugins: [
    [
      Babel.availablePlugins["proposal-decorators"],
      { version: "2023-01" },
    ],
  ],
});

Une fois enregistré, vous pouvez utiliser ce preset dans un script en ligne :

<script type="text/babel" data-presets="env-plus">