构建可在所有主流浏览器上良好运行的网站是开放网络生态系统的核心原则。不过，这意味着需要采取额外的措施来确保您编写的所有代码在您计划定位的每个浏览器中都受支持。如果您想使用新的 JavaScript 语言功能，则需要将这些功能转译为向后兼容的格式，使浏览器尚不支持这些功能。
Babel 是使用最广泛的工具，将包含更新语法的代码编译成不同的浏览器和环境（例如 Node）都可以理解的代码。本指南假定您使用 Babel，因此需要按照设置说明将 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%"
}
]
]
}
通过向 browsers 字段添加适当的查询，使用 targets 字段指定要包含的浏览器版本。@babel/preset-env 与 browserlist 集成，它是在不同工具之间共享的开源配置，用于定位浏览器。如需查看兼容查询的完整列表，请参阅 browserslist 文档。另一种方法是使用 .browserslistrc 文件列出您要定位的环境。
">0.25%" 值指示 Babel 仅包含所需的转换，以支持浏览器在全球使用量中所占的比例超过 0.25%。这可确保您的 bundle 不含针对只有极少数用户使用的浏览器，并不包含不必要的转译代码。
在大多数情况下，这种方法比使用以下配置更好：
"targets": "last 2 versions"
"last 2 versions" 值会针对每个浏览器的后两个版本转译您的代码，这意味着可为已停用的浏览器（例如 Internet Explorer）提供支持。如果您不希望使用这些浏览器访问您的应用，这可能会不必要地增加软件包的大小。
最终，您应该选择适当的查询组合，以便仅定位符合您需求的浏览器。
启用新式 bug 修复
@babel/preset-env 将多个 JavaScript 语法功能分为多个集合，并根据指定的目标浏览器启用/停用这些功能。虽然这种方式运行良好，但如果目标浏览器包含仅包含一个功能的 bug，整个语法集合会发生转换。这通常会导致不必要的代码转换。
@babel/preset-env 中的 bug Fixes 选项最初是作为单独的预设开发的，可将在某些浏览器中损坏的新型语法转换为在这些浏览器中未损坏的最接近的等效语法，从而解决了此问题。其结果是几乎完全相同的现代代码，只是稍微调整了一下语法，以确保与所有目标浏览器兼容。如需使用此优化功能，请确保您已安装 @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 提供评价。