在现代 web 开发中，我们通常需要使用一些新的 JavaScript 语法和特性。但是，由于各种原因（例如浏览器支持问题），我们不能在所有用户的设备上使用这些新特性。这就是 Babel 的作用——将新的语法转换为旧的、兼容性更好的语法。
本文将详细介绍如何在 Node.js 上搭建 Babel 应用程序，以及如何使用 Babel 来编译你的项目。
准备工作
在开始之前，确保你已经按照官方文档的说明安装了 Node.js 和 npm。在本文中，我们将使用 npm 包管理器来安装和管理我们的依赖项。
创建初始项目
首先，我们需要创建一个新的 Node.js 项目。在此过程中，我们将使用 npm 初始化器（npm init）和 package.json 文件来管理我们的项目。
在你选择的项目文件夹中打开终端，并输入以下命令：
npm init
按照提示输入项目的名称、版本号、描述等信息，并确认该信息是否正确。
一旦你完成了初始化器，你应该会得到一个类似下面的 package.json 文件：
-- -------------------- ---- -------
-
------- -------------
---------- --------
-------------- --- ------- ---------
------- -----------
---------- -
------- ----- -------- -- ---- ----------- -- ---- --
--
----------- ---
--------- ---
---------- -----
-安装 Babel
接下来，我们将安装 Babel 的核心依赖项——babel-core、babel-cli、以及需要转换的插件和预设。
在你的终端中输入以下命令来安装这些依赖项：
npm install --save-dev babel-core babel-cli babel-preset-env babel-plugin-transform-runtime
其中，babel-preset-env 可以将所有 ES2015+ 代码转换为 ES5 兼容的代码，并为需要的功能加载 Polyfill；babel-plugin-transform-runtime 可以在转换时使用 Babel 运行时来避免生成冗余的代码。
配置 Babel
在你的项目根目录下创建一个名为 .babelrc 的文件，并输入以下内容：
{
"presets": ["env"],
"plugins": ["transform-runtime"]
}这里，presets 告诉 Babel 使用哪些预设，plugins 告诉 Babel 使用哪些插件。
编译代码
现在，我们已经可以开始使用 Babel 来编译我们的代码。
例如，假设你有一个名为 main.js 的文件，其中包含一些使用 ES2015 模板字面量语法的代码：
const name = "Babel";
console.log(`Hello, ${name}!`);在终端中输入以下命令，将 main.js 转换为 ES5 兼容的代码：
babel main.js --out-file main-compiled.js
这将生成一个名为 main-compiled.js 的新文件，其中包含转换后的代码：
"use strict";
var name = "Babel";
console.log("Hello, " + name + "!");如果你需要编译整个目录中的文件，可以使用如下命令：
babel src --out-dir lib
其中，src 是你的源代码目录，lib 是你希望编译后代码存储的目标目录。
集成到开发环境中
如果你希望 Babel自动编译你的代码，而不是每次手动运行编译命令，可以将其集成到你的开发环境中。
例如，在 package.json 中添加以下脚本：
{
"scripts": {
"build": "babel src --out-dir lib"
}
}然后，在你的终端中，运行以下命令：
npm run build
这将自动编译你的代码。
结论
在本文中，我们介绍了如何使用 Babel 来编译新的 JavaScript 语法和特性，并将其转换为兼容性更好的代码。我们还讨论了如何集成 Babel 到开发环境中，以便自动编译代码。
Babel 现在已经成为了现代 web 开发不可或缺的工具，它可以大大提高我们的开发效率。希望你能从本文中受益，能够更好地使用 Babel。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67036ffbd91dce0dc84b80aa