Babel JavaScript (Node.js): 方法、示例、安装

什么是 Babel，为什么需要它？

Babel 是一个强大的 JavaScript 转译器（编译器），它允许开发者使用最新版本的 ECMAScript（ES6、ES7、ES8、ES9、ES10、ES11、ES12 及更高版本）编写代码，并将其转换为向后兼容的 JavaScript，以便在旧版浏览器和运行环境（例如，低于 12 版本的 Node.js）中执行。

Babel 解决的核心问题是新语言特性（箭头函数、async/await、解构、类、模块、可选链等）与实际运行环境对这些特性的支持之间的差距。Babel 充当了一座桥梁，让开发者能够利用现代 JavaScript 的所有优势，而无需等待所有浏览器更新。

Babel 由三个主要组件组成：

核心 (@babel/core) — 主引擎，负责解析代码、转换代码并生成新代码。
插件 — 独立的模块，每个模块负责转换一个特定的语法结构（例如，用于箭头函数的插件、用于 async/await 的插件）。
预设 — 预先配置好的插件集合（例如，@babel/preset-env、@babel/preset-react）。

Babel 也用于转译 TypeScript、JSX (React)、Flow 以及其他 JavaScript 扩展。

安装 Babel

Babel 通过 npm（Node 包管理器）安装。开始之前，您需要 Node.js 12 或更高版本。

创建一个新项目并初始化它：

mkdir my-babel-projectcd my-babel-projectnpm init -y

安装 Babel 的核心包：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

我们来解析一下安装的内容：

@babel/core — Babel 的核心。没有它，一切都无法运行。
@babel/cli — 命令行界面，允许您从终端运行 Babel。
@babel/preset-env — 最重要的预设，它会根据目标运行环境（浏览器或 Node.js 版本）自动确定需要哪些插件。

如需配合 React 使用，请额外安装：

npm install --save-dev @babel/preset-react

如需配合 TypeScript 使用：

npm install --save-dev @babel/preset-typescript

快速上手及代码示例

在项目根目录创建 Babel 配置文件（babel.config.json 或 .babelrc）：

{  "presets": [    ["@babel/preset-env", {      "targets": {        "node": "current"      }    }]  ]}

创建文件 src/index.js，包含现代代码：

// src/index.jsconst greet = (name) => {  return `Hello, ${name}!`;};

const users = ['Alice', 'Bob', 'Charlie'];const greetings = users.map(user => greet(user));

console.log(greetings);

// 使用 async/awaitconst fetchData = async () => {  const data = await Promise.resolve({ message: 'Success' });  console.log(data.message);};

fetchData();

现在使用 Babel 编译代码：

npx babel src --out-dir dist

命令执行后，dist 文件夹中会出现 index.js 文件，包含转换后的代码：

// dist/index.js"use strict";

var greet = function greet(name) {  return "Hello, ".concat(name, "!");};

var users = ['Alice', 'Bob', 'Charlie'];var greetings = users.map(function (user) {  return greet(user);});

console.log(greetings);

var fetchData = async function fetchData() {  var data = await Promise.resolve({ message: 'Success' });  console.log(data.message);};

fetchData();

请注意