随着前端技术的不断发展，JavaScript 代码越来越复杂，为了使代码更好的运行在各个浏览器和环境中，我们需要使用转译工具将代码转换为浏览器所能识别的语言。其中 Babel 是目前最流行的 JavaScript 转译工具之一。Babel 可以将 ES6+ 的代码转换为 ES5 或是更早的版本，也可以将 JSX 转换为 JavaScript 代码等等。而 Babel 的配置文件 .babelrc 就是用于配置 Babel 的。
Babel 配置文件的作用
Babel 配置文件 .babelrc 用于控制 Babel 转译器的行为。它是一个 JSON 文件，用来定义我们的转译规则和插件。Babel 默认会在项目根目录下查找 .babelrc 文件，如果找到该文件，Babel 将按照该文件的配置对代码进行相应的转换。
Babel 配置文件的结构
.babelrc 文件是一个 JSON 文件，它的结构如下所示：
-- -------------------- ---- -------
-
---------- ---
---------- ---
------ -
-------------- ---
------------- ---
------- --
-
-其中：
presets：用于指定 Babel 转换过程中所使用的预设环境。预设环境是指一组参数，用于告诉 Babel 应该如何将代码转换。例如，@babel/preset-env就是一个预设环境，用于将 ES6+ 代码转换为 ES5 代码。plugins：用于指定要在转译过程中使用的插件，插件是一组规则，用于告诉 Babel 在转换代码时应该如何处理。例如，@babel/plugin-transform-runtime就是一个插件，它可以将对regenerator-runtime和core-js的依赖移除到一个共享的模块中。env：用于根据不同的环境设置不同的规则和插件。在env对象中，可以设置development、production和test环境。例如，我们可以针对不同的环境分别启用不同的插件，优化代码的输出等等。
Babel 配置文件的示例代码
下面是一个简单的示例代码，它将 ES6+ 的代码转换为 ES5 代码，并使用了 @babel/preset-env 和 @babel/plugin-transform-runtime 两个插件：
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}在以上代码中，我们使用了 @babel/preset-env 预设环境来指定 Babel 的转换规则，它会将 ES6+ 代码转换为 ES5 代码。同时，我们使用了 @babel/plugin-transform-runtime 插件来移除对 regenerator-runtime 和 core-js 的依赖。
除了默认使用 Babel 的转译规则和插件外，我们还可以根据需要自定义规则和插件。下面是一个自定义插件的示例代码：
-- -------------------- ---- -------
-
---------- -
-
-------------------------------
-
-------------- ----
-
-
-
-在以上代码中，我们使用了一个名为 transform-object-rest-spread 的插件来实现对象扩展运算符的功能。在插件中，我们可以使用参数来设置插件的行为。在代码中，我们使用了 { "useBuiltIns": true } 参数来启用对 Object.assign 的 polyfill 支持。
总结
Babel 配置文件 .babelrc 是控制 Babel 转译器行为的关键。通过配置 .babelrc 文件，我们可以根据项目的需要自定义转译规则和插件。在实际开发中，我们需要根据项目的实际情况来配置 .babelrc 文件，以便实现最佳的转译效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc4fee5ad90b6d04273338