如果默认值为 text/javascript，脚本元素的 HTML“nomodule”属性的目的是什么？

What’s the purpose of the HTML “nomodule” attribute for script elements if the default is text/javascript?

提问by dman

I am not clearly understanding why the nomoduleattribute exists in the new browsers that support ES6 modules.

我不太明白为什么该nomodule属性存在于支持 ES6 模块的新浏览器中。

In HTML 5, the typeattribute is optional and defaults to text/javascript:

在 HTML 5 中，该type属性是可选的，默认为text/javascript：

The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is "text/javascript".

type 属性给出了脚本的语言或数据的格式。如果该属性存在，则其值必须是有效的 MIME 类型。不得指定字符集参数。如果属性不存在，则使用的默认值是“text/javascript”。

It doesn't default to <script type="module" src="module.js"></script>. Has this default changed? If not, why would nomodulebe necessary? Can I just use <script src="bundle.js"></script>without nomodule?

它不默认为<script type="module" src="module.js"></script>. 这个默认值改变了吗？如果没有，为什么nomodule需要？我可以<script src="bundle.js"></script>不使用nomodule吗？

回答by sideshowbarker

The purpose of the nomoduleattributeis to cause newer browsers that support module scriptsto ignore a particular scriptelement:

该属性的目的nomodule是使支持模块脚本的较新浏览器忽略特定script元素：

The nomoduleattribute is a boolean attribute that prevents a script from being executed in user agents that support module scripts.

该nomodule属性是一个布尔属性，可防止在支持模块脚本的用户代理中执行脚本。

The spec has a good example:

规范有一个很好的例子：

This example shows how to include a module script for modern user agents, and a classic script for older user agents:

此示例显示了如何为现代用户代理包含一个模块脚本，以及如何为旧用户代理包含一个经典脚本：

<script type="module" src="app.js"></script>
<script nomodule src="classic-app-bundle.js"></script>

In modern user agents that support module scripts, the scriptelement with the nomoduleattribute will be ignored, and the scriptelement with a type of "module" will be fetched and evaluated (as a module script). Conversely, older user agents will ignore the scriptelement with a type of "module", as that is an unknown script type for them — but they will have no problem fetching and evaluating the other scriptelement (as a classic script), since they do not implement the nomoduleattribute.

<script type="module" src="app.js"></script>
<script nomodule src="classic-app-bundle.js"></script>

在支持模块脚本的现代用户代理中，script具有该nomodule属性的元素将被忽略，script具有“ module”类型的元素将被获取和评估（作为模块脚本）。相反，较旧的用户代理将忽略script类型为“ module”的元素，因为这对他们来说是未知的脚本类型——但是他们在获取和评估另一个script元素（作为经典脚本）时没有问题，因为他们没有实现的nomodule属性。

So that's how it works.

这就是它的工作原理。

In HTML 5, the typeattribute is optional and defaults to text/javascript… Has this default changed?

在 HTML 5 中，该type属性是可选的，默认为text/javascript... 这个默认值改变了吗？

The default hasn't changed—it's still text/javascript. But the typeattribute can now also have the value module, which means browsers still parse and execute it as text/javascript—but also specifically as a module script.

默认值没有改变——它仍然是text/javascript。但是该type属性现在也可以具有值module，这意味着浏览器仍将其解析和执行为text/javascript- 但也特别是作为模块脚本。

If not, why would nomodulebe necessary?

如果没有，为什么nomodule需要？

It's necessary in order to prevent new browsers that support module scripts from executing a script that's intended only for old browsers that don't support module scripts, as in the above example.

为了防止支持模块脚本的新浏览器执行仅适用于不支持模块脚本的旧浏览器的脚本，如上例所示，这是必要的。

Can I just use <script src="bundle.js"></script>without nomodule?

我可以<script src="bundle.js"></script>不使用nomodule吗？

Yes—if bundle.jsdoesn't use modules. If it uses modules, you‘d want to put type=moduleon it (in which case old browsers will ignore it since they don't recognize the modulevalue for type).

是——如果bundle.js不使用模块。如果它使用模块，您会想要穿上type=module它（在这种情况下，旧浏览器会忽略它，因为它们无法识别 的module值type）。

回答by Willem van der Veen

nomodule attribute

无模块属性

The nomodule attribute is a boolean attribute which is used to indicate to a browser which doessupport modules that a certain script tag doesn't need to be loaded.

该nomodule属性是用来指示浏览器中的布尔属性，它不支持模块，某脚本标签并不需要加载。

The purpose of the nomodule attribute is to have a backup scriptfor older browser who don't support the <script type="module">and thus will ignore them. Because the older browser neither support the <script type="module">nor the nomodule attribute the following scenarios can occur:

nomodule 属性的目的是为不支持的旧浏览器提供备份脚本<script type="module">，因此将忽略它​​们。由于旧版浏览器既不支持<script type="module">也不支持nomodule 属性，可能会出现以下情况：

---

---

Newer browsers, supports <script type="module">& <script nomodule type="text/javascript">

较新的浏览器，支持<script type="module">& <script nomodule type="text/javascript">

• The browser can load and execute the <script type="module">script
• The browser recognizes the nomodule attribute and doesn't load <script nomodule type="text/javascript">.

• 浏览器可以加载并执行<script type="module">脚本
• 浏览器识别 nomodule 属性并且不加载<script nomodule type="text/javascript">。

---

---

Older browsers, don'tsupport <script type="module">& <script nomodule type="text/javascript">

较旧的浏览器，不支持<script type="module">& <script nomodule type="text/javascript">

• The browser will ignore the <script type="module">since its implementation cannot process this. No script will be downloaded and executed.
• The browser will ignore the nomodule attribute since and will continue to dowload and execute the <script nomodule type="text/javascript">script.

• 浏览器将忽略 ，<script type="module">因为它的实现无法处理它。不会下载和执行任何脚本。
• 浏览器将忽略 nomodule 属性，并将继续下载和执行 <script nomodule type="text/javascript">脚本。