@babel/plugin-transform-modules-umd

Traduzione Beta Non Ufficiale

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

History

Version	Changes
v7.14.0	Implemented the importInterop option

informazioni

Questo plugin è incluso in @babel/preset-env nell'opzione modules

Questo plugin trasforma i moduli ES2015 in UMD. Nota che viene trasformata solo la sintassi delle istruzioni import/export (import "./mod.js"), poiché Babel non è a conoscenza dei diversi algoritmi di risoluzione tra le implementazioni dei moduli ES2015 e UMD.

⚠️ Questo plugin non supporta l'import dinamico (import('./lazy.js')).

Esempio

In

JavaScript

export default 42;

Out

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;
});

Installazione

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

Utilizzo

Con un file di configurazione (Consigliato)

babel.config.json

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

Puoi inoltre sovrascrivere i nomi di librerie specifiche quando questo modulo è in esecuzione nel browser. Ad esempio, la libreria es6-promise espone sé stessa come global.Promise anziché global.es6Promise. Questo può essere configurato tramite:

babel.config.json

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

Semantica predefinita

Ci sono alcuni aspetti da considerare riguardo alla semantica predefinita.

In primo luogo, questa trasformazione utilizza il basename di ogni import per generare i nomi globali nell'output UMD. Ciò significa che se importi più moduli con lo stesso basename, come:

JavaScript

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

verranno transpilati in due riferimenti allo stesso globale del browser:

JavaScript

factory(global.fooBar, global.fooBar);

Se configuri le opzioni del plugin come:

JSON

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

transpilerà comunque entrambi in un unico globale del browser:

JavaScript

factory(global.fooBAR, global.fooBAR);

perché la trasformazione utilizza nuovamente solo il basename dell'import.

In secondo luogo, l'override specificato verrà comunque passato alla funzione toIdentifier in babel-types/src/converters. Ciò significa che se specifichi un override come espressione di membro:

JSON

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

questo non verrà transpilato in factory(global.fizz.buzz). Verrà invece transpilato in factory(global.fizzBuzz) basandosi sulla logica di toIdentifier.

In terzo luogo, non è possibile sovrascrivere il nome globale esportato.

Semantica più flessibile con exactGlobals: true

Tutti questi comportamenti possono limitare la flessibilità della mappa globals. Per rimuovere queste limitazioni, puoi impostare l'opzione exactGlobals a true. Questa configurazione istruisce il plugin a:

1. utilizzare sempre la stringa completa dell'import anziché il basename durante la generazione dei nomi globali

2. saltare il passaggio degli override globals alla funzione toIdentifier. Invece, vengono utilizzati esattamente come scritti, quindi riceverai errori se non utilizzi identificatori validi o espressioni di membro non calcolate (punto).

3. consentire la sovrascrittura del nome globale esportato tramite la mappa globals. Ogni override deve essere nuovamente un identificatore valido o un'espressione di membro valida.

Pertanto, se imposti exactGlobals a true e non passi alcun override, il primo esempio:

JavaScript

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

verrà transpilato in:

JavaScript

factory(global.fooBar, global.mylibFooBar);

E se configuri le opzioni del plugin come:

JSON

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

allora transpilerà in:

JavaScript

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

Infine, con le opzioni del plugin impostate come:

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"
}

transpilerà in:

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;

Tramite CLI

Shell

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

Tramite Node API

JavaScript

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

Opzioni

moduleIds

boolean predefinito a !!moduleId

Aggiunto in: v7.9.0

Abilita la generazione degli ID modulo.

moduleId

string

Aggiunto in: v7.9.0

Un ID predefinito da utilizzare per il modulo. Non può essere usato insieme a getModuleId.

getModuleId

(name: string) => string

Aggiunto in: v7.9.0

Dato il nome del modulo generato da Babel, restituisce il nome da utilizzare. Restituire un valore falsy farà utilizzare il name originale.

moduleRoot

string

Aggiunto in: v7.9.0

Un percorso root da includere nei nomi dei moduli generati.

Per le opzioni non elencate qui, consulta le opzioni per @babel/plugin-transform-modules-commonjs.