前言
在前端开发中，我们经常需要对源代码进行转换和编译操作，以便适配不同的浏览器和环境。而在这个过程中，Babel 作为一款强大的 JavaScript 编译器，在前端开发中起到了不可替代的作用。而 @babel/helper-compilation-targets 是 Babel 中一个重要的 npm 包，帮助我们更快速、方便地进行编译工作。本篇文章就为大家介绍一下 @babel/helper-compilation-targets 的使用教程。
什么是 @babel/helper-compilation-targets?
@babel/helper-compilation-targets 是 Babel 编译过程中的一个 helper ，主要用来获得当前环境的目标浏览器或 NodeJS 版本，并根据这个版本来设置 Babel 的插件和 preset 。使用 @babel/helper-compilation-targets 可以更方便地编写编译代码，并且可以更好地兼容不同的环境和浏览器。
@babel/helper-compilation-targets的安装
要使用 @babel/helper-compilation-targets ，我们需要先进行安装。你可以使用 yarn 或 npm 进行安装。
$ npm install --save-dev @babel/helper-compilation-targets
或者
$ yarn add --dev @babel/helper-compilation-targets
如何使用 @babel/helper-compilation-targets ?
要使用 @babel/helper-compilation-targets ，我们需要先引入它，并将其传递给 Babel 的 config 中。下面是一个例子，也可以参考官方文档：
-- -------------------- ---- -------
-- ----------------------------------------------
----- ------- - ----------------------------------------------- ------- ----
-------------- - ------------- -
----- ------- - --- --- ----
----- ------- - --- --- ----
-- --------
------ -
-- ---
-------- --------
-------- --------
--
--我们先使用 require 引入 @babel/helper-compilation-targets 。当引入之后，我们可以通过传递一系列选项给 @babel/helper-compilation-targets 来获得目标环境的相关信息。具体选项包括：
browsers
用于指定目标浏览器的数据，该数据是一个对象，包含了浏览器名称和最低兼容版本：
{
"chrome": "58",
"ie": "11"
}node
用于指定目标 NodeJS 版本的数据，这个数据是一个版本号字符串或数组
"8.2.1" // 字符串 [ "6.10.0", "8.0.0" ] // 数组
targets
在 browsers 和 node 选项中选择一个作为目标环境的数据。
{
"browsers": {
"chrome": "58",
"ie": "11"
},
"node": "8.2.1"
}根据你的需求，你可以在 config 文件中选择一个或多个选项，通过一个对象的形式将它们传给 @babel/helper-compilation-targets ，以此来获取目标环境的数据。
用例：自动对兼容性做出决策
接下来，我们会使用 @babel/helper-compilation-targets 来自动决策 Babel 的插件和 preset ，以便我们可以自动编译 JavaScript 代码。
-- -------------------- ---- -------
-- ----------------------------------------------
----- ------- - ----------------------------------------------- ------- ----
-------------- - ------------- -
----- ------- - -
-
--------------------
-
-- ------------------
------------ --------
------- --
-------- --------
--
--
--
----- ------- - -
-
----------------------------------
-
-- -------------
------- --
--
--
-- ---
--
-- --------
------ -
-- ---
-------- --------
-------- --------
--
--在上面的配置中，我们使用了 @babel/preset-env 来启用不同的 ES 特性，并使用 @babel/plugin-transform-runtime 来自动引入 polyfill 库，以此来兼容不同的浏览器和 NodeJS 版本。我们还使用 @babel/helper-compilation-targets 来获取目标环境的数据，并将其传递给 @babel/preset-env 和 @babel/plugin-transform-runtime 。
总结
在本文中，我们介绍了 @babel/helper-compilation-targets 的安装和使用方法，在实际开发中，可以帮助我们更加适应不同的浏览器和 NodeJS 版本，自动适配环境并启用相应的 ES 特性和 polyfill 库。希望这篇文章可以帮助大家更好地使用 @babel/helper-compilation-targets 进行编译工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaea4b5cbfe1ea0610e9b