ES2015 模块化架构的标准方法是什么？

Question

我想我现在基本上了解（至少在理论上）ES2015 模块是如何工作的。

我不明白（这远非无关紧要）是如何启用模块脚本来通知我的主脚本。

通常，在我的 HTML 文档的底部，我有如下内容：

<script src="/global-script-is-a-classic-script.js"></script>

就是这样。不defer，不async，不type="module"。

我可能希望编写一些可选模块来声明函数、计算变量和对象，然后使所有声明和计算的值可用于global-scripts.js：

<script src="/module-script-1.mjs" type="module"></script>
<script src="/module-script-2.mjs" type="module"></script>
<script src="/module-script-3.mjs" type="module"></script>

当然，这些模块脚本中的每一个都将包含一个exports语句。

但是......我import如何将这些模块脚本计算到我的global-script.js？

我不能使用import- 因为它只适用于Module Script - 并且（除非我弄错了）似乎global-scripts.js除了Classic Sc​​ript之外的任何东西都是一个坏主意。

那么，我现在需要有两个全局脚本吗？

<script src="/global-script-is-a-classic-script.js"></script>
<script src="/module-mothership-is-a-module-script.mjs"></script>

或者是否有我们都应该使用的替代标准架构？

Answer 1

似乎您并没有真正理解模块架构的设计理念的变化。你不会让事情全球化。模块导入它需要的其他模块并从导入中获取其功能，而不是从某些全局函数集。在模块化架构中，不会有全局脚本。这就是为什么您的想法不太适合模块化架构的原因。

exports是一种使导入模块的任何人都可以公开访问某些入口点或数据的方法，同时将其他所有内容保留在模块本地。必须导入模块才能访问这些入口点。

那么，导出是用于子模块和模块之间的通信，而不是用于模块和全局脚本之间的通信？也就是说模块从不导出，只有子模块呢？

大多。但是，即使是顶级模块也可以有导出。它们不会用于项目中的任何顶级模块，但它可能可以用于其他项目，其中它不是顶级模块并且由其他模块导入。模块架构让你可以考虑代码重用和代码共享，而无需做很多额外的工作。您编写项目的正常方式应该会自动创建一堆可重用的代码。

那可能是我需要的最后一块拼图。那么导出仅用于子模块（和兄弟模块），然后呢？独立的、自包含的顶级模块不需要导出，因为任何功能都发生在模块中——数据永远不需要去其他任何地方。（那正确吗？）

是的。除非您可能希望能够在导入它的另一个项目中重用该模块，并且确实想要导入一些入口点或数据。

我可能希望编写一些可选模块来声明函数、计算变量和对象，并在计算后将所有声明和计算的值提供给 global-scripts.js。但是...然后我如何将这些模块脚本计算的内容导入到我的 global-script.js 中？

您将在模块设计中完全摆脱全局脚本。您将拥有一个导入其他模块的顶级模块。

那么，我现在需要有两个全局脚本吗？

不，您摆脱了全局脚本，并且不再使事情变得全局化。

或者是否有我们都应该使用的替代标准架构？

模块架构：

Top Level Module
    import module1
       import moduleA
          import moduleZ
       import moduleB
    import module2
       import moduleB
       import moduleC
    import module3
       import moduleA
       import moduleD

这可以根据需要达到任意深度。模块被缓存并且只初始化一次，因此从多个地方导入相同的模块非常好且非常高效。