Vite+React+TS+SWC环境下自动注入Intl消息ID方案问询

我用yarn create vite创建了Vite+React-TypeScript项目，有@vitejs/plugin-react（Babel）和@vitejs/plugin-react-swc（SWC）两个模板可选。我希望自动注入Intl消息ID，让intl.formatMessage({defaultMessage: "Hello World"})直接生效，无需手动编写intl.formatMessage({id: hello.world, defaultMessage: "Hello World"})。

Babel环境下的现有配置 #

在Babel环境中，我已经通过如下配置实现了自动注入：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            "formatjs",
            {
              idInterpolationPattern: "[sha512:contenthash:base64:6]",
              ast: true,
            },
          ],
        ],
        babelrc: false,
        configFile: false,
      },
    }),
  ],
});

但目前@formatjs官方的SWC插件存在兼容性问题：

@formatjs/swc-plugin目前与TypeScript不兼容，在TypeScript代码库中使用会出现“Method visitTsType not implemented.”错误。

以下是SWC环境下的可行替代方案：

1. 使用FormatJS CLI预构建处理 #

通过FormatJS的命令行工具，提前扫描代码并自动注入消息ID，无需依赖SWC插件：

• 首先安装FormatJS CLI：

  npm install @formatjs/cli --save-dev
  # 或 yarn add @formatjs/cli --dev
  

• 在package.json中添加脚本：

  {
    "scripts": {
      "extract-messages": "formatjs extract 'src/**/*.{ts,tsx}' --out-file messages.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'",
      "compile-messages": "formatjs compile 'src/**/*.{ts,tsx}' --messages messages.json --out-dir src",
      "predev": "npm run extract-messages && npm run compile-messages",
      "prebuild": "npm run extract-messages && npm run compile-messages"
    }
  }
  

• 执行npm run dev或npm run build时，会自动先提取消息、生成ID并替换代码中的formatMessage调用。

2. 自定义轻量SWC插件（进阶方案） #

如果需要在构建过程中实时处理，可以基于SWC的API编写自定义插件，核心逻辑是：

• 遍历AST找到intl.formatMessage的调用节点
• 提取defaultMessage的内容，按照指定规则生成ID（比如哈希值）
• 自动向参数对象中添加id属性
• 注意避开TS类型节点的处理，避免触发兼容性错误

3. 临时回退到Babel插件 #

如果上述方案无法满足需求，可以暂时切换回@vitejs/plugin-react的Babel版本，保持现有配置即可继续使用自动注入ID的功能。

内容的提问来源于stack exchange，提问作者Nomada