Vai al contenuto principale

@babel/standalone

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

@babel/standalone fornisce una versione autonoma di Babel per l'uso in browser e altri ambienti non-Node.js.

Quando (non) usare @babel/standalone​

Se utilizzi Babel in produzione, normalmente non dovresti usare @babel/standalone. Dovresti invece utilizzare un sistema di build basato su Node.js come Webpack, Rollup o Parcel per transpilare il tuo codice JS in anticipo.

Tuttavia, esistono casi d'uso validi per @babel/standalone:

  • Offre un modo semplice e conveniente per prototipare con Babel. Usando @babel/standalone, puoi iniziare a utilizzare Babel con un semplice tag script nel tuo HTML.

  • Siti che compilano JavaScript fornito dall'utente in tempo reale, come JSFiddle, JS Bin, il REPL sul sito di Babel, JSitor, ecc.

  • Applicazioni che integrano direttamente un motore JavaScript come V8 e desiderano usare Babel per la compilazione

  • Applicazioni che vogliono usare JavaScript come linguaggio di scripting per estendere se stesse, inclusi tutti i vantaggi offerti dal moderno ES.

  • Altri ambienti non-Node.js (ReactJS.NET, ruby-babel-transpiler, php-babel-transpiler, ecc).

Installazione​

Esistono diversi modi per ottenere @babel/standalone. Scegli quello che preferisci:

  • Usalo tramite UNPKG. Questo è un modo semplice per incorporarlo in una pagina web senza ulteriori configurazioni.

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

  • Installalo manualmente:

    npm install --save @babel/standalone

Tag Script​

Quando caricato in un browser, @babel/standalone compilerà ed eseguirà automaticamente tutti i tag script con tipo text/babel o 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>

Attributi​

data-type​

Aggiunto in: v7.10.0

Se vuoi usare il supporto nativo del browser per gli ES Modules, normalmente dovresti impostare un attributo type="module" sul tuo tag script.

Con @babel/standalone, imposta invece un attributo data-type="module", così:

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

data-presets​

Usa l'attributo data-presets per abilitare i preset integrati di Babel. Valori multipli vanno separati da virgola:

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

I preset più popolari sono: env, react, typescript, flow. Puoi anche usare Babel.availablePresets per consultare i preset disponibili.

Se vuoi passare opzioni aggiuntive, fai riferimento alla sezione preset personalizzati.

data-plugins​

Usa l'attributo data-plugins per abilitare i plugin integrati di Babel. Valori multipli vanno separati da virgola.

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

Consulta qui per l'elenco dei plugin integrati in @babel/standalone. Puoi anche accedere all'elenco tramite Babel.availablePlugins.

Se vuoi aggiungere plugin personalizzati, fai riferimento alla sezione plugin personalizzati.

data-targets​

Aggiunto in: v7.29.0

Usa l'attributo data-targets per specificare i target di compilazione del progetto.

Per impostazione predefinita, Babel transpilerà tutte le funzionalità fino a ES3 supportate da IE 8 e altri browser legacy. Puoi specificare la query browserslist defaults, che copre la maggior parte dei browser moderni. Questo sarà il target predefinito di Babel 8.

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

Attributo src​

È supportato anche il caricamento di script esterni tramite l'attributo src:

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

Attributo async​

Puoi anche impostare l'attributo async per script esterni.

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

API​

Carica babel.js o babel.min.js nel tuo ambiente. Questo esporrà l'API di Babel in un oggetto Babel:

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

Nota che i file di configurazione non funzionano in @babel/standalone, poiché non è disponibile l'accesso al file system. I preset e/o i plugin da utilizzare devono essere specificati nelle opzioni passate a Babel.transform.

Pacchetti interni​

@babel/standalone espone alcuni pacchetti interni di Babel nell'oggetto Babel.packages:

  • Babel.packages.generator

  • Babel.packages.parser

  • Babel.packages.template

  • Babel.packages.traverse

  • Babel.packages.types

Personalizzazione​

Plugin personalizzati​

I plugin e i preset personalizzati possono essere aggiunti utilizzando rispettivamente i metodi registerPlugin e registerPreset:

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

Una volta registrato, puoi utilizzare il plugin personalizzato in uno script inline:

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

Oppure puoi utilizzare il plugin con Babel.transform:

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

Preset personalizzati: passaggio di opzioni a preset/plugin integrati​

Se vuoi passare delle opzioni a plugin e preset integrati, puoi creare un nuovo preset e passare queste opzioni all'interno del preset.

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

Una volta registrato, puoi utilizzare questo preset in uno script inline:

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