@babel/plugin-transform-dynamic-import

Traduzione Beta Non Ufficiale

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

informazioni

Questo plugin è incluso in @babel/preset-env, nello standard ES2020.

Trasforma le espressioni import() in formati di modulo non-ESM.

Quando (non) usare questo plugin

Se stai utilizzando un bundler come Webpack, Rollup o Parcel, non dovresti usare questo plugin e lasciare che il tuo bundler gestisca le espressioni import().

Dovresti usare questo plugin se:

• Stai sviluppando una libreria Node.js in ESM ma vuoi distribuirla in CommonJS (CJS): Installa questo plugin e @babel/plugin-transform-modules-commonjs

• Utilizzi RequireJS per caricare moduli nel browser: Installa questo plugin e @babel/plugin-transform-modules-amd

• Utilizzi SystemJS per caricare moduli nel browser: Installa questo plugin e @babel/plugin-transform-modules-systemjs

Questo plugin deve essere utilizzato insieme a uno dei plugin di trasformazione dei moduli menzionati sopra.

Esempio

input.js

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

verrà trasformato in

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(($) => {});
    }
  };
});

Installazione

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

Utilizzo

Con un file di configurazione (Consigliato)

babel.config.json

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

Tramite CLI

Shell

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

Tramite Node API

JavaScript

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

Riferimenti

• Proposta: import()