在浏览器中使用ES6的模块功能 import 及 export

感谢英文原作者 Jake Archibald 的技术分享

各个浏览器对于ES6模块 import 、 export的支持情况

Safari 10.1.
Chrome 61.
Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config.
Edge 16.

ES6 import 和 export 在浏览器当中的使用

1.显示声明type="module"

script 里面要加 type="module", 这样浏览器才会把相关的代码当作ES6的module 来对待

2.不能写“裸”路径如：

直接写 'utils.js' 会报错
你可以写绝对路径和相对路径，但是不能直接写文件名，即使是同一层级下面的文件。也要加上 './name.js'
文件名后缀 .js 必须要有，不然浏览器无法识别路径。

3.如何向下兼容

使用 "nomodule" 关键字来实现浏览器的向下兼容

我是这样理解的，老的浏览器本身不会识别type="module" js，也就不会去有执行有type="module" 的js代码（但是还是会下载的哈）。
也不识别 nomodule 关键字，所以它会忽略nomodule，即正常执行这个有nomodule标识的js。
而支持type=“module”的浏览器，它会自动不去执行有nomodule关键字的js。甚至连下都不去下载。
所以向下兼容的功能就走通了（这个大家用不同的浏览器试试，立刻可以明白）

唯一的问题，还有一类浏览器，它支持 type="module" 的 ES6特性，但是它不支持nomodule关键字。也就是说，即使有nomodule标识，它还是会去下载并且执行这个js。即使它已经执行了 type=“module”的 js。
这些浏览器有

Firefox doesn't support nomodule (issue). Fixed in Firefox nightly!
Edge doesn't support nomodule (issue). Fixed in Edge 16!
Safari 10.1 doesn't support nomodule. Fixed in Safari 11!

4.默认加载方式

type=“module”的加载方式默认使用 defer的加载方式。

关于defer 和 async ：defer和async 都是异步加载代码。但是defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行。 async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

内联的
而如果是传统的script 内联js，调用的那个js文件在后面的话，会报错。
5.支持async的加载方式

type="module" 也可以使用 async 的方式进行加载(包括其内联的 import)，等同普通 js 采用 async 进行加载的方式
Browser issues
Firefox doesn't support async on inline module scripts (issue)

6.只执行一次

Browser issues
Edge executes modules multiple times (issue). Fixed, but not yet shipped (expect Edge 17 to ship with the fix).

7.关于CORS

type="module" 默认不支持跨域，这一点儿与传统js或图片完全不一样。传统js或图片默认就是支持跨域的。如果你想 type="module" 支持跨域。需要在从服务器返回的header上显示的给予有效的 CORS声明

Access-Control-Allow-Origin: *

Browser issues
Firefox fails to load the demo page (issue).
Edge loads module scripts without CORS headers (issue). Fixed in Edge 16!

9.Mime-types

不同于传统的 ,

在浏览器中使用ES6的模块功能 import 及 export

ES6 import 和 export 在浏览器当中的使用

1.显示声明type="module"

2.不能写“裸”路径如：

3.如何向下兼容

4.默认加载方式

5.支持async的加载方式

6.只执行一次

7.关于CORS

9.Mime-types

你可能感兴趣的:(在浏览器中使用ES6的模块功能 import 及 export)