什么是 Babel
Babel 是一个 JavaScript 编译器，可以将 ES6 或者更新的 JavaScript 代码转换成向后兼容的 JavaScript 代码，使得它们可以在任何浏览器或者环境中运行。由于不同浏览器对 ES6 的支持程度不同，Babel 能够让我们在开发过程中使用最新的语言特性而不需要担心运行环境。除此之外，Babel 还支持一些插件和预设，可以帮助我们进行代码转换、优化等。
安装和使用
- 安装 Babel
Babel 可以通过 npm（Node.js 包管理器）来安装，我们可以在终端或命令窗口中运行以下命令：
npm install --save-dev @babel/core @babel/cli
这会将 Babel 安装到本地的 node_modules 目录下。
- 编写配置文件
我们需要在项目根目录下创建一个名为 .babelrc 的文件来存放 Babel 的配置。示例配置如下：
{
"presets": ["@babel/preset-env"]
}这里的 @babel/preset-env 是一个预设（preset），表示支持所有 ECMAScript 版本语言特性。预设实际上是一组插件的集合，它们能够解析特定 ES 版本中的语言特性并进行转换。我们需要将这个预设添加到配置文件中，才能使用所有 ES 版本的语言特性。
- 运行编译命令
在终端或命令窗口中，运行以下命令来编译代码：
./node_modules/.bin/babel src -d dist
这里的 src 指的是存放源代码的目录，dist 指的是存放编译后代码的目录。这个命令会将 src 目录下的所有 JavaScript 文件转换成 ES5 代码并输出到 dist 目录中。
- 使用 Babel 插件
Babel 还支持一些插件，可以用于扩展转换功能。例如，如果我们希望在项目中使用 ES6 中的 Promise 对象，而兼容的 Node.js 版本中不支持 Promise，我们可以安装并使用 babel-plugin-polyfill 插件。
安装：
npm install --save-dev babel-plugin-polyfill
在 .babelrc 文件中添加：
{
"presets": ["@babel/preset-env"],
"plugins": ["babel-plugin-polyfill"]
}现在就可以在代码中使用 Promise 了。
const promise = new Promise((resolve, reject) => {
console.log('Promise is working!');
resolve('Success!');
});
promise.then((msg) => console.log(msg));结论
Babel 是一个非常有用的工具，它能够让开发人员使用最新的 JavaScript 语言特性，同时让代码在不同的浏览器和环境中运行。在实际的项目中，我们可以根据需要选择具体的预设和插件，以实现更高效、更优质的开发和部署。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670358ced91dce0dc84b338c