import按条件加载

发布时间 2023-04-06 11:55:00作者: chicidol
 
// 报错
if (x === 2) {
  import MyModual from './myModual';
}
// 正确做法
import()加载模块成功以后,这个模块会作为一个对象,当作then方法的参数。因此,可以使用对象解构赋值的语法,获取输出接口。
import('./myModule.js')
.then(({export1, export2}) => {
  // ...·
});
上面代码中,export1和export2都是myModule.js的输出接口,可以解构获得。

如果模块有default输出接口,可以用参数直接获得。
import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});
上面的代码也可以使用具名输入的形式。
import('./myModule.js')
.then(({default: theDefault}) => {
  console.log(theDefault);
});
如果想同时加载多个模块,可以采用下面的写法。
Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

参考:https://es6.ruanyifeng.com/?search=es2015&x=0&y=0#docs/module#import