浏览器如何处理ES6导入/导出语法

Question

我一直在思考这个问题很多天,我决定问专家.

浏览器如何处理新的导入/导出语法？我的意思是:模块是否会异步加载？仅引用我的主文件或条目文件和浏览器将延迟加载requiere模块.

也许我错过了或误解了这个新架构的一些东西？

非常感谢你!

问候.

Answer 1

现在这已经标准化,供应商正在积极寻求实施它(例如,这是Chromium的问题).

模块是否会异步加载？

是的,提供两种选择; 详情如下.

仅引用我的主文件或条目文件和浏览器将延迟加载requiere模块.

不是那么"懒惰",而是.

启用它(当它可用时)

(据我所知,目前没有浏览器提供模块支持.这是基于上面链接的规范.)

要获得这种行为(当它可用),你会指定你的脚本(即使你的主要原因之一)是一个模块使用type="module":

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

或者用于内联脚本

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

这意味着将根据JavaScript规范中的模块定义而不是脚本定义来解析和处理脚本,这意味着它可以具有导入(和导出).

相对于脚本的URL(对于通过上述单独的资源加载的模块main.js)或相对于文档(对于上面的内联模块),相对于脚本的URL 解析导入.

例如,如果我在我的文档中有这个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"标记上放置任何特殊标记属性,则将解析所有模块的依赖项,然后在完成HTML的解析后运行脚本.如果包含该node_modules属性,它可能会在HTML解析完成之前运行得更早(例如,如果所有脚本都在缓存中).(/对模块无效.)