html中的ES6导入与<script src> [重复]

Question

我想知道两者有什么区别

1- import XLibraryComponent from 'xlibrarycomponent' 来自 ES6

与常规方式相比

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

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

那么，有什么区别呢？哪个是最好的方法？

Answer 1

如果您在支持它们的浏览器（或其他环境）中使用实际的 ES6 模块，那将是非常不同的。 This blog article 很好地记录了这些差异。

ES6 规范包含许多关于模块加载的规则，允许在一定程度上延迟模块，以支持循环依赖和其他一些不寻常的情况。

<script src="..."> 语法将同步包含一个脚本文件，并在文件加载后立即评估其内容。

您不能对真正的 ES6 模块使用 script src 语法，因为它们是异步包含的，并且仅在加载模块和任何依赖项后才评估。

为了支持这种新情况但允许在 HTML 中包含脚本，引入了一个新的<module> 标签，其中包含要异步执行的代码并支持模块依赖关系。

请注意，如果您使用的是 RequireJS 或类似的模块加载器 polyfill 类型的解决方案，则这些都不适用，因为您的 imports 将被转换为对加载器的调用。然后加载器将创建一个带有适当源的script 标记，并使用回调系统来模拟模块加载过程。