Saltar al contenido principal

@babel/standalone

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

@babel/standalone proporciona una compilación independiente de Babel para usar en navegadores y otros entornos que no sean Node.js.

Cuándo (no) usar @babel/standalone​

Si usas Babel en producción, normalmente no deberías usar @babel/standalone. En su lugar, utiliza un sistema de compilación que se ejecute en Node.js como Webpack, Rollup o Parcel para transpilar tu código JavaScript con anticipación.

Sin embargo, existen casos de uso válidos para @babel/standalone:

  • Ofrece una forma fácil y conveniente de hacer prototipos con Babel. Usando @babel/standalone, puedes comenzar con Babel simplemente añadiendo una etiqueta de script en tu HTML.

  • Sitios que compilan JavaScript proporcionado por usuarios en tiempo real, como JSFiddle, JS Bin, el REPL del sitio de Babel, JSitor, etc.

  • Aplicaciones que incorporan directamente un motor JavaScript como V8 y quieren usar Babel para compilación

  • Aplicaciones que desean usar JavaScript como lenguaje de scripting para extender la propia aplicación, incluyendo todas las ventajas que ofrece el ES moderno.

  • Otros entornos que no son Node.js (ReactJS.NET, ruby-babel-transpiler, php-babel-transpiler, etc).

Instalación​

Existen varias formas de obtener una copia de @babel/standalone. Elige la que prefieras:

  • Úsalo mediante UNPKG. Es una forma sencilla de incrustarlo en una página web sin configuración adicional.

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

  • Instálalo manualmente:

    npm install --save @babel/standalone

Etiquetas de script​

Cuando se carga en un navegador, @babel/standalone compilará y ejecutará automáticamente todas las etiquetas de 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>

Atributos​

data-type​

Añadido en: v7.10.0

Si quieres usar el soporte nativo de tu navegador para ES Modules, normalmente necesitarías establecer un atributo type="module" en tu etiqueta de script.

Con @babel/standalone, establece un atributo data-type="module" en su lugar, así:

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

data-presets​

Usa el atributo data-presets para habilitar presets integrados de Babel. Los valores múltiples se separan con comas:

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

Los presets más populares son: env, react, typescript, flow. También puedes usar Babel.availablePresets para consultar los presets disponibles.

Si necesitas pasar opciones adicionales, consulta la sección de presets personalizados.

data-plugins​

Usa el atributo data-plugins para habilitar plugins integrados de Babel. Los valores múltiples se separan con comas.

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

Consulta aquí la lista de plugins integrados en @babel/standalone. También puedes acceder a la lista mediante Babel.availablePlugins.

Si deseas añadir plugins personalizados, consulta la sección de plugins personalizados.

data-targets​

Añadido en: v7.29.0

Usa el atributo data-targets para especificar los objetivos de compilación del proyecto.

Por defecto, Babel transpilará todas las funciones hasta ES3 compatible con IE 8 y otros navegadores antiguos. Puedes especificar la consulta defaults de browserslist, que cubre la mayoría de navegadores modernos. Este será el objetivo predeterminado de Babel 8.

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

src​

También se admite cargar scripts externos mediante el atributo src:

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

async​

También puedes configurar el atributo async para scripts externos.

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

API​

Carga babel.js o babel.min.js en tu entorno. Esto expondrá la API de Babel en un objeto Babel:

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

Ten en cuenta que los archivos de configuración no funcionan en @babel/standalone, ya que no hay acceso al sistema de archivos. Los presets y/o plugins a usar deben especificarse en las opciones pasadas a Babel.transform.

Paquetes internos​

@babel/standalone expone algunos paquetes internos de Babel en el objeto Babel.packages:

  • Babel.packages.generator

  • Babel.packages.parser

  • Babel.packages.template

  • Babel.packages.traverse

  • Babel.packages.types

Personalización​

Plugins personalizados​

Se pueden añadir plugins y presets personalizados usando los métodos registerPlugin y registerPreset respectivamente:

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

Una vez registrados, puedes usar el plugin personalizado en un script en línea:

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

O puedes usar el plugin con Babel.transform:

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

Presets personalizados: pasar opciones a presets/plugins incorporados​

Si quieres pasar opciones a plugins y presets incorporados, puedes crear un nuevo preset y pasar estas opciones dentro 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 vez registrado, puedes usar este preset en un script en línea:

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