ES Module浏览器Polyfill

开门见山

ES Module是2014年提出来的，也就是说低版本的浏览器是不支持的，例如万恶的IE浏览器

在IE低版本中使用ES Modules，需要加两个script标签
//引用babel
<script src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/babel-borwser.build.js"></script> 

//esmodule-loader
<script src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/borwser-es-module-loader.js"></script>
实现原理就是通过esmodule-loader把代码读出来交给babel转换，模块代码就可以正常工作

//用于支持promise
<script src="https://unpkg.com/promise-polyfill@8.1.3/dist/polyfill.min.js"></script>

ES Module问题

在低版本浏览器中通过上面的代码可以正常执行，但是在Chrome（最新）浏览器中，代码却执行了两次，

babel执行了一次，Chrome也执行了一次，也就是两次，这个问题可以通过script新属性解决，

让代码在不支持的ES-module浏览器上执行

<script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/babel-borwser.build.js"></script>

<script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/borwser-es-module-loader.js"></script>

<script nomodule src="https://unpkg.com/promise-polyfill@8.1.3/dist/polyfill.min.js"></script>

此代码仅在自己测试的用一下，生产环境建议不要使用

谢谢观看，码字不易，麻烦点个赞和关注