在开发 Web 应用程序时，为了提高性能和兼容性，我们需要使用现代的 JavaScript 模块化方案。然而，在实际部署到生产环境时，我们必须考虑到一些用户可能使用老版本浏览器的情况。这时候，我们就需要使用构建策略来同时支持新旧浏览器。
module 和 nomodule
<script> 标签有一个 type 属性，它可以指定脚本内容的 MIME 类型。其中，type="module" 表示这个脚本是一个 ECMAScript 模块，而 type="text/javascript" 是传统的 JavaScript 脚本。
现代浏览器都支持 type="module" 的 JavaScript 模块，并且会按需下载、编译和执行；而老版本浏览器不支持这种模块化方式，会将其视为无法解析的脚本忽略掉。
因此，我们可以使用以下代码结构来实现 module 和 nomodule 的构建策略：
---- ------- ---------- ------ ------ --- ------- ------------- ---------------------- ---- -------- ---------- ------ ------------- --- ------- -------- -----------------------------
这样，如果浏览器支持 ECMAScript 模块，则加载 app.js；否则，加载 legacy-app.js。
示例代码
下面是一个示例代码，演示了如何使用 module 和 nomodule 构建策略：
---- ---------- ---
--------- -----
------
------
--------- -----------
-------
------
----------- -- -- --------
-- -----------------
---- ------- ---------- ------ ------ ---
------- ------------- ----------------------
---- -------- ---------- ------ ------------- ---
------- -------- -----------------------------
-------
--------- ------ ------ - -------- - ---- ------------- ----- --------- - ----------------------------------- --------------------- - ------------------
-- -------- ------ -------- -------------- - ------ ------- ---------- -
-- ------------- ----- --------- - ----------------------------------- --------------------- - ----- ------- ---- --- ------- ------ -------------
这个示例代码中，如果浏览器支持 ECMAScript 模块，则会加载 app.js 中的代码，并显示 "Hello, World!"；否则，会加载 legacy-app.js 中的代码，并显示 "Your browser does not support modern JavaScript."。
结论
借助构建策略 module 和 nomodule，我们可以使用现代的 JavaScript 模块化方案，同时保证老版本浏览器的兼容性。这样一来，就能够更好地提高 Web 应用程序的性能和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/35775