Babel 转译器：将现代 JS 编译为兼容代码

FreeGuideOnline 最新 2026-06-15

什么是 Babel？

Babel 是一个 JavaScript 编译器，它将采用最新标准编写的 JavaScript 代码编译成旧版浏览器和环境也能运行的兼容代码。简单来说，Babel 让你可以随心使用 ES6+、TypeScript、JSX 等语法，而无需担心运行时支持问题。

快速上手

环境准备

确保你的机器已安装 Node.js（推荐 v14 以上）和 npm 或 yarn。然后创建项目目录并初始化：

mkdir babel-demo
cd babel-demo
npm init -y

安装 Babel 核心与 CLI

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

@babel/core：Babel 转译引擎。
@babel/cli：命令行工具，可直接在终端中使用。

基础用法

单文件转译

先在 src 目录下创建一个现代语法的 JS 文件：

// src/app.js
const greet = (name) => `Hello, ${name}!`;
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(greet('World'));

在终端执行转译命令：

npx babel src/app.js -o dist/app.js

此时你会发现 dist/app.js 的内容和源文件几乎一样，因为没有任何插件或预设参与，Babel 默认不做转换。

使用预设（Preset）

预设是一组预先配置好的插件集合。最常用的是 @babel/preset-env，它能根据你指定的目标环境自动决定需要哪些语法转换和 polyfill。

安装预设：

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

配置文件

在项目根目录创建 babel.config.json：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"
      }
    ]
  ]
}

targets：使用 browserslist 查询指定需要兼容的浏览器范围。

再次执行转译，你会看到箭头函数和模板字符串被转换成了兼容写法。

深入配置

polyfill 的按需引入

默认情况下 Babel 只转换语法，对于新的 API（如 Promise、Array.prototype.includes）需要额外引入 polyfill。

从 Babel 7.4 开始，推荐使用 core-js 作为 polyfill：

npm install --save core-js

然后在 babel.config.json 中配置：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ]
  ]
}

useBuiltIns: "usage"：自动按需注入使用到的 API 的 polyfill。
corejs：指定 core-js 的主版本号。

这样 Babel 会分析你的代码，只在需要的地方导入必要的 polyfill，不会污染全局，且产物体积最小。

TypeScript 支持

安装 TypeScript 预设：

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

配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

之后即可直接编译 .ts 文件。注意 Babel 只负责剥离类型注解，不做类型检查，类型检查需通过 tsc --noEmit 完成。

React JSX 支持

安装 React 预设：

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

配置（经典模式）：

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

runtime: "automatic"：从 React 17 开始推荐，自动导入 JSX 转换所需的函数，无需手动 import React。

与构建工具集成

Webpack 中的使用

安装 babel-loader：

npm install --save-dev babel-loader

在 webpack.config.js 中添加规则：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

Babel 配置依然从 babel.config.json 读取，也可直接写在 use.options 中。

使用 `@babel/register` 即时转译 node 脚本

对于某些需要直接运行现代 JS 的 Node 脚本，可使用 @babel/register 在 require 时即时转译：

npm install --save-dev @babel/register

入口脚本顶部添加：

require('@babel/register');

然后 require 带进的文件都会经过 Babel 处理。注意此方式不适合生产环境。

实践建议

配置文件格式：优先使用 babel.config.json（适用于整个项目，包括子包）而不是 .babelrc。
源码与编译输出分离：通常 src 存放源码，dist 或 lib 存放编译结果，通过 --out-dir 批量编译。
编译范围：务必使用 exclude 忽略 node_modules，否则会拖慢速度并可能出错。
配合 browserslist：在 package.json 中定义 browserslist 字段，@babel/preset-env 会自动读取，确保目标和前端工程一致。
持续跟进：Babel 生态更新频繁，定期升级依赖并使用 npx browserslist 检查目标浏览器更新。

常见问题

为什么箭头函数没有被转换？

检查是否正确配置了 @babel/preset-env 和 targets。若 targets 中的环境已支持箭头函数，则 Babel 会保留。

使用 `usage` 注入 polyfill 时，某些实例方法仍报错？

确认 core-js 版本与 corejs 选项一致，且安装的是 core-js（不是 core-js-pure）。同时，useBuiltIns: "usage" 只能检测到静态引用，若你动态调用（如基于字符串的方法名）可能需要手动导入。

如何查看更多编译细节？

添加 --verbose 参数运行 babel-cli，或启用 DEBUG=babel:* 环境变量。

Babel 是前端工程化的基石之一，掌握其配置思想能让你自由拥抱语言新特性。从简单的预设入手，逐步理解插件、polyfill 与目标环境的配合，便能游刃有余地搭建健壮的编译流程。