ES6 - import/export [如何动态导入模块] - 学习/实践

1.应用场景

主要用于学习, 使用ES6的导入导出模块, 以及动态导入的用法.

2.学习/操作

1.文档阅读

https://es6.ruanyifeng.com/#docs/module // Module 的语法

2.整理输出

TBD

动态导入模块, 有时要根据环境不同, 动态导入[是否导入, 或不同]模块, ES6的解决方案:

ES2020提案引入import()函数，支持动态加载模块。

Note:

扫描二维码关注公众号，回复： 12889184 查看本文章

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();

}

可以看到打包后的文件目录 // 单独为四个文件, 按需加载

后续补充

...

3.问题/补充

1.动态导入模块, 是否用AMD比有Module更好一些？

https://humanwhocodes.com/blog/2016/04/es6-module-loading-more-complicated-than-you-think/ // ES6 module loading: More complicated than you think

2. 如果使用 CommonJs规范去实现动态加载?

...

4.参考

https://es6.ruanyifeng.com/#docs/module // Module 的语法

https://humanwhocodes.com/blog/2016/04/es6-module-loading-more-complicated-than-you-think/ // ES6 module loading: More complicated than you think

后续补充

...

ES6 - import/export [如何动态导入模块] - 学习/实践

猜你喜欢