ES6导入vs html中的<script src>

Question

我想知道它们之间有什么区别

import XLibraryComponent from 'xlibrarycomponent'来自ES6的1-

与常规方式相比

2- <script src="/X/Libray/Component/path"></script>

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

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

Answer 1

如果您在支持它们的浏览器(或其他环境)中使用实际的ES6模块,则这些模块非常不同.这篇博客文章对差异进行了很好的阐述.

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

该<script src="...">语法将同步包括脚本文件和文件已经加载了评估的内容.

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

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

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