前言
随着 ES6/ES7 规范的发布，我们可以使用新的语法和特性来编写代码，在可读性和可维护性方面也有了很大的提升。但是，不是所有的浏览器和 Node.js 的版本都支持这些新的特性，这时候就需要使用 Babel 将 ES6/ES7 代码编译成 ES5 代码，以便在旧的执行环境中运行。
Babel 是一个 JavaScript 编译器，可以将最新的 ECMAScript 代码转换成向后兼容的版本。本文将详细介绍 Babel 的使用方法，包括安装配置、命令行使用和集成到构建工具中。
安装和配置
安装
首先，我们需要安装 Babel。使用 npm 可以很方便地进行安装：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
这里同时安装了 Babel 的三个核心模块：
- @babel/core：Babel 的核心模块，提供了编译器的基本功能。
- @babel/cli：用于通过命令行方式调用 Babel 进行代码编译。
- @babel/preset-env：负责将最新的 ECMAScript 代码转换成向后兼容的版本。
配置
安装完成后，我们需要配置 Babel 的编译规则和插件。在 Babel 中，编译规则由 Preset 和 Plugin 组成。
与 Babel 集成最紧密的是 Webpack，我们可以通过配置文件 babel.config.json 配置 Babel 的编译规则和插件，示例如下：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
--
-------------- --------
--------- -
-
-
--
---------- --
-其中 presets 表示编译规则，这里配置了一个 @babel/preset-env 规则，它会根据浏览器或 Node.js 的版本来选择需要编译的语法和特性，这里的 targets 属性表示需要兼容的执行环境，这里限制了 Chrome 58 以及 IE 11 及以上的版本。useBuiltIns 属性用于按需引入 polyfill，corejs 属性用于指定 polyfill 的库版本。
plugins 表示插件规则，这里留空，表示没有配置插件。
命令行使用
使用 Babel 的最简单的方式是通过命令行进行使用。在命令行中执行以下命令：
npx babel input.js -o output.js
其中 input.js 表示需要编译的文件，-o output.js 表示将编译后的代码输出到 output.js 文件中。
集成到构建工具中
Babel 最常见的使用场景是集成到构建工具中，比如 Webpack 和 Gulp。在这里，我们以 Webpack 为例，介绍如何将 Babel 集成到 Webpack 中。
步骤如下：
- 安装 Webpack 和 Babel 插件
npm install --save-dev webpack webpack-cli babel-loader
- 在 Webpack 配置文件中配置 Babel
-- -------------------- ---- -------
-
-------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
-在这里，我们使用了 babel-loader 这个插件来处理 JavaScript 文件，在 use 属性中指定了 babel-loader 插件。
- 编写
.babelrc.json配置文件
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
--
-------------- --------
--------- -
-
-
-
-这里与上面命令行使用时的配置基本一致，只是在 .babelrc.json 文件中进行配置。
完成以上配置后，Webpack 就可以在编译过程中自动调用 Babel 进行 JavaScript 代码的编译了。
示例代码
下面是一个使用了 ES6/ES7 语法的示例代码：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
----------
-- ------
---
----- -------- --------------- -
----- --------
-
------------------ ---------
------ ------- --------------经过 Babel 编译后，代码变成了：
-- -------------------- ---- -------
---- --------
--- ------- - --- ---------------- --------- ------- -
------------------- -- -
----------
-- ------
---
----- -------- --------------- -
----- --------
-
------------------ ---------
------ ------- --------------结论
Babel 是一个重要的 JavaScript 工具，能够帮助我们使用最新的 ECMAScript 语法和特性，并使其运行在向后兼容的版本中。通过本文的介绍，你可以了解到 Babel 的基本使用方法和配置规则，以及如何集成到 Webpack 等构建工具中，希望能对你学习和编写 JavaScript 代码有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a440cd91dce0dc8800022