随着 JavaScript 的发展，ES6 已经成为了现代 JavaScript 开发的标准。然而，ES6 的语法对于很多老版本的浏览器来说仍不兼容。为了解决这个问题，我们可以使用 Babel 来将 ES6 代码编译成老版本浏览器都能识别的代码。
Babel 的配置过程并不是一件简单的事情，但是只要掌握了一些基本的知识，就能够轻松配置。
安装 Babel
首先，我们需要安装 Babel。可以通过 npm 进行安装。
npm install --save-dev @babel/core @babel/cli @babel/preset-env
安装完成后，我们需要在项目的根目录中创建一个 .babelrc 配置文件。这个文件是 Babel 的配置文件，通过它告诉 Babel 如何编译我们的代码。
配置 Babel
在 .babelrc 中，我们需要指定 Babel 的 preset。preset 是一组插件的集合，用来指定对不同的 ES 版本进行转换。
这里我们使用 @babel/preset-env 这个 preset，它可以根据目标浏览器或者运行环境自动确定使用哪些插件。我们需要在 .babelrc 中指定它。 示例如下：
-- -------------------- ---- -------
-
---------- -
-
-------------
-
---------- -
----------- ------ - ---------- ------- -- ---
-
-
-
-
-这个配置文件会告诉 Babel，我们要将 ES6 代码编译成能够运行在目标浏览器中的代码。这里我们指定了目标浏览器是 "last 2 versions" 和 Safari 7 及以上版本。我们可以根据项目实际情况来调整这个配置。
编译代码
完成配置后，我们就可以使用 Babel 来编译我们的代码了。
首先，我们需要在 package.json 中添加如下 script。这个 script 会把 src 目录下的所有 .js 文件编译到 dist 目录下。
{
"scripts": {
"build": "babel src --out-dir dist"
}
}然后，在命令行中执行 npm run build，就可以把代码编译到 dist 目录下了。
示例代码
这里有一段示例 ES6 代码：
const arr = [1,2,3]; const doubleArr = arr.map(item => item * 2); console.log(doubleArr);
通过 Babel 编译后，会变成如下代码：
"use strict";
var arr = [1, 2, 3];
var doubleArr = arr.map(function (item) {
return item * 2;
});
console.log(doubleArr);可以看到，我们的 ES6 代码被成功编译成了 ES5 版本的代码。这样，就可以确保我们的代码可以在老版本的浏览器中正确运行。
总结
Babel 是一个非常有用的工具，能够帮助我们将 ES6 代码编译成老版本浏览器都能识别的代码。通过本文，我们学习了如何配置和使用 Babel。只要掌握了这些基本知识，就可以自如地使用 Babel 帮助我们编译 ES6 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c603b44908f32798b1f6eb