Aller au contenu principal

@babel/plugin-transform-modules-umd

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 →

History
VersionChanges
v7.14.0Implemented the importInterop option
info

Ce plugin est inclus dans @babel/preset-env sous l'option modules

Ce plugin transforme les modules ES2015 en format UMD. Notez que seule la syntaxe des instructions import/export (import "./mod.js") est transformée, car Babel ne connaît pas les différences d'algorithmes de résolution entre les implémentations des modules ES2015 et UMD.

⚠️ Ce plugin ne prend pas en charge l'import dynamique (import('./lazy.js')).

Exemple​

Entrée

JavaScript
export default 42;

Sortie

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

Installation​

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

Utilisation​

Avec un fichier de configuration (Recommandé)​

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

Vous pouvez également remplacer les noms de bibliothèques spécifiques lorsque ce module s'exécute dans le navigateur. Par exemple, la bibliothèque es6-promise s'expose comme global.Promise plutôt que global.es6Promise. Cela peut être accommodé via :

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

Sémantique par défaut​

Plusieurs points sont à noter concernant la sémantique par défaut.

Premièrement, cette transformation utilise le nom de base de chaque import pour générer les noms globaux dans la sortie UMD. Cela signifie que si vous importez plusieurs modules avec le même nom de base, comme :

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

cela se transpilera en deux références vers le même objet global du navigateur :

JavaScript
factory(global.fooBar, global.fooBar);

Si vous configurez les options du plugin ainsi :

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

cela transpilera toujours les deux en un seul objet global du navigateur :

JavaScript
factory(global.fooBAR, global.fooBAR);

car encore une fois, la transformation utilise uniquement le nom de base de l'import.

Deuxièmement, le remplacement spécifié sera toujours passé à la fonction toIdentifier dans babel-types/src/converters. Cela signifie que si vous spécifiez un remplacement comme une expression de membre :

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

cela ne se transpilera pas en factory(global.fizz.buzz). À la place, cela se transpilera en factory(global.fizzBuzz) selon la logique de toIdentifier.

Troisièmement, vous ne pouvez pas remplacer le nom global exporté.

Sémantique plus flexible avec exactGlobals: true​

Tous ces comportements peuvent limiter la flexibilité de la map globals. Pour supprimer ces limitations, vous pouvez définir l'option exactGlobals à true. Cela indique au plugin de :

  1. toujours utiliser la chaîne d'import complète au lieu du nom de base lors de la génération des noms globaux

  2. ignorer le passage des remplacements globals à la fonction toIdentifier. À la place, ils sont utilisés exactement comme écrits, vous obtiendrez donc des erreurs si vous n'utilisez pas des identifiants valides ou des expressions de membre (point) non calculées valides.

  3. autoriser le remplacement du nom global exporté via la map globals. Tout remplacement doit à nouveau être un identifiant valide ou une expression de membre valide.

Ainsi, si vous définissez exactGlobals à true sans passer de remplacements, le premier exemple :

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

se transpilera en :

JavaScript
factory(global.fooBar, global.mylibFooBar);

Et si vous configurez les options du plugin ainsi :

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

alors cela se transpilera en :

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

Enfin, avec les options du plugin configurées ainsi :

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

cela se transpilera en :

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;

Via CLI​

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

Via l'API Node​

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

Options​

moduleIds​

boolean par défaut !!moduleId

Ajouté dans : v7.9.0

Active la génération d'ID de module.

moduleId​

string

Ajouté dans : v7.9.0

Un ID fixe à utiliser pour le module. Ne peut pas être utilisé avec getModuleId.

getModuleId​

(name: string) => string

Ajouté dans : v7.9.0

Étant donné le nom de module généré par Babel, retourne le nom à utiliser. Retourner une valeur falsy utilisera le name original.

moduleRoot​

string

Ajouté dans : v7.9.0

Un chemin racine à inclure dans les noms de modules générés.

Pour les options non listées ici, voir les options de @babel/plugin-transform-modules-commonjs.