@babel/plugin-transform-modules-umd

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 →

History

Version	Changes
v7.14.0	Implemented the importInterop option

información

Este plugin está incluido en @babel/preset-env bajo la opción modules

Este plugin transforma módulos ES2015 a UMD. Nota que solo se transforma la sintaxis de las declaraciones import/export (import "./mod.js"), ya que Babel no conoce los diferentes algoritmos de resolución entre implementaciones de módulos ES2015 y UMD.

⚠️ Este plugin no soporta importaciones dinámicas (import('./lazy.js')).

Ejemplo

Entrada

JavaScript

export default 42;

Salida

JavaScript

(function(global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports);
  } else {
    var mod = {
      exports: {},
    };
    factory(mod.exports);
    global.actual = mod.exports;
  }
})(this, function(exports) {
  "use strict";

  Object.defineProperty(exports, "__esModule", {
    value: true,
  });

  exports.default = 42;
});

Instalación

npm

npm install --save-dev @babel/plugin-transform-modules-umd

Yarn

yarn add --dev @babel/plugin-transform-modules-umd

pnpm

pnpm add --save-dev @babel/plugin-transform-modules-umd

Bun

bun add --dev @babel/plugin-transform-modules-umd

Uso

Mediante un archivo de configuración (Recomendado)

babel.config.json

{
  "plugins": ["@babel/plugin-transform-modules-umd"]
}

También puedes sobrescribir los nombres de bibliotecas específicas cuando este módulo se ejecuta en el navegador. Por ejemplo, la biblioteca es6-promise se expone como global.Promise en lugar de global.es6Promise. Esto puede configurarse mediante:

babel.config.json

{
  "plugins": [
    [
      "@babel/plugin-transform-modules-umd",
      {
        "globals": {
          "es6-promise": "Promise"
        }
      }
    ]
  ]
}

Semántica predeterminada

Hay varios aspectos a considerar sobre la semántica predeterminada.

Primero, esta transformación utiliza el nombre base de cada importación para generar los nombres globales en la salida UMD. Esto significa que si importas múltiples módulos con el mismo nombre base, como:

JavaScript

import fooBar1 from "foo-bar";
import fooBar2 from "./mylib/foo-bar";

se transpilará a dos referencias al mismo global del navegador:

JavaScript

factory(global.fooBar, global.fooBar);

Si configuras las opciones del plugin como:

JSON

{
  "globals": {
    "foo-bar": "fooBAR",
    "./mylib/foo-bar": "mylib.fooBar"
  }
}

seguirá transpilando ambos a un único global del navegador:

JavaScript

factory(global.fooBAR, global.fooBAR);

porque nuevamente la transformación solo usa el nombre base de la importación.

Segundo, la sobrescritura especificada seguirá pasando por la función toIdentifier en babel-types/src/converters. Esto significa que si especificas una sobrescritura como expresión de miembro:

JSON

{
  "globals": {
    "fizzbuzz": "fizz.buzz"
  }
}

esto no se transpilará a factory(global.fizz.buzz). En cambio, se transpilará a factory(global.fizzBuzz) según la lógica de toIdentifier.

Tercero, no puedes sobrescribir el nombre global exportado.

Semántica más flexible con exactGlobals: true

Todos estos comportamientos pueden limitar la flexibilidad del mapa globals. Para eliminar estas limitaciones, puedes establecer la opción exactGlobals en true. Esto instruye al plugin a:

1. Usar siempre la cadena de importación completa en lugar del nombre base al generar los nombres globales

2. Omitir pasar sobrescrituras globals a la función toIdentifier. En su lugar, se usan exactamente como están escritas, por lo que obtendrás errores si no usas identificadores válidos o expresiones de miembro válidas (con punto) no computadas.

3. Permitir sobrescribir el nombre global exportado mediante el mapa globals. Cualquier sobrescritura debe ser nuevamente un identificador válido o expresión de miembro válida.

Por lo tanto, si estableces exactGlobals en true y no pasas sobrescrituras, el primer ejemplo de:

JavaScript

import fooBar1 from "foo-bar";
import fooBar2 from "./mylib/foo-bar";

se transpilará a:

JavaScript

factory(global.fooBar, global.mylibFooBar);

Y si configuras las opciones del plugin como:

JSON

{
  "globals": {
    "foo-bar": "fooBAR",
    "./mylib/foo-bar": "mylib.fooBar"
  },
  "exactGlobals": true
}

entonces se transpilará a:

JavaScript

factory(global.fooBAR, global.mylib.fooBar);

Finalmente, con las opciones del plugin configuradas como:

babel.config.json

{
  "plugins": [
    "@babel/plugin-external-helpers",
    [
      "@babel/plugin-transform-modules-umd",
      {
        "globals": {
          "my/custom/module/name": "My.Custom.Module.Name"
        },
        "exactGlobals": true
      }
    ]
  ],
  "moduleId": "my/custom/module/name"
}

se transpilará a:

JavaScript

factory(mod.exports);
global.My = global.My || {};
global.My.Custom = global.My.Custom || {};
global.My.Custom.Module = global.My.Custom.Module || {};
global.My.Custom.Module.Name = mod.exports;

Mediante la CLI

Shell

babel --plugins @babel/plugin-transform-modules-umd script.js

Mediante la API de Node

JavaScript

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-modules-umd"],
});

Opciones

moduleIds

boolean Por defecto: !!moduleId

Añadido en: v7.9.0

Habilita la generación de IDs de módulo.

moduleId

string

Añadido en: v7.9.0

ID fijo para usar en el módulo. No puede usarse junto con getModuleId.

getModuleId

(name: string) => string

Añadido en: v7.9.0

Dado el nombre de módulo generado por Babel, devuelve el nombre a usar. Devolver un valor falso usará el name original.

moduleRoot

string

Añadido en: v7.9.0

Una ruta raíz para incluir en los nombres de módulo generados.

Para opciones no listadas aquí, consulta las opciones de @babel/plugin-transform-modules-commonjs.