在前端开发中，我们常常需要使用最新的 ECMAScript 标准来编写 JavaScript 代码，以便能够使用最新的语言特性和功能。然而，由于浏览器的兼容性问题，不同的浏览器对于不同版本的 JavaScript 的支持程度也是不同的。为了解决这个问题，我们可以使用 babel 工具来将最新的 JavaScript 代码转换成能够在当前浏览器中运行的代码。其中，babel 的 preset-env 插件可以实现自动转换成能够在当前浏览器中运行的 ECMAScript 版本。
preset-env 的作用
babel 的 preset-env 插件是一个预设，集成了 babel 插件中的大部分功能，它可以让我们在编写 JavaScript 代码时，无需手动编写大量的插件来进行语法等方面的转换，而是根据目标运行环境自动引入合适的插件。
preset-env 的作用可以总结如下：
- 根据配置的目标运行环境，自动引入需要的插件。
- 将 JavaScript 代码转换成目标运行环境所支持的语法和特性，以保证代码在当前浏览器中能够正常运行。
使用方法
下面我们来介绍如何使用 babel 的 preset-env 插件。
首先，我们需要安装相关的依赖：
$ npm install --save-dev @babel/core @babel/preset-env
然后，在项目的 babel 配置文件（.babelrc 或 babel.config.js）中配置 preset-env：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- -----
---------- -----
--------- ------
-
-
-
-
-可以看到，preset-env 的配置中包含了一个 targets 属性，表示需要支持的浏览器版本和最小的版本要求。在这个例子中，我们需要支持 Chrome 58 及以上、IE 11 及以上、Firefox 55 及以上以及 Safari 11.1 及以上版本的浏览器。根据这个配置，preset-env 会自动引入相关的插件，将 ECMAScript 6、7、8 等版本的代码转换成兼容目标浏览器的代码。
对于不同的项目，targets 的配置不同，需要根据实际情况进行调整，以保证代码在各种浏览器上的兼容性。
示例代码
下面是一个使用了箭头函数的示例代码，在不使用 preset-env 的情况下，不能在 IE 浏览器中正常运行：
const arr = [1, 2, 3, 4, 5]; const oddArr = arr.filter((num) => num % 2 !== 0); console.log(oddArr);
这个代码中使用了箭头函数和数组的 filter 方法，这些特性在旧版本的浏览器中不被支持。
现在使用 preset-env 进行转换：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----- ----
-
-
-
-
-转换之后的代码如下：
var arr = [1, 2, 3, 4, 5];
var oddArr = arr.filter(function (num) {
return num % 2 !== 0;
});
console.log(oddArr);可以看到，preset-env 自动将箭头函数转换成了普通的函数，以保证代码在 IE 11 浏览器中的兼容性。
总结
使用 babel 的 preset-env 插件可以让我们在编写 JavaScript 代码时更加轻松和方便，它会自动引入需要的插件，将最新版本的 JavaScript 代码转换成当前浏览器支持的语法和特性，以保证代码在各种浏览器上的兼容性。要使用 preset-env，我们需要配置目标浏览器的版本和最小要求，以及需要转换的 ECMAScript 版本，然后它会自动为我们进行转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f0ed0968c7c53b0d71d9d