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

roland_reed 发布于2019-08-02 10:12 / 1779人阅读

摘要：而支持的浏览器，它会自动不去执行有关键字的。这些浏览器有默认加载方式的加载方式默认使用的加载方式。需要在从服务器返回的上显示的给予有效的声明不同于传统的必须向浏览器提供有效的。

感谢英文原作者 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

不同于传统的 ,

Browser issues
Edge executes scripts with invalid MIME types (issue).

最后还想说

没想到任何一个小功能，仔细去研究都有这么多的知识点。码文不易，各位给个赞可好。
转载请注明出处

GPU云服务器云服务器在浏览器中使用webrtc 怎样在oss中使用带ip限制的访问控制单独使用webrtc中视频模块 webrtc可以在哪些浏览器使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52191.html

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

摘要：而支持的浏览器，它会自动不去执行有关键字的。这些浏览器有默认加载方式的加载方式默认使用的加载方式。需要在从服务器返回的上显示的给予有效的声明不同于传统的必须向浏览器提供有效的。感谢英文原作者 Jake Archibald 的技术分享各个浏览器对于ES6模块 import 、 export的支持情况 Safari 10.1. Chrome 61. Firefox 54 – beh...

X1nFLY 2019-08-22 16:16 评论0 收藏0
ES6 学习笔记

摘要：类的属性和属性在上一篇面向对象编程中我们已经了解到一个实例化对象会有一个指向构造函数的属性。子类的属性，表示构造函数的继承，总是指向父类。完成构造函数继承的实质如下第二条对原型链完成方法的继承，实质如下另外还有还有三种特殊情况。介绍 ECMAScript 6 在接下来的一段时间内将成为 ECMAScript的一个标准。这个标准预计在今年的时候就会被签署，不管在Github,还是在很多...

alogy 2019-08-21 10:33 评论0 收藏0
Nodejs模块加载与ES6模块加载实现

摘要：以后需要引用模块的变量函数类就在这个模块对象的取出，即使再次进来模块也不会重新执行，只会从缓存获取。所以对相同模块的再次加载都是优先缓存方式，核心模块的缓存检查依然优先于文件模块。内建模块导出启动会生成全局变量，提供方法协助加载内建模块。原始时代作为一门语言的引入代码方式，相较于其他如PHP的include和require，Ruby的require，Python的import机制，...

陈江龙 2019-08-26 10:38 评论0 收藏0
ES6—class与模块化（9）

摘要：中的模块功能主要由两个命令构成和。命令用于规定模块的对外接口，命令用于输入其他模块提供的功能，二者属于相辅相成一一对应关系。文件大括号里面的变量名，必须与被导入模块对外接口的名称相同。每一个模块内声明的变量都是局部变量，不会污染全局作用域。 JavaScript语言自创立之初，一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。很多编程语...

weij 2019-08-26 13:45 评论0 收藏0
javascript中的模块化

摘要：所谓的模块也叫元件或者组件，可以理解为可以服用的功能代码。如遵循规范的和遵循规范的中的模块化。是在文件中引模块的。如果引用一个以上的组件，就可以用把这一组组件放在数组中就可以了，如下，，，二中的模块化。所谓的模块也叫元件或者组件，可以理解为可以服用的功能代码。比如说a页面用功能了，b页面用到了这功能了，所以我们可以把这个功能抽为组件，便于服用。那么javascript中的组件化如何使...

zzbo 2019-08-22 17:21 评论0 收藏0