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

怼烎@ 2023-01-09 15:57 522阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于学习, 使用ES6的导入导出模块, 以及动态导入的用法.</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

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

3.问题/补充

<table> 
 <tbody> 
 <tr> 
 <td> <h3>1.动态导入模块, 是否用AMD比有Module更好一些？</h3> <a href="https://humanwhocodes.com/blog/2016/04/es6-module-loading-more-complicated-than-you-think/" rel="nofollow">https://humanwhocodes.com/blog/2016/04/es6-module-loading-more-complicated-than-you-think/</a>&nbsp;//&nbsp;ES6 module loading: More complicated than you think <h3>2. 如果使用 CommonJs规范去实现动态加载?</h3> <img alt="" height="1156" src="https://img-blog.csdnimg.cn/20210122114820640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="648"> ... </td> 
 </tr> 
 </tbody> 
</table>

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://es6.ruanyifeng.com/#docs/module" rel="nofollow">https://es6.ruanyifeng.com/#docs/module</a>&nbsp;//&nbsp;Module 的语法 <a href="https://humanwhocodes.com/blog/2016/04/es6-module-loading-more-complicated-than-you-think/" rel="nofollow">https://humanwhocodes.com/blog/2016/04/es6-module-loading-more-complicated-than-you-think/</a>&nbsp;//&nbsp;ES6 module loading: More complicated than you think </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...