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 - 因为它只适用于模块脚本 - 而且（除非我弄错了）使用global-scripts.js 似乎是个坏主意除了经典脚本。

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

<script src="/global-script-is-a-classic-script.js"></script>
<script src="/module-mothership-is-a-module-script.js" type="module"></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

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