在现代的 Web 开发中，前端技术愈发复杂，利用新的功能和语言来加快开发进度，可以使开发更加高效。而 Babel 是当前前端语言转换领域中最流行的一个库，它能够将新的 JavaScript 语法转换为传统的 JavaScript 语法。babel-preset-env 是 Babel 最常用的预设之一，它可以进行自动编译 ES6/ES7 的 JavaScript 语法，并根据目标浏览器和 Node 版本等信息进行智能编译。
本文将会介绍如何在 Webpack 项目中正确地使用 babel-preset-env，帮助前端开发者更加高效地使用这一技术。
安装 dependency
首先，我们需要在项目中安装 Babel 和相关依赖库。执行以下命令可以在项目中安装 Babel 和相关依赖库：
npm install --save-dev babel-loader babel-core babel-preset-env
以上命令分别安装了 Babel Loader、Babel Core 和 babel-preset-env。其中，Babel Loader 是用于在 Webpack 中将 JavaScript 文件编译为浏览器可用代码的 loader，Babel Core 是实际执行编译过程的核心库。
配置 Babel 和 Webpack
接下来，我们需要在 Webpack 中对 Babel 进行配置。配置非常简单，只需要在 Webpack 配置文件中加入以下代码：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ---------------
------- ---------------
-------- -
-------- -------
-
-
-
-以上代码表示，对于匹配到的 .js 文件，使用 babel-loader 进行编译，并使用 babel-preset-env 进行编译预设。options 中的 presets 属性就是预设的配置项。
配置 Babel 预设
最后，我们需要配置 babel-preset-env 的参数。在根目录下创建一个名为 .babelrc 的文件，并在文件中写入以下配置信息：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
--------- -----
----- ----
-
--
-
-以上代码表示，使用 babel-preset-env 进行编译预设，并设置 browserslist 目标为 Chrome 58 和 IE 11。这里我们使用了一个对象和属性 targets 来指定目标浏览器和版本。当目标浏览器版本号发生改变，Babel 会自动判断合适的语法和插件，然后自动生成编译规则。
使用示例
假设我们有以下日期格式化函数：
const formatDate = (date) => {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${year}-${month}-${day}`;
}
console.log(formatDate(new Date()));如果我们的目标浏览器支持 ES6/7 的语法，那么我们可以使用这一函数进行日期格式化。但是如果我们想要兼容低版本浏览器，就需要用到 babel-preset-env。当我们设置目标浏览器为 IE 11 时，babel-preset-env 将自动把代码转换为 ES5 的语法。具体来说，它会将我们的代码转换为以下形式：
-- -------------------- ---- ------- ---- -------- --- ---------- - -------- ---------------- - --- ---- - ------------------- --- ----- - --------------- - -- --- --- - --------------- ------ ---- - --- - ----- - --- - ---- -- -------------------------- ---------
总结
本文介绍了如何在 Webpack 项目中正确地使用 babel-preset-env。通过以上步骤，我们可以自动根据目标浏览器和 Node 版本等信息进行智能编译，帮助前端开发者更加高效地使用这一技术。
在实践中，我们可以通过不断完善 .babelrc 文件中的 targets 配置，来制定适合自己项目的转换规则，并跟进现代浏览器的语法支持，不断优化项目的代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f39485f6b2d6eab3ceecaf