1.文档阅读 https://es6.ruanyifeng.com/#docs/module // Module 的语法 2.整理输出 TBD 动态导入模块, 有时要根据环境不同, 动态导入[是否导入, 或不同]模块, ES6的解决方案: ES2020提案 引入import() 函数,支持动态加载模块。 Note: import 和export 命令只能在模块的顶层,不能在代码块之中(比如,在if 代码块之中,或在函数之中)。
import(specifier)
上面代码中,import 函数的参数specifier ,指定所要加载的模块的位置。import 命令能够接受什么参数,import() 函数就能接受什么参数,两者区别主要是后者为动态加载。 import() 返回一个 Promise 对象。下面是一个例子。
const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`) .then(module => {
module.loadPageInto(main); }) .catch(err => {
main.textContent = err.message; });
import() 函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。 它是运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。 另外,import() 函数与所加载的模块没有静态连接关系,这点也是与import 语句不相同。 import() 类似于 Node 的require 方法,区别主要是前者是异步加载,后者是同步加载。 Code:
// Testing environment
window.DEBUG = /localhost/.test(window.location.host);
if (window.DEBUG) {
import('./app/mock/advertiser-data')
.then((MockAdvertiser) => {
this.setAdvertiserInfo(MockAdvertiser.default);
})
.catch((err) => {
// eslint-disable-next-line no-console
console.error(err);
});
}
优化 async / await 同时导入多个模块
private async _dynamiclyImport(){
const [MockAdvertiser, MockProductFamilies, PrePaidData, PostPaidData] =
await Promise.all([
import('./app/mock/advertiser-data'),
import('./app/mock/families-data'),
import('./app/mock/pre-paid-data'),
import('./app/mock/post-paid-data'),
]);
this.setAdvertiserInfo(MockAdvertiser.default);
this.setProductFamilies(MockProductFamilies.default);
this.setPackages(PrePaidData.default, PostPaidData.default);
}
if (window.DEBUG) {
this._dynamiclyImport();
}
可以看到打包后的文件目录 // 单独为四个文件, 按需加载 后续补充 ... |