nomodule属性

Question

我不清楚为什么在支持ES6模块的新浏览器中存在nomodule属性。

在HTML 5中，type属性是可选的，defaults to text/javascript：

type属性提供脚本的语言或数据的格式。如果该属性存在，则其值必须是有效的MIME类型。不得指定charset参数。如果属性不存在，则使用默认值为＆＃34; text / javascript＆＃34;。

它不会默认为<script type="module" src="module.js"></script>。此默认值已更改？如果没有，为什么nomodule有必要？我可以在没有<script src="bundle.js"></script>的情况下使用nomodule吗？

Answer 1

purpose of the nomodule attribute会导致支持module scripts的较新浏览器忽略特定的script元素：

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

规范has a good example：

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

<script type="module" src="app.js"></script>
<script nomodule src="classic-app-bundle.js"></script>
在支持模块脚本的现代用户代理中，将忽略具有script属性的nomodule元素，以及类型为＆＃34; {{1的script元素}}＆＃34;将被提取和评估（作为模块脚本）。相反，较旧的用户代理会忽略module元素的类型为＆＃34; script＆＃34;，因为这是一种未知的脚本类型 - 但是它们在获取时没有问题评估其他module元素（作为经典脚本），因为它们没有实现script属性。

这就是它的工作原理。

在HTML 5中，nomodule属性是可选的，默认为type ...此默认设置是否已更改？

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

如果没有，为什么text/javascript有必要？

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

我可以在没有nomodule的情况下使用<script src="bundle.js"></script>吗？

是 - 如果nomodule不使用模块。如果它使用模块，您需要在其上加bundle.js（在这种情况下，旧浏览器会忽略它，因为它们无法识别type=module的{{1}}值。

Answer 2

nomodule属性

nomodule属性是一个布尔属性，用于向浏览器指示，该浏览器支持模块不需要加载的模块。

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

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

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

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

浏览器将忽略<script type="module">，因为其实现无法处理该问题。没有脚本将被下载并执行。
自此以后，浏览器将忽略nomodule属性，并将继续下载并执行<script nomodule type="text/javascript">脚本。

Answer 3

nomodule属性

如其他答案所述，此布尔属性设置为表示 不应在支持ES2015的浏览器中执行脚本 模块-实际上，该模块可用于提供后备脚本以 不支持模块化JavaScript代码的旧版浏览器。

现在让我们看一个例子。

我正在使用es6 / ES2015功能，并且需要包含core.js才能在IE浏览器中运行应用程序，而其他主要浏览器（例如chrome，firefox，safari）都支持es6 / ES2015功能。您会看到IE浏览器的供应商总大小为150kb。

<script src="core.js"></script> // around 45kb after gzip
<script src="obserPoly.js></script> // around 5kb after gzip
<script src="vender.js></script> // around 100kb after gzip

为什么要在其他浏览器中加载core.js和obserpoly.js（45kb + 5kb = 50kb）。我在脚本中使用了nomodule属性，它像冠军一样工作。现在，Core.js和obserPoly.js脚本仅在IE浏览器中加载。

<script nomodule src="core.js"></script> // around 45kb after gzip
<script nomodule src="obserPoly.js></script> // around 5kb after gzip
<script src="vender.js></script> // around 100kb after gzip

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

3 个答案:

nomodule属性

nomodule属性