npm—babel-plugin-syntax-dynamic-import(插件语法动态导入)

参考文档

https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/

https://babeljs.io/docs/en/configuration

1. 安装

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

--save-dev     表示开发时的依赖
--save         表示生产环境中需要的依赖
@babel/plugin-syntax-dynamic-import

支持babel语法动态导入的插件

2.使用

      1. 通过 .babelrc (推荐)

// JSON
module.exports = {
  presets: ['@vue/app'],
  plugins: ['@babel/plugin-syntax-dynamic-import']
}

      2.  通过CLI

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

      3. 通过Node API

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

3.预设兼容和IE兼容

      使用Webpack和@ babel / preset-env

      目前，@babel/preset-env不知道import()与Webpack一起Promise使用依赖于内部。没有内置支持的环境Promise（如Internet Explorer）将需要手动添加promise和iterator填充polyfill。

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

或者

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

// ...