前言
Babel 是一个广受欢迎的 JavaScript 编译器，它可以将最新的 ECMAScript 代码转换成浏览器或 Node.js 等环境可执行的 JavaScript 代码。Babel 可以让你使用最新的 JavaScript 特性，而不用担心浏览器或 Node.js 不支持它们。本文将为你介绍 Babel 6 的基础知识以及如何使用它来转换 JavaScript 代码。
安装
在开始使用 Babel 之前，我们需要先安装它。Babel 6 需要使用 npm 来进行安装。在终端中运行以下命令即可安装 Babel：
npm install --save-dev babel-cli babel-preset-env
这个命令会安装两个包，babel-cli 是 Babel 的命令行工具，babel-preset-env 是 Babel 的预设，它包含了所有的 ES6、ES7 和 ES8 的特性，它会根据你的目标环境来自动转换你的代码。
配置
安装完成之后，我们需要在项目的根目录下创建一个 .babelrc 文件，这个文件用来配置 Babel 的转换规则。在 .babelrc 文件中，我们可以指定需要使用哪些预设和插件来进行转换。以下是一个简单的 .babelrc 文件的例子：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ---
-
--
-
-这个配置文件使用了 babel-preset-env 预设，并指定了需要支持的浏览器的版本。在这个例子中，我们指定需要支持最新的两个浏览器版本以及 Safari 7 及以上的版本。
转换代码
当 Babel 安装和配置完成之后，我们就可以开始使用它来转换 JavaScript 代码了。以下是一个简单的例子：
// ES6 代码 const message = `Hello, world!`; // 转换后的代码 var message = "Hello, world!";
在这个例子中，我们使用了 ES6 的模板字符串语法，它可以让我们更方便地拼接字符串。但是，这个语法在一些旧的浏览器中并不被支持。使用 Babel，我们可以将这个语法转换成普通的字符串拼接语法，这样就能在更多的浏览器中运行我们的代码了。
使用命令行工具
Babel 的命令行工具 babel-cli 可以让我们在终端中直接使用 Babel 进行代码转换。以下是一个使用命令行工具转换代码的例子：
babel src --out-dir lib
这个命令会将 src 目录下的所有 JavaScript 文件转换成 ES5 的代码，并将转换后的代码保存到 lib 目录下。如果你只想转换某个特定的文件，可以使用以下命令：
babel src/index.js --out-file lib/index.js
这个命令会将 src/index.js 文件转换成 ES5 的代码，并将转换后的代码保存到 lib/index.js 文件中。
使用 Gulp
如果你正在使用 Gulp 来构建你的项目，那么你也可以使用 Gulp 来调用 Babel。以下是一个使用 Gulp 调用 Babel 的例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - ----------------------
-------------------- -- --
-----------------------
-------------
-------- -------
---
-----------------------
--这个例子中，我们使用了 Gulp 的 gulp-babel 插件来调用 Babel。这个插件会将 src 目录下的所有 JavaScript 文件转换成 ES5 的代码，并将转换后的代码保存到 lib 目录下。
结论
Babel 是一个非常有用的工具，它可以让我们使用最新的 JavaScript 特性，而不用担心浏览器或 Node.js 不支持它们。在本文中，我们介绍了 Babel 6 的基础知识以及如何使用它来转换 JavaScript 代码。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676a0ee829c1ce2b17d84d60