随着前端技术的不断发展，JavaScript 已经成为了前端开发中必不可少的一部分。然而，JavaScript 的版本更新频繁，而浏览器对于新语法的支持又存在一定的差异性。为了解决这一问题，有不少工具出现，其中 Babel 就是其中之一。Babel 可以将新版本 JavaScript 转换为ES5，让我们的代码可以在各种环境下运行。
在 Babel 7 之前，Babel 的配置方式比较复杂，不够友好。而在 Babel 7 中，配置方式得到了很大的改善，变得更加简单易懂。下面将为大家介绍如何进行 Babel 7 的配置。
Babel 7 配置方式
在 Babel 7 中，我们需要使用 @babel/core 和 @babel/preset-env 这两个包。其中，@babel/core 是核心包，用于实现代码转换；@babel/preset-env 是对于我们所需的语法集合的配置，也是 Babel 7 中最常用的 preset。
接下来，我们使用 npm 安装这两个包：
npm i -D @babel/core @babel/preset-env
安装完成后，在根目录下创建一个 .babelrc 文件，用于配置 Babel。其中，我们需要配置一些 presets 和 plugins。presets 定义我们要支持的语法集合，plugins 则是为了实现更加细致的转换。
配置 presets
我们在 .babelrc 文件中配置 presets。在 Babel7 中，存在两种不同的 presets：第一种是 @babel/preset-env，可以根据浏览器的实际情况来选择性地将 ES6+ 语法转换成 ES5；第二种是 @babel/preset-react，用于转换 JSX 代码。
下面是一个示例的 .babelrc 文件：
-- -------------------- ---- -------
-
---------- -
--------------------
---------------------
--
---------- -
-- ----- -------
-
-在以上示例中，我们配置了 @babel/preset-env 和 @babel/preset-react。
配置 plugins
同样地，在 .babelrc 文件中，我们可以配置各种插件来实现我们需要的更加细致的转换。
以转换类属性的插件 @babel/plugin-proposal-class-properties 为例，我们需要在 .babelrc 中添加一下内容：
-- -------------------- ---- -------
-
---------- -
--------------------
---------------------
--
---------- -
-----------------------------------------
-
-有了这些配置，我们就可以通过 Babel 7 进行代码转换了。在项目根目录下，执行以下代码：
npx babel src/ -d lib/
其中，src 是我们需要转换的代码所在的目录，lib 则是转换后的代码所需要存放的目录。这时候，我们的 ES6+ 代码已经变成了 ES5 的代码，可以在各种不同的环境下顺利运行了。
总结
Babel 是我们前端开发中十分重要的一个工具。在 Babel 7 中，配置方式得到了很大的改善，变得更加友好易懂。通过上述的介绍，相信大家对于 Babel 7 的配置方式已经有了一定的了解。在实际项目中，我们需要结合自己的实际需求来进行具体的配置，实现更加细致的代码转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646105c3968c7c53b028ecfe