如何为vite build命令传递自定义--lang参数构建多语言React包？

问题原因 #

Vite的CLI基于CAC工具，默认只识别内置命令选项，未注册的自定义参数会触发CACError: Unknown option错误。要使用--lang参数，需先注册该选项，或改用环境变量传递语言标识。

方案一：使用环境变量（更简洁，无CLI报错） #

这种方式无需修改Vite的CLI配置，直接通过环境变量传递语言参数：

1. 修改package.json脚本
   将6个语言打包命令改为环境变量形式：

{
  "scripts": {
    "build:en": "LANG=en vite build",
    "build:zh": "LANG=zh vite build",
    "build:es": "LANG=es vite build",
    "build:fr": "LANG=fr vite build",
    "build:de": "LANG=de vite build",
    "build:ja": "LANG=ja vite build"
  }
}

2. 配置Vite插件替换占位符
   在vite.config.js中读取环境变量，编写自定义插件替换代码中的__placeholder__：

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

export default defineConfig(() => {
  // 获取语言标识，默认英文
  const lang = process.env.LANG || 'en'

  return {
    plugins: [
      react(),
      {
        name: 'lang-replacer',
        // 代码转换阶段替换占位符
        transform(code) {
          // 导入对应语言的配置文件（假设文件存于src/locales下）
          const locale = require(`./src/locales/${lang}.json`)
          // 根据实际需求调整替换逻辑，示例替换为语言配置的JSON字符串
          return code.replace(/__placeholder__/g, JSON.stringify(locale))
        },
        // 可选：替换HTML中的占位符
        transformIndexHtml(html) {
          const locale = require(`./src/locales/${lang}.json`)
          return html.replace(/__placeholder__/g, locale.pageTitle)
        }
      }
    ],
    // 每个语言打包到独立目录，避免文件覆盖
    build: {
      outDir: `dist-${lang}`
    }
  }
})

方案二：注册自定义--lang参数（满足命令行参数需求） #

如果坚持使用--lang=xx的形式，需先在Vite配置中注册该CLI选项：

1. 修改vite.config.js
   引入CAC工具注册自定义选项，并读取参数：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import cac from 'cac'

// 注册--lang选项
const cli = cac('vite')
cli.option('--lang <language>', '指定打包的目标语言')
// 解析命令行参数（不执行命令逻辑）
const parsed = cli.parse(process.argv, { run: false })
const lang = parsed.options.lang || 'en'

export default defineConfig(() => {
  return {
    plugins: [
      react(),
      {
        name: 'lang-replacer',
        transform(code) {
          const locale = require(`./src/locales/${lang}.json`)
          return code.replace(/__placeholder__/g, JSON.stringify(locale))
        }
      }
    ],
    build: {
      outDir: `dist-${lang}`
    }
  }
})

2. 修改package.json脚本
   直接使用--lang参数：

{
  "scripts": {
    "build:en": "vite build --lang=en",
    "build:zh": "vite build --lang=zh",
    "build:es": "vite build --lang=es",
    "build:fr": "vite build --lang=fr",
    "build:de": "vite build --lang=de",
    "build:ja": "vite build --lang=ja"
  }
}

注意事项 #

• 确保src/locales目录下存在对应语言的JSON文件（如en.json、zh.json），文件结构根据业务需求定义。
• 替换逻辑可灵活调整，比如将__placeholder__替换为语言配置中的单个字段，而非整个JSON字符串。
• 若需要处理静态资源中的占位符，可在插件的writeBundle钩子中读取输出文件并修改。

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