如何将浏览器处理ES6导入/导出语法如何将浏览器处理ES6导入/导出语法(How will brow

2019-05-12 05:35发布

我一直在想解决这个问题,很多天了,我已经决定请专家。

如何浏览器将处理新的导入/导出语法? 我的意思是:将这些模块可以异步加载? 仅参照我的主要或入境文件,浏览器将延迟加载requiere模块。

也许我失去了或误解的东西这个新的架构?

非常感谢你!

问候。

Answer 1:

这是现在标准化和所有重要的现代浏览器都支持。

将这些模块可以异步加载?

是的,有两种方法可供选择; 下面详细介绍。

仅参照我的主要或入境文件,浏览器将延迟加载requiere模块。

与其说是“懒”,但肯定的。

它启用

在规范中详细这里和这里 (也可能是其他地方)。

要获得这种行为,可以指定自己的脚本是通过使用模块 type="module"

<script src="main.js" type="module"></script>

或内嵌脚本

<script type="module">
// ...module code here
</script>

这意味着,该脚本解析和每个处理模块中的JavaScript规范,而不是每个定义的脚本定义,这意味着它可以有进口(出口)。

进口相对于所述脚本的URL(用于通过单独的资源加载模块,如解决main.js就像上面CSS)或相对于所述文件(对于类似上面的内嵌模块)。

因此,举例来说,如果我有这个在我的文档在http://example.com/index.html

<script src="./handy/stuff/nifty.js" type="module"></script>

...和nifty.js包含

import Thingy from "./thingy.js";

...然后在浏览器查找http://example.com/handy/stuff/thingy.js ,不http://example.com/thingy.js 。 此外,如同CSS进口。

需要注意的是./在该模块说明符是必需的,只是from "thingy.js"将无法正常工作。 这是因为裸说明符不允许的,因为他们可能会结束有特殊的含义。 (例如,在Node.js的,这就是你指定内置模块,并安装在模块node_modules 。)模块说明符必须是一个完整的URL,或开始用相对URL /./../

异步

我说上面模块异步加载,有两种方法可供选择。 这从规范的图形表示,它最好的(见它的最新副本规范):

正如你所看到的,对于type="module"的脚本,如果你不把对任何特殊标志的属性script标签,所有模块的依赖也将得到解决,那么该脚本会被运行一次解析HTML的完成。 如果包括async属性,它可能运行更快,以前HTML解析完成(例如,如果所有脚本都在高速缓存)。 ( defer无效模块)。



Answer 2:

根据这个帖子在Mozilla公司的网站,它是由实现:

由于系统没有规定如何装载作品,因为你可以通过查看源代码的进口报关手续的时间提前找出所有依赖,ES6的实现可以自由地做所有的工作在编译时和捆绑所有的模块集成到一个单一的文件,以船他们在网络上!

这可能会在未来改变,因为现在还没有完全标准化的,但你可以肯定,你不会需要添加脚本标签的每一个模块。 现在有些模块装载机捆绑为您的所有文件,但是这可能并非如此,当未来会现场,因为它不会在HTTP2性能优势。

你可以阅读的ES6规范import 这里 。



文章来源: How will browsers handle ES6 import/export syntax