跳转到主要内容
只有当你需要 SWC（Speedy Web Compiler）覆盖不到的转换或插件时，才引入 Babel。让 SWC 继续作为默认管线，再把 Babel 限定到真正需要它的文件上。

​
什么场景适合用 Babel

  • 你依赖 Babel 独有的插件或预设。
  • 你正在把一个 Babel 主导的现有项目逐步迁移过来。
  • 你想针对特定文件类型（例如 MDX）做有目标的转换。

​
Babel 的能力

能力它能带来什么
有针对性的转换针对特定文件类型（例如 MDX）跑 Babel，而无需替换整条构建管线
接入插件生态复用其他 web 项目里 Babel 独有的预设/插件
渐进式迁移把遗留的、重度依赖 Babel 的扩展项目分步迁移到 Extension.js
Rspack（Extension.js 打包器）集成通过 extension.config.* 的 config 钩子配置 Babel

​
示例配置

安装 Babel 依赖： 创建 babel.config.json： 
{
  "presets": ["@babel/preset-env"]
}
在 extension.config.js 里把 Babel 只接到 MDX 上： 
export default {
  config: (config) => {
    config.module.rules.push({
      test: /\.mdx$/,
      use: ["babel-loader", "@mdx-js/loader"],
    });
    return config;
  },
};

​
仅在必要时用 Babel 替换 SWC 处理 JS/TS

仅当你确实需要让 Babel 直接处理 JS/TS 入口文件时，才使用这种模式： 
export default {
  config: (config) => {
    config.module.rules = [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [{ loader: "babel-loader" }],
      },
      ...config.module.rules.filter(
        (rule) => !String(rule?.test || "").includes("[jt]sx"),
      ),
    ];
    return config;
  },
};

​
最佳实践

  • 在替换默认 JS/TS 管线之前，优先采用有针对性的 Babel 用法。
  • 让 Babel 规则保持显式，以便 loader 顺序可预期。
  • 仅在迁移或插件兼容性确有需要时才复用 Babel。

​
下一步