@babel/plugin-transform-dynamic-import

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 →

info

Ce plugin est inclus dans @babel/preset-env, dans le cadre de ES2020.

Transforme les expressions import() en formats de module non-ESM.

Quand (ne pas) utiliser ce plugin

Si vous utilisez un bundler comme Webpack, Rollup ou Parcel, vous ne devez pas utiliser ce plugin et devez laisser votre bundler gérer les expressions import().

Vous devriez utiliser ce plugin si :

• Vous développez une bibliothèque Node.js en ESM mais souhaitez la distribuer en CommonJS (CJS) : installez ce plugin et @babel/plugin-transform-modules-commonjs

• Vous utilisez RequireJS pour charger des modules dans le navigateur : installez ce plugin et @babel/plugin-transform-modules-amd

• Vous utilisez SystemJS pour charger des modules dans le navigateur : installez ce plugin et @babel/plugin-transform-modules-systemjs

Ce plugin doit être utilisé avec l'un des plugins de transformation de module mentionnés ci-dessus.

Exemple

input.js

import("jquery").then($ => {});

sera transformé en

CommonJS

output.js

Promise.resolve()
  .then(() => _interopRequireWildcard(require("jquery")))
  .then(($) => {});

AMD

output.js

define(["require"], function (_require) {
  new Promise((_resolve, _reject) =>
    _require(
      ["jquery"],
      (imported) => _resolve(_interopRequireWildcard(imported)),
      _reject
    )
  ).then(($) => {});
});

SystemJS

output.js

System.register([], function (_export, _context) {
  "use strict";

  return {
    setters: [],
    execute: function () {
      _context.import("jquery").then(($) => {});
    }
  };
});

Installation

npm

npm install --save-dev @babel/plugin-transform-dynamic-import

Yarn

yarn add --dev @babel/plugin-transform-dynamic-import

pnpm

pnpm add --save-dev @babel/plugin-transform-dynamic-import

Bun

bun add --dev @babel/plugin-transform-dynamic-import

Utilisation

Avec un fichier de configuration (Recommandé)

babel.config.json

{
  "plugins": [
    "@babel/plugin-transform-dynamic-import",
    "@babel/plugin-transform-modules-commonjs"
  ]
}

Via CLI

Shell

babel --plugins=@babel/plugin-transform-dynamic-import,@babel/plugin-transform-modules-amd script.js

Via l'API Node

JavaScript

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

Références

• Proposition : import()