怎样用JavaScript配置Babel？

在前端项目开发中，Babel是处理JavaScript语法兼容性的核心工具，它能将高版本JS语法转换为低版本环境可识别的代码。下面我们就一步步讲解如何用JavaScript配置Babel。

安装Babel核心依赖

首先需要在项目中安装Babel的核心包和常用预设，打开终端执行以下命令：

# 安装Babel核心库和命令行工具
npm install --save-dev @babel/core @babel/cli
# 安装环境预设，用于将ES6+代码转换为兼容目标环境的代码
npm install --save-dev @babel/preset-env

创建JavaScript格式的配置文件

Babel支持多种格式的配置文件，其中babel.config.js是用JavaScript编写的配置文件，灵活性更高，我们可以在项目根目录下创建这个文件。

基础配置示例

以下是一个最基础的babel.config.js配置内容：

module.exports = function (api) {
  // 缓存配置，避免重复编译时重复计算配置
  api.cache(true);

  // 预设配置，指定使用的Babel预设
  const presets = [
    [
      // 使用@babel/preset-env预设
      "@babel/preset-env",
      {
        // 指定目标运行环境，这里表示兼容市场份额大于0.25%的浏览器，排除已死亡的浏览器
        targets: "> 0.25%, not dead",
        // 是否使用useBuiltIns来按需引入polyfill，false表示不引入
        useBuiltIns: false,
        // 指定corejs版本，useBuiltIns开启时需要配置
        // corejs: 3
      }
    ]
  ];

  // 插件配置，暂时不添加额外插件
  const plugins = [];

  // 返回最终配置
  return {
    presets,
    plugins
  };
};

配置项说明

• api.cache：用于缓存配置结果，提升编译效率，设为true表示配置不会被重复计算。
• presets：预设数组，每个预设可以是字符串或者数组，数组形式可以传入预设的配置参数。
• @babel/preset-env的targets：指定代码需要兼容的目标环境，支持浏览器、node版本等配置。
• useBuiltIns：控制polyfill的引入方式，可选值有false、entry、usage，根据项目需求选择。

验证配置是否生效

安装配置完成后，可以编写一个测试文件验证Babel是否正常工作。首先创建src/index.js文件，内容如下：

// 测试ES6箭头函数
const add = (a, b) => a + b;
console.log(add(1, 2));

// 测试let声明
let num = 10;
num = 20;

然后在终端执行编译命令：

npx babel src/index.js --out-file dist/index.js

打开生成的dist/index.js文件，如果能看到箭头函数、let等语法被转换为对应的低版本语法，就说明Babel配置生效了。

常见问题说明

如果项目中需要兼容更老的环境，比如IE11，可以在targets中单独指定，例如将targets改为"ie: 11"，同时开启useBuiltIns按需引入polyfill，并安装corejs依赖。

另外如果需要添加其他Babel插件，比如处理装饰器的@babel/plugin-proposal-decorators，只需要先安装插件，然后把它添加到配置文件的plugins数组中即可。

BabelJavaScript@babel/core@babel/preset-envbabel.config.js修改时间：2026-05-29 23:15:30