ES6 import与HTML中的<script src>有何区别

Question

我想知道以下两种方式的区别:

1- 在ES6中使用import XLibraryComponent from 'xlibrarycomponent' 2- 常规方式: <script src="/X/Libray/Component/path"></script> 我问这个问题是因为我正在学习React, 我看到有些组件用import X from 'x'注入，而对于其他组件则采用上面我提到的第二种方式注入到HTML中。

那么，这两种方式有什么不同？哪种方式更好？

- Non

---

可能会有帮助 https://github.com/ModuleLoader/es6-module-loader/wiki/Brief-Overview-of-ES6-Module-syntax - Paul S.

你已经问过这个问题了，为什么要再次询问？ - Amit

投票支持这个问题，因为我喜欢这里的措辞比重复的更好。我也喜欢ssube给出的答案，可能是因为问题措辞更好而吸引人。Marcelo，如果你同意的话，也许考虑删除你的其他问题？ - pwilcox

Answer 1

如果您在支持ES6模块的浏览器（或其他环境）中使用实际的ES6模块，则这些模块与传统的script标签非常不同。这篇博客文章对它们之间的差异有很好的解释。

ES6规范包含许多关于模块加载的规则，允许模块被稍微推迟，以支持循环依赖和一些其他不寻常的情况。 <script src="...">语法将同步地包含一个脚本文件，并在文件加载后立即评估其内容。

您不能使用script src语法来加载真正的ES6模块，因为它们是异步包含的，只有在模块及其所有依赖项都被加载后才会评估。

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

请注意，如果您使用RequireJS或类似的模块加载器填充解决方案，则不适用于此内容，因为您的import将转换为对加载程序的调用。然后，加载器将创建具有适当源的script标记，并使用回调系统来模拟模块加载过程。

- ssube