Babel 是一个流行的 JavaScript 编译器，用于将现代 JavaScript 代码转换为向后兼容的代码，以便在旧版浏览器或其他环境中运行。它也支持将新的 JavaScript 语言特性转换为旧的语法，以便更广泛地支持。
本指南将向初学者介绍如何正确地安装和配置 Babel 编译器，以便您可以开始编写和转换现代 JavaScript 代码。
步骤 1：安装 Node.js 和 npm
Babel 是一个基于 Node.js 平台的工具，因此您需要首先安装 Node.js 和 npm。您可以从 Node.js 官网下载并安装 Node.js，它将自动包含 npm。
步骤 2：创建项目并安装 Babel
接下来，您需要创建一个新的项目目录，并在其中初始化一个新的 npm 项目。在命令行中执行以下命令：
mkdir myproject cd myproject npm init -y
这将创建一个名为 myproject 的新目录，并在其中初始化一个新的 npm 项目。 -y 选项将使用默认设置快速创建项目。
接下来，您需要安装 Babel 的核心依赖项 @babel/core 和命令行工具 @babel/cli。在命令行中执行以下命令：
npm install @babel/core @babel/cli --save-dev
这将在您的项目中安装 Babel 的核心依赖项和命令行工具，并将它们添加到项目的 devDependencies 中。
步骤 3：安装转换器和插件
除了核心依赖项和命令行工具之外，您还需要安装用于转换代码的转换器和插件。这些转换器和插件将根据您的项目需要进行安装。以下是一些常见的转换器和插件：
@babel/preset-env：用于将现代 JavaScript 代码转换为向后兼容的代码。@babel/preset-react：用于将 React JSX 代码转换为普通的 JavaScript 代码。@babel/plugin-proposal-class-properties：用于支持新的类属性语法。@babel/plugin-transform-runtime：用于将一些较新的语言特性转换为旧的语法。
您可以根据需要安装这些转换器和插件。例如，如果您需要将现代 JavaScript 代码转换为向后兼容的代码，您可以执行以下命令：
npm install @babel/preset-env --save-dev
这将安装 @babel/preset-env 转换器，并将其添加到 devDependencies 中。
步骤 4：创建 Babel 配置文件
现在，您需要创建一个 Babel 配置文件，以便告诉 Babel 如何转换您的代码。在项目根目录中创建一个名为 .babelrc 的文件，并添加以下内容：
{
"presets": [
"@babel/preset-env"
],
"plugins": []
}这将告诉 Babel 使用 @babel/preset-env 转换器，并不使用任何插件。
您可以根据需要添加其他转换器和插件，并在配置文件中进行配置。
步骤 5：使用 Babel 转换代码
现在，您可以使用 Babel 命令行工具来转换您的代码。例如，如果您有一个名为 index.js 的文件，其中包含一些现代 JavaScript 代码，您可以使用以下命令将其转换为向后兼容的代码：
npx babel index.js --out-file index.compiled.js
这将使用 Babel 将 index.js 转换为向后兼容的代码，并将其保存到 index.compiled.js 文件中。
您还可以使用其他选项来配置 Babel 转换器的行为。例如，您可以使用 --watch 选项来监视文件的更改，并自动重新编译代码。
示例代码
下面是一个示例代码，演示如何使用 Babel 将现代 JavaScript 代码转换为向后兼容的代码：
-- -------------------- ---- ------- -- -------- ----- ------- - --- -- --- ----- -------- - - ---- ----- -- ----- ---------- - -- --- -- -- - ----------------- -- --------------------- ----- ---------- - ------------------ -- ---- - --- ------------------------
运行以下命令将其转换为向后兼容的代码：
npx babel index.js --out-file index.compiled.js
转换后的代码如下：
-- -------------------- ---- ------- ---- -------- --- -------- - --- -- --- --- --------- - - ---- ----- -- --- ---------- - -------- ---------------- - --- --- - --------- ----------------- -- ---------------------- --- ---------- - --------------------- ------ - ------ ---- - -- --- ------------------------
结论
Babel 是一个非常有用的工具，可以帮助您将现代 JavaScript 代码转换为向后兼容的代码，并支持新的语言特性。本指南向初学者介绍了如何正确地安装和配置 Babel 编译器，并提供了示例代码，以便您可以开始编写和转换现代 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676b0f7f78388e33bb1f902e