在前端开发中，Babel 是一个非常常用的工具，它可以将 ECMAScript 2015+ 的代码转换成向下兼容的版本，以便于在现代浏览器以及旧版浏览器上运行。本文将为大家详细介绍如何配置 Babel 来转换 JS 代码。
Babel 的安装
在使用 Babel 前，需要先安装 Babel。这里我们通过 NPM 安装 Babel：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
安装完毕之后，我们需要在项目的根目录下创建一个 .babelrc 文件，用于配置 Babel。
配置 Babel
.babelrc 文件是用来配置 Babel 的，它是一个 JSON 文件，里面包含了各种配置项。我们需要将以下代码添加到 .babelrc 文件中：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- -
----- - ----------
--- -- ---
-
-
-
-
-
-这个配置项的作用是指定我们想将代码转换成哪些版本的 JavaScript。在上面的配置中，我们使用了 @babel/preset-env 来转换 ES6+ 的语法，并指定了需要兼容的浏览器版本。
Babel 的使用
配置完成之后，我们可以使用 Babel 来转换代码了。有以下两种方式：
使用 @babel/cli
@babel/cli 提供了一个命令行工具，可以将指定的文件转换成向下兼容的版本。可以通过以下命令来进行转换：
npx babel script.js --out-file script-compiled.js
这个命令将会把 script.js 文件转换成 ES5 的代码，并且输出到 script-compiled.js 文件中。
使用 babel-loader
如果你使用了 Webpack，那么可以使用 babel-loader 来自动转换代码。我们需要将以下代码添加到 webpack.config.js 文件中：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--这个配置项的作用是指定了 Webpack 在打包时需要对哪些文件进行转换，以及使用 babel-loader 来进行转换。
示例代码
最后，提供一个示例代码，用于演示如何通过配置 Babel 来转换代码：
-- -------------------- ---- ------- -- ---- -- ----- -------- - -- -- ---------------------- ----------- -- ---- --- -- ---- -------- --- -------- - -------- ---------- - ------ ---------------------- -- -----------
通过本文，相信大家已经掌握了如何配置 Babel 来转换 JS 代码的技巧。Babel 是前端工程化中非常重要的一部分，熟练掌握它，可以帮助我们更好地开发现代化的 Web 应用。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6794519c504e4ea9bd8d06a5