JavaScript 中 Babel 配置文件 babel.config.js 怎么编写-js教程-PHP中文网

babel.config.js是项目级配置文件，适用于整个项目（含node_modules），支持导出对象或函数以实现环境区分与overrides精细控制，优先于.babelrc用于monorepo等复杂场景。

javascript 中 babel 配置文件 babel.config.js 怎么编写

Babel 配置文件 babel.config.js 是项目级配置，适用于整个项目（包括 node_modules 外部依赖的处理），推荐在根目录下使用。它导出一个函数或对象，返回 Babel 的配置项。

基础结构：导出配置对象

最简写法是直接导出一个普通 JavaScript 对象：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-transform-runtime'
  ]
};

这样 Babel 会为所有匹配的文件（默认 .js, .jsx, .ts, .tsx）应用这些预设和插件。

支持环境区分：用函数接收参数

当需要根据开发/生产环境启用不同插件（比如只在开发时加 @babel/plugin-transform-react-jsx-dev），可导出函数：

参数 api 提供 cache、env、caller 等方法
api.env() 返回当前环境名（如 "development" 或 "production"）
api.cache(true) 启用缓存（推荐在函数开头调用）

示例：

Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互，使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载

module.exports = function (api) {
  api.cache(true); // 启用缓存提升性能

  const isDevelopment = api.env('development');
  const presets = ['@babel/preset-env'];
  const plugins = ['@babel/plugin-transform-runtime'];

  if (isDevelopment) {
    plugins.push('@babel/plugin-transform-react-jsx-dev');
  }

  return { presets, plugins };
};

指定文件范围：用 `overrides` 精细控制

当不同目录或文件类型需不同配置（如测试文件用 babel-jest 插件，源码用 transform-runtime），可用 overrides：

module.exports = {
  presets: ['@babel/preset-env'],
  overrides: [
    {
      test: /\/src\//,
      plugins: ['@babel/plugin-transform-runtime']
    },
    {
      test: /\/tests\//,
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: ['@babel/plugin-transform-modules-commonjs']
    }
  ]
};

注意：test 支持正则、字符串或数组，匹配的是文件绝对路径。