JavaScript中Babel怎么配置babel.config.json对整个项目进行全局语法转译-js教程-PHP中文网

babel 不支持 babel.config.json 文件，仅识别 babel.config.js、babel.config.cjs、.babelrc 或 package.json 中的 babel 字段；正确配置需使用项目根目录下的 babel.config.js 导出配置对象，并安装 @babel/core、@babel/preset-env 等依赖。

javascript中babel怎么配置babel.config.json对整个项目进行全局语法转译

Babel 本身不支持 babel.config.json 文件 —— 它只识别 babel.config.js、babel.config.cjs、.babelrc 或 package.json 中的 babel 字段。如果你创建了 babel.config.json，Babel 会直接忽略它，不会生效。

正确配置全局 Babel（推荐用 babel.config.js）

要在整个项目中统一应用语法转译（比如把箭头函数、可选链、Top-level await 等转成兼容旧环境的代码），需使用 Babel 支持的配置文件格式：

根目录下新建 babel.config.js（注意是 .js，不是 .json）
该文件导出一个配置对象，Babel 会自动在项目所有子目录中递归读取（即“全局生效”）
确保配置位置在项目根目录（与 package.json 同级），否则可能无法被正确识别

一个实用的 babel.config.js 示例

以下是最小可用配置，适配主流现代语法并输出 ES5 兼容代码：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

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

说明：

@babel/preset-env 根据目标环境自动决定需要转译哪些语法
targets.node: 'current' 表示按当前 Node.js 版本编译；也可写成 { chrome: '80', ie: '11' } 精确控制
@babel/plugin-transform-runtime 避免重复注入 helper 函数（如 _classCallCheck），减小包体积

依赖安装不能少

仅配置文件不够，还需安装对应 Babel 工具和 preset：

运行：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime
若用 Webpack，还要装 @babel/loader 并在 webpack.config.js 中启用
若用 Vite 或 Create React App，它们已内置 Babel 支持，只需配好 babel.config.js 即可生效