ES6导入vs html中的<script src =“”>

时间:2015-07-29 18:37:04

标签: javascript ecmascript-6

我想知道

&#xA;&#xA;

1- 从ES6中的'xlibrarycomponent'导入XLibraryComponent

&# xA;&#xA;

与常规方式

&#xA;&#xA;

2- &lt; script src =“/ X / Libray / Component / path”&gt; &lt; / script&gt;

&#xA;&#xA;

我问这个是因为我从React开始,我看到你注入一些组件正在执行 import X' x'和你注入html的其他组件作为我在上面发布的第二种方式。

&#xA;&#xA;

那么,有什么区别?哪种方式最好?

&#xA;

1 个答案:

答案 0 :(得分:7)

如果您在支持它们的浏览器(或其他环境)中使用实际的ES6模块,则这些模块非常不同。 This blog article对差异有很好的解释。

ES6规范包含许多围绕模块加载的规则,允许模块稍微推迟,以支持循环依赖和其他一些不寻常的情况。

<script src="..."&gt;语法将同步包含脚本文件,并在文件加载后立即评估内容。

您不能将script src语法用于真正的ES6模块,因为它们是异步包含的,只有在加载了模块和任何依赖项后才会进行评估。

为了支持这种新案例但允许脚本包含在HTML中,引入了一个新的<module>标记,其中包含要异步执行的代码并支持模块依赖性。

请注意,如果您正在使用RequireJS或类似的模块加载器polyfill-type解决方案,则这些都不适用,因为您的import将变为对加载程序的调用。然后,加载器将使用适当的源创建script标记,并使用回调系统来模拟模块加载过程。