JavaScript 动态导入模块

在 ES6 模块中导入和导出模块非常简单。

首先，import 的参数不能是动态生成的。

要导入的模块路径必须是字符串，不能是一个函数调用。下面的导入不行：

import  ... from getName()

其次，不能在条件判断中或运行时导入：

if（true）{
     import ...
}

这是因为 import/export 旨在为整套代码提供必备的模块。

但是我们该怎样实现动态导入一个模块呢？

import() 表达式

import(module) 表达式会加载该模块，然后返回一个解析为模块对象的 promise。可以在代码中任意位置调用它。

import(getName).then(res=>{})

或者如果是在一个异步函数里，也可以这样写 let module = await import(modulePath)。

例如我们有一个模块 say.js：

say.js
export function Hi(){

}
export function Bye(){

}

然后可以这样动态导入：

let { Hi,Bye } =await import(./say.js)

如果 say.js 有一个默认导出的对象：

export  default function (){

}

要访问该对象，我们可以使用模块对象的 default 属性：

let obj =await import(./say.js)
let say=obj.default
say()

注意：虽然 import() 看起来是函数调用，实际上它只是一种特殊的句法，恰巧用了双引号而已。所以不能把 import 赋值到一个变量里或者调用 call/apply。它不是一个函数。