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

Question

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

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

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

非常感谢！

问候。

Answer 1

这是standardized now，并得到所有主流现代浏览器的支持。

  

模块是否会异步加载？

是的，有两种选择;详情如下。

  

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

没那么多＆＃34;懒惰，＆＃34;但是，是的。

启用它

规范here和here（以及可能在其他地方）的详细信息。

要获得此行为，请使用type="module"指定您的脚本是模块：

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

或内联脚本

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

这意味着脚本是根据JavaScript规范中的Module定义而不是Script定义来解析和处理的，这意味着它可以具有导入（和导出）。

相对于脚本的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 1}}，/或./。

异步

我上面说过，模块是异步加载的，有两种选择。规范中的这个图形说得最好（参见最新版本的规范）：

正如您所看到的，对于../脚本，如果您未在type="module"标记上放置任何特殊标记属性，则所有模块的依赖项都将得到解决，然后，一旦完成HTML的解析，就会运行该脚本。如果包含script属性，它可能会在HTML解析完成之前运行得更早（例如，如果所有脚本都在缓存中）。 （async对模块无效。）