使用 Babel 进行 JavaScript 编译的流程解析

在前端开发中，现代 JavaScript（如 ES6+）的使用已经越来越普遍然而，由于兼容性问题，很多浏览器或旧环境并不能直接支持这些新特性这时我们就会用到 Babel，它是一个功能强大的 JavaScript 编译工具，主要用来把 ES6、ES7、ESnext、甚至未来的 JavaScript 特性转码成可在浏览器中运行的 ES5 代码此外，Babel 也能处理像 React 的 JSX 语法转换，让我们可以在项目中自由使用现代的开发语法

下面，我将具体说明如何使用 Babel CLI 和 Babel Core 配置一个基本的转码流程，并解释如何将 JSX 转换成标准的 React.createElement 调用

---

一、安装 Babel

要使用 Babel，我们通常需要安装两个核心的包：@babel/cli 和 @babel/core

1. Babel CLI

@babel/cli 是一个命令行工具，可以让我们很方便地调用 Babel 对项目中所有的 JavaScript 文件进行转换它并不是在生产环境需要的依赖，仅在 开发阶段 使用

pnpm install -D @babel/cli

-D 表示这是一个开发依赖（devDependency），意味着它主要用于开发环境的构建流程，在上线时并不需要用到这个包

2. Babel Core

Babel Core 是 Babel 的核心库，它和 Babel CLI 一起工作即使你使用的是 Webpack 或 Vite 这类构建工具，里面也需要绑定 Babel Core它的作用是提供编译规则、API 甚至零构建功能

pnpm install -D @babel/core

---

二、配置 Babel 编译规则

我们通过 babel.config.js（或 .babelrc.json）来告诉 Babel "你该用什么规则来转换代码"

1. 基础的转换场景

比如，我们要把现代 JavaScript 语法（ES6）转成语法更老的 ES5，就需要引入对应的 Babel 插件或 preset（预设集合）：

• @babel/preset-env 是一个常用的预设，可以自动检测我们想要目标兼容的浏览器版本并转换代码

pnpm install -D @babel/preset-env

然后在 babel.config.js 中添加配置：

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
};

这样，Babel 会根据 preset-env 的配置规则，把 ES6 的箭头函数、let/const、模板字符串等特性转换为 ES5 代码

---

2. React 的 JSX 编译支持

如果我们使用的是 React + JSX 语法，就不能仅仅依赖默认的 ES6 转换规则JSX 并不是 JavaScript 的一部分，它是一种类 XML 语法扩展，广泛用在 React 的结构编写中要处理 JSX，我们需要安装对应的转义规则：

pnpm install -D @babel/preset-react

然后仍然修改 babel.config.js，添加对应配置：

// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ]
};

此时，Babel 会把所有以 .jsx 或 .js 结尾的文件中的 JSX 语法编译为 React.createElement() 调用比如我们写的组件代码：

const element = <h1>Hello, world!</h1>;

会被转换为：

const element = React.createElement('h1', null, 'Hello, world!');

这样即使用户的浏览器不支持 JSX，也可以在运行时通过 Babel 创建 DOM 结构

---

三、命令行使用 Babel CLI

安装好 Babel CLI 之后，我们可以在命令行中直接运行 Babel 编译项目源代码例如，假设我们有如下目录结构：

project/
├── src/
│   └── index.jsx
├── dist/

我们可以运行以下命令来转换 src/index.jsx 到 dist/index.js：

npx babel src/index.jsx --out-file dist/index.js --extensions .js,.jsx

或者一次性编译整个目录：

npx babel src --out-dir dist --extensions .js,.jsx

这里 --extensions .js,.jsx 表示允许 Babel 处理 .js 和 .jsx 文件

---

四、为什么使用 -D 参数？

我们前面的命令都使用了 --save-dev（或 -D）来作为安装参数其核心原因是：

• 转码工具只在 开发过程 中使用，上线后我们不需要它因为最终用户获得的是编译后的 ES5 或其他兼容代码，运行时已经不需要再次调用 Babel
• 使用 -D 可以让项目体积更小，构建速度更快，提升部署效率

---

五、node_modules 下的可执行文件

当我们安装了 @babel/cli 后，会发现在 node_modules/.bin/ 目录下出现一条路径，类似 .\node_modules\.bin\babel其实这就是为开发者提供的本地可执行命令我们使用 npx babel 或 npm run build 来调用它，Babel 会自动引用 node_modules/.bin 下的 @babel/cli 执行

我们也常常通过 package.json 的 script 字段来封装这个流程例如：

{
  "scripts": {
    "build": "babel src --out-dir dist --extensions .js,.jsx"
  }
}

然后只需要运行：

npm run build

尽量不要手动通过-long-path 执行 .\node_modules\.bin\babel，脚本由构建工具统一调用，确保流程的稳定性

---

六、Babel CLI 和 Babel Core 的协作关系

Babel CLI 是一个 命令行工具 ，它的角色是作为 Babel 的调度器，帮我们启动编译流程而 Babel Core 是其背后的 执行引擎，负责解析、转换、输出 JavaScript

我们可以将他们类比为：

• Babel CLI 就像一个厨师 ------ 调用工具，执行流程
• Babel Core 就像厨房里的厨具和材料 ------ 实现转换的功臣

---

七、总结

使用 Babel 编译 JavaScript 的核心流程主要包括以下步骤：

1. 安装必要的依赖（@babel/cli 和 @babel/core）
2. 配置 Babel 预设，如 @babel/preset-env 和 @babel/preset-react
3. 调用 Babel CLI 来编译指定目录或文件中的代码
4. 使用 Node.js 或构建工具执行转换后的代码

这样的编译机制，让我们可以大胆地使用最新的 JavaScript 特性，甚至 React 的 JSX，而无需担心兼容性和环境差异

---