构建可在所有主流浏览器中正常运行的网站是开放式 Web 生态系统的核心原则。不过，这意味着您需要额外的工作来确保您编写的所有代码在您计划定位的每个浏览器中都受支持。如果您想使用新的 JavaScript 语言功能，则需要将这些功能转译为向后兼容的格式，以便在不支持这些功能的浏览器中使用。
Babel 是最广泛使用的工具，可将包含较新语法的代码编译为不同的浏览器和环境（例如 Node）可以理解的代码。本指南假定您使用的是 Babel，因此您需要按照设置说明将其纳入您的应用（如果尚未纳入）。如果您在应用中使用 webpack 作为模块捆绑器，请在 Build Systems 中选择 webpack。
如需使用 Babel 仅转译用户所需的内容，您需要：
- 确定要定位到的浏览器。
- 使用
@babel/preset-env并指定适当的浏览器目标平台。 - 使用
<script type="module">停止向不需要转译代码的浏览器发送转译代码。
确定要定位到的浏览器
在开始修改应用中代码的转译方式之前，您需要确定哪些浏览器会访问您的应用。分析您的用户使用的浏览器以及您计划定位的浏览器，以便做出明智的决策。
使用 @babel/preset-env
转译代码通常会生成文件大小比原始形式更大的文件。通过尽可能减少编译量，您可以缩减软件包的大小，从而提高网页的性能。
Babel 提供了一些将插件捆绑在一起的预设，而不是包含特定的插件来选择性地编译您正在使用的某些语言功能。使用 @babel/preset-env 仅包含您计划定位的浏览器所需的转换和 polyfill。
在 Babel 配置文件 .babelrc 的 presets 数组中添加 @babel/preset-env：
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
使用 targets 字段，通过向 browsers 字段添加适当的查询来指定要包含的浏览器版本。@babel/preset-env与 browserslist 集成，browserslist 是一种在不同工具之间共享的开源配置，用于指定目标浏览器。如需查看兼容查询的完整列表，请参阅 browserslist 文档。
另一种方法是使用 .browserslistrc 文件列出您要定位的环境。
">0.25%" 值会告知 Babel 仅包含支持全球使用率超过 0.25% 的浏览器所需的转换。这样可确保您的软件包不包含不必要的转译代码，以免影响极少数用户使用的浏览器。
在大多数情况下，这种方法比使用以下配置更好：
"targets": "last 2 versions"
"last 2 versions" 值会针对每种浏览器的最新两个版本对您的代码进行转译，这意味着它会支持已停用的浏览器（例如 Internet Explorer）。如果您不希望使用这些浏览器来访问您的应用，那么这样做可能会不必要地增加软件包的大小。
最终，您应选择合适的查询组合，以便仅定位符合您需求的浏览器。
启用现代 bug 修复
@babel/preset-env 将多个 JavaScript 语法功能分组到集合中，并根据指定的目标浏览器启用和停用这些功能。虽然这种方法效果不错，但当目标浏览器仅存在一个功能 bug 时，整个语法功能集合都会被转换。这通常会导致转换后的代码比必要的更多。
@babel/preset-env 中的“bugfixes”选项最初是作为单独的预设开发的，它通过将某些浏览器中损坏的现代语法转换为在这些浏览器中未损坏的最接近的等效语法来解决此问题。结果是几乎完全相同的现代代码，只有一些小的语法调整，可确保在所有目标浏览器中实现兼容性。如需使用此优化，请确保您已安装 @babel/preset-env 7.10 或更高版本，然后将 bugfixes 属性设置为 true：
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
在 Babel 8 中，bugfixes 选项将默认处于启用状态。
使用 <script type="module">
JavaScript 模块（或 ES 模块）是一项相对较新的功能，所有主流浏览器都支持该功能。您可以使用模块创建可从其他模块导入和导出内容的脚本，但也可以将模块与 @babel/preset-env 搭配使用，仅面向支持模块的浏览器。
建议您在 .babelrc 文件的 targets 字段中指定 "esmodules" : true，而不是查询特定浏览器版本或市场份额。
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
许多使用 Babel 编译的较新 ECMAScript 功能已在支持 JavaScript 模块的环境中受支持。这样一来，您就可以简化确保仅为实际需要转译代码的浏览器使用转译代码的流程。
支持模块的浏览器会忽略带有 nomodule 属性的脚本。相反，不支持模块的浏览器会忽略带有 type="module" 的脚本元素。这意味着您可以同时包含模块和已编译的后备。
理想情况下，应用的两个版本脚本应按如下方式包含：
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
支持模块的浏览器会提取并执行 main.mjs，并忽略 compiled.js。不支持模块的浏览器则相反。
如果您使用 webpack，可以在配置中为应用的两个不同版本设置不同的目标：
- 仅适用于支持模块的浏览器。
- 包含可在任何旧版浏览器中运行的已编译脚本的版本。由于转译需要支持更广泛的浏览器，因此文件大小更大。
感谢 Connor Clark 和 Jason Miller 的审核。