javascript - 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 语句。

但是...然后我如何导入这些模块脚本计算的内容到我的 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.js" type="module"></script>

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

Answer 1

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

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

So, is exports intended for communication between sub-modules and modules then, rather than for between modules and a global script? That is to say modules never export, only sub-modules do?

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

That might have been the final piece of the puzzle I needed. So exports is just for sub-modules (and sibling-modules), then? Standalone, self-contained top-level modules don't need exports because any functionality happens right there in the module - the data never needs to go anywhere else. (Is that right?)

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

I may wish to write some optional modules which declare functions, calculate variables and objects and, after calculation, make all the declared and calculated values available to global-scripts.js. But... how do I then import what these module scripts calculate into my global-script.js?

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

So, do I now need to have two global scripts?

不，你摆脱了全局脚本，你不再使事情变得全局。

Or is there an alternative standard architecture which we're all supposed to be using?

模块架构:

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

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