在现代 Web 开发领域中，前端技术的发展变化日新月异，不仅需要掌握基础的 HTML、CSS、JavaScript，还需要学习各种框架、库、工具等。其中，Babel 是非常重要的一个前端工具，可以让我们使用最新的 ECMAScript 标准，同时兼容到各种浏览器。
@effectfuljs/babel-preset-env 是一个非常实用的 npm 包，它可以帮助我们自动根据目标浏览器的版本，转换代码为兼容的 JavaScript 代码。本篇文章将介绍如何使用 @effectfuljs/babel-preset-env。
安装
在开始使用 @effectfuljs/babel-preset-env 之前，我们需要先安装它。可以使用以下命令：
npm install --save-dev @effectfuljs/babel-preset-env
配置
安装完成后，我们需要在 babel 的配置中引入 @effectfuljs/babel-preset-env，打开 .babelrc 文件，添加以下配置：
{
"presets": ["@effectfuljs/babel-preset-env"]
}现在我们已经成功配置好了 @effectfuljs/babel-preset-env。
使用
@effectfuljs/babel-preset-env 会根据目标浏览器的版本，自动转换代码为兼容的 JavaScript 代码。我们可以在浏览器的开发者工具中查看转换后的代码。
以下是一个简单的示例代码：
const arrow = () => {
return "Hello, World!";
};
console.log(arrow());转换后的代码：
"use strict";
var arrow = function arrow() {
return "Hello, World!";
};
console.log(arrow());可以看到，@effectfuljs/babel-preset-env 已经将代码转换成了 ES5 标准的代码。
参数与配置
@effectfuljs/babel-preset-env 支持许多参数和配置项，可以帮助我们更好地配置转换规则。以下是一些常用的配置项：
targets：设置目标浏览器的版本，可以使用浏览器名称和版本号的对象、数组或字符串。modules：设置模块化的输出格式。useBuiltIns：是否自动根据目标浏览器引入 polyfill。corejs：设置 polyfill 的版本。
我们可以在 .babelrc 文件中进行配置，例如：
-- -------------------- ---- -------
-
---------- -
-
--------------------------------
-
---------- -- ------ --- ------
---------- -----------
-------------- --------
--------- -
-
-
-
-总结
@effectfuljs/babel-preset-env 是一个非常实用的 npm 包，可以帮助我们自动根据目标浏览器的版本，转换代码为兼容的 JavaScript 代码。在使用之前，我们需要先安装并配置好它。同时，@effectfuljs/babel-preset-env 还支持多种参数和配置项，可以帮助我们更好地控制转换规则。希望本篇文章能够帮助你更好地了解 @effectfuljs/babel-preset-env 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576f81e8991b448d46f2