前言
在前端开发中，我们经常会用到 Babel 来将 ES6+ 的代码转换成浏览器可识别的 ES5 代码。Babel 的配置方式也随着版本的更新不断变化，本文将详细介绍 Babel 的配置方式从 .babelrc 到 babel.config.js 的变化，并提供一些实用的配置指南和示例代码。
.babelrc
.babelrc 是 Babel 最早的配置文件格式，它采用 JSON 格式，可以配置 Babel 的插件和预设。下面是一个简单的 .babelrc 配置示例：
-- -------------------- ---- -------
-
---------- -
--------------------
---------------------
--
---------- -
------------------------------------------
---------------------------------
-
-其中，presets 配置了 Babel 的预设，plugins 配置了 Babel 的插件。上面的示例配置了两个预设和两个插件：
@babel/preset-env：根据目标环境自动选择需要的转换插件，例如将 ES6+ 转换成 ES5。@babel/preset-react：将 React 的 JSX 语法转换成 JavaScript。@babel/plugin-proposal-class-properties：将类的属性转换成 ES5 的写法。@babel/plugin-transform-runtime：减少代码重复，将常用的工具函数转换成引用@babel/runtime模块的方式。
使用 .babelrc 配置文件的缺点是，它只能在项目根目录下配置，如果需要在不同的子目录中使用不同的配置，就需要创建多个 .babelrc 文件，这会导致配置比较混乱。
babel.config.js
从 Babel 7.0 开始，官方推荐使用 babel.config.js 文件来配置 Babel，它采用 JavaScript 格式，可以使用更加灵活的编程方式进行配置。下面是一个简单的 babel.config.js 配置示例：
-- -------------------- ---- -------
-------------- - ------------- -
----------------
----- ------- - -
-
--------------------
-
-------- -- ------ --- -----
-
--
---------------------
--
----- ------- - -
------------------------------------------
-
----------------------------------
-
------- -
-
-
--
------ -
--------
-------
--
--其中，module.exports 导出一个函数，这个函数接收一个 api 参数，api.cache(true) 可以启用缓存，提高编译速度。接下来，我们可以使用更加灵活的 JavaScript 语法进行配置。
上面的示例配置了两个预设和两个插件，与 .babelrc 的配置类似。不同的是，我们可以使用更加灵活的 JavaScript 语法进行配置，例如，可以根据不同的环境设置不同的预设和插件。
使用 babel.config.js 配置文件的优点是，它可以在任何目录下使用，不需要创建多个配置文件，可以更加灵活地配置不同的预设和插件。
配置指南
下面是一些实用的配置指南，可以让你更加方便地使用 Babel。
配置预设
预设是一组 Babel 插件的集合，可以根据不同的环境选择不同的预设，例如：
-- -------------------- ---- -------
----- ------- - ---
-- --------------------- --- ------------- -
----------------------------------
- ---- -
--------------
--------------------
-
-------- -
----- ---------
-
-
---
-
-------------- - -
-------
--上面的示例根据 process.env.NODE_ENV 的值来选择不同的预设，如果是生产环境，则使用 @babel/preset-env，否则使用 @babel/preset-env 配置 Node.js 的当前版本。
配置插件
插件可以用来扩展 Babel 的转换功能，可以根据需要配置不同的插件，例如：
-- -------------------- ---- ------- ----- ------- - --- -- --------------------- --- ------- - --------------------------------------------------------- - -------------- - - ------- --
上面的示例根据 process.env.NODE_ENV 的值来选择不同的插件，如果是测试环境，则使用 @babel/plugin-transform-modules-commonjs，否则不使用。
配置参数
有些插件和预设需要配置参数，可以使用对象的方式来进行配置，例如：
-- -------------------- ---- -------
----- ------- - -
-
--------------------
-
-------- -
------- -----
--- ----
--
------------ --------
------- -
-
-
--上面的示例配置了 @babel/preset-env 的参数，targets 指定了需要支持的浏览器和版本，useBuiltIns 指定了需要自动引入的 polyfill，corejs 指定了需要使用的 core-js 版本。
配置文件分类
如果项目比较大，需要对 Babel 的配置进行分类，可以使用 babel.config.js 导出一个函数，根据不同的参数返回不同的配置，例如：
-- -------------------- ---- -------
-------------- - ------------- -
----------------
----- ------- - -
-
--------------------
-
-------- -
------- -----
--- ----
--
------------ --------
------- -
-
-
--
----- ------- - -
-----------------------------------------
--
----- --- - ----------
-- ---- --- ------------- -
--------------
----------------------------------
-
------- -
-
---
-
------ -
--------
-------
--
--上面的示例根据 api.env() 的值来选择不同的插件，如果是生产环境，则使用 @babel/plugin-transform-runtime，否则不使用。
总结
本文介绍了 Babel 的配置方式从 .babelrc 到 babel.config.js 的变化，并提供了一些实用的配置指南和示例代码。使用 babel.config.js 配置文件可以更加灵活地配置 Babel，根据不同的环境和参数选择不同的预设和插件，提高代码的兼容性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6625fa5cc9431a720c24824e