Aller au contenu principal

@babel/plugin-syntax-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.

astuce

Vous pouvez retirer ce plugin de votre configuration Babel en toute sécurité si vous utilisez @babel/core 7.8.0 ou supérieur.

Installation​

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

Utilisation​

Avec un fichier de configuration (Recommandé)​

babel.config.json
{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Via CLI​

Shell
babel --plugins @babel/plugin-syntax-dynamic-import script.js

Via l'API Node​

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

Utilisation avec Webpack et @babel/preset-env​

Actuellement, @babel/preset-env ne prend pas en compte que l'utilisation de import() avec Webpack repose sur Promise en interne. Les environnements sans support natif de Promise, comme Internet Explorer, nécessiteront l'ajout manuel des polyfills promise et iterator.

Par exemple, avec core-js@3 :

webpack.config.js
const config = {
  entry: [
    "core-js/modules/es.promise",
    "core-js/modules/es.array.iterator",
    path.resolve(__dirname, "src/main.js"),
  ],
  // ...
};

ou

src/main.js
import "core-js/modules/es.promise";
import "core-js/modules/es.array.iterator";

// ...

C'est identique pour core-js@2, à l'exception des chemins d'import légèrement différents :

webpack.config.js
const config = {
  entry: [
    "core-js/modules/es6.promise",
    "core-js/modules/es6.array.iterator",
    path.resolve(__dirname, "src/main.js"),
  ],
  // ...
};

ou

src/main.js
import "core-js/modules/es6.promise";
import "core-js/modules/es6.array.iterator";

// ...