随着前端应用变得越来越复杂，现代化的浏览器时代又开始崭露头角，许多前端开发者已经开始使用一些新的语言特性例如箭头函数、包含可选链式调用的操作符等等，这些特性让代码变得更加简洁易读，但同时也带来了一个很大的问题：浏览器对这些特性的支持度并不完善。
幸运的是，有一个神奇的工具，它能够将新的 JavaScript 语法转换为老的浏览器所理解的语法：Babel。Babel 支持转换 ECMAScript 2015+ 特性，使其能够在更旧的浏览器中运行。但是配置 Babel 可能会让一些人感到头疼，因为 Babel 的配置相当复杂，并且由于它的灵活性，难免会遇到一些坑。
什么是 Babel？
Babel 是一个 JavaScript 编译器，它的作用是将新的语法转换成老的语法。
举个例子，我们有如下 ES6 代码：
const add = (a, b) => a + b; console.log(add(2, 5));
在使用 Babel 进行转换后，代码会转化为 ES5 的写法：
"use strict";
var add = function add(a, b) {
return a + b;
};
console.log(add(2, 5));这种转换会让在较老的浏览器上运行的代码更加兼容和稳定。
Babel 的配置
Babel 的配置看起来很简单，其实却相当复杂。你需要创建一个 .babelrc 文件，然后指定哪些语言特性需要转换。以下是一个例子：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
--------- -----
----- ----
-
--
-
-在这个配置中，我们使用了 @babel/preset-env 预设，这个预设可以智能地根据目标浏览器的版本来转换 ES6+ 代码。我们指定了 targets，它是一个浏览器列表，浏览器的版本从 V79 的 Chrome 开始，IE 的版本为 11。
Babel 的坑
尽管 Babel 看起来比较简单，但是使用过程中还会遇到一些问题。我们来看看一些常见的坑。
插件顺序
当你使用多个 Babel 插件时，它们的顺序变得非常重要。由于每个插件都会重写代码，如果顺序错误，可能会导致代码出现奇怪的问题。
举个例子，我们猜测下面的代码将会打印何种结果。
const add = (a, b) => a + b; console.log(add(2, 5));
如果你的 .babelrc 配置是这样的：
{
"presets": [],
"plugins": ["@babel/plugin-transform-arrow-functions", "@babel/plugin-transform-block-scoping"]
}则最终的 ES5 代码如下：
"use strict"; const add = (a, b) => a + b; console.log(add(2, 5));
如果你运行此代码，将会发现它会抛出一个错误：Unexpected token =>。这是因为顺序错误导致箭头函数转换失败。
如何修复这个问题呢？将插件的顺序改为这样：
{
"presets": [],
"plugins": ["@babel/plugin-transform-block-scoping", "@babel/plugin-transform-arrow-functions"]
}这样代码将成功转换为 ES5 代码。
Polyfill
在使用 Babel 进行转换后，仍然存在一些新的语言特性，特别是 API，在某些较旧的浏览器中可能无法使用。为了解决这个问题，可以使用 polyfill。
举个例子，我们猜测下面的代码将会打印何种结果。
-- -------------------- ---- -------
----- ------- - --- --------------- -- -
------------- -- -
--------------- ---------
-- ------
---
------------------ -- -
-------------------
---如果你的 .babelrc 配置是这样的：
{
"presets": [],
"plugins": ["@babel/plugin-transform-arrow-functions", "@babel/plugin-transform-block-scoping", "@babel/plugin-transform-regenerator"]
}则最终的 ES5 代码如下：
-- -------------------- ---- -------
---- --------
--- ----------- - -------------------------------------------------------------
--- -------- - ---------------------------------------------------------
--- ---------------------- - ----------------------------------------------------------------
----------------------------------------------
--- ---------
--- ------- - --- ------------------------- --------- -
--- ----------------------------- -- -
--------------- ---------
-- ------
---
--------------------- ------- -
------ --------- - ---------------------------- --- --------------------------- -------- --- --------
---这个代码中使用的 setTimeout、Promise 等新 API 在某些较旧的浏览器中可能无法使用。为了解决这个问题，我们需要在代码中添加对应的 polyfill。
例如，在上述代码中，我们可以添加如下代码：
import "core-js/stable"; import "regenerator-runtime/runtime";
这样在老的浏览器中就可以顺利运行了。
总结
Babel 是一个非常有用的工具，可以让你使用新的 JavaScript 语言特性，同时还能兼容较旧浏览器。但是在使用时，需要注意一些 Babel 的坑。在配置时，需要注意插件的顺序，以及是否需要添加 polyfill。希望本文能够帮助你解决 Babel 的一些问题，祝你愉快地写代码！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a4fb5fadd4f0e0ffd5b402