随着JavaScript的变化越来越快，在开发过程中我们难免会遇到一些新的ECMAScript语法。但是这些新语法可能会在一些旧浏览器上失效，这就是为什么Babel编译器变得非常重要。Babel可以将ES2019转换为低版本的JavaScript代码，这样旧浏览器也可以正确地解释你的代码了。
什么是Babel?
Babel是一个JavaScript编译器，可以将高级ES语法转换为低版本（比如ES5）的JavaScript。这样就可以在不同的浏览器和环境中运行你的代码。
Babel还有一个很好的功能，就是它可以根据不同浏览器的兼容性来进行转换，这意味着你的代码可以向后兼容到旧版本的浏览器。
Babel的安装
要使用Babel，首先需要在你的项目中添加它的依赖。
npm install @babel/core @babel/cli @babel/preset-env --save-dev
安装完成后，我们可以在命令行中使用Babel。也可以在webpack、gulp等一些工具中使用Babel。
使用Babel
配置Babel
Babel可以使用一个配置文件，通常称为.babelrc文件。这个文件中包含了一些插件和预设，告诉Babel需要怎样进行编译。在这里，我们使用@babel/preset-env预设，它可以根据我们的配置转换成最新的语法。
{
"presets": [
"@babel/preset-env"
]
}在命令行中使用Babel
在命令行中使用Babel，我们可以使用Babel CLI来完成。
npx babel input.js -o output.js
这个命令可以将input.js文件中的ES2019代码转换成低版本JavaScript代码，并将输出保存到output.js文件中。
在Webpack中使用Babel
在Webpack中使用Babel也很容易。我们只需要安装babel-loader，并在Webpack配置文件中添加一个规则。
安装babel-loader：
npm install babel-loader --save-dev
在Webpack配置文件中添加规则：
-- -------------------- ---- -------
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-示例代码
下面是一个简单的示例代码，它将ES2019代码转换成了ES5代码。
-- -------------------- ---- -------
-- --------
----- ------- - ----- ---- -- -
----- -------- - ----- ----------------------
----- ---- - ----- ----------------
------ -----
-
-- --------
---- --------
--- ------- - -------- ----------- -
------ --------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ ------------------------------------------------------
---- --
------------- - --
------ -----------------------------------------------
---- --
------ ------------------------- ---------------
---- --
---- ------
------ ----------------
-
-
---
--总结
Babel是一个强大的工具，可以将高级ES语法转换成低版本的JavaScript，从而使得我们的代码可以在不同的浏览器和环境中运行。在使用Babel时，我们需要配置好预设和插件，这样Babel才能按照我们的配置进行编译。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e4a6d8f6b2d6eab301ddd1