auto-translation-i18n

一键分析项目中的 i18n 多语言 key 自动翻译到所需语言并生成对应 json 文件

1.安装

npm i auto-translation-i18n

2.使用

在项目根目录下创建 autotranslation.config.ts 或者 autotranslation.config.js

// autotranslation.config.ts
import { Lang } from 'auto-translation-i18n/types'
import { defineConfig } from 'auto-translation-i18n/utils'

export default defineConfig({
  // 需要分析的源代码文件
  entrys: [
    'app.ts', // 导入单个文件
    'components/*', // 导入 components 目录下所有文件(非递归)
    'pages/**/*',// 递归导入 pages 目录下所有文件
  ],
  // 分析完成后输出 json 文件的路径
  output: 'public/locales/zh',
  // 翻译配置
  translateConfig: {
    // 代理配置,采用 Google 翻译,国内必须代理
    proxy: {
      ip: '127.0.0.1',
      port: 7890,
    },
    // 源代码文件中文案使用的语言
    fromLang: Lang['zh-CN'],
    // 翻译输出配置,可同时翻译多种语言
    to: [
      {
        // 目标语言
        targetLang: Lang.en,
        // 翻译完成后输出 json 文件的路径
        outPath: 'public/locales/en',
      },
      {
        targetLang: Lang.id,
        outPath: 'public/locales/id',
      },
    ],
  },
})

在 package.json 中添加 script 命令

"scripts": {
  "translation": "autotranslation"
},

在终端执行 npm run translation 即可。

3.注意事项

1.项目源代码中文案调用后面的参数不能换行

// ❌ 错误示例
const App = () => {
  const { t } = useTranslation('common');
  return (
    <p>{ t('你好 {{name}}', {
      name: '世界'
    }) }</p>
  );
}
// ✅ 正确示例
const App = () => {
  const { t } = useTranslation('common');
  return (
    <p>{ t('你好 {{name}}', { name: '世界' }) }</p>
  );
}

2.文案模块命名若不同则禁止在内部嵌套子组件

// ❌ 错误示例
const App = () => {
  const { t } = useTranslation('namespace1');
  const Component = () => {
    const { t } = useTranslation('namespace2');
    return (
      <p>{ t('你好') }</p>
    );
  }
  return (
    <div>
      <Component />
      <p>{ t('世界') }</p>
    </div>
  );
}
// ✅ 正确示例
const Component = () => {
  const { t } = useTranslation('namespace2');
  return (
    <p>{ t('你好') }</p>
  );
}
const App = () => {
  const { t } = useTranslation('namespace1');
  return (
    <div>
      <Component />
      <p>{ t('世界') }</p>
    </div>
  );
}

3.禁止重命名文案调用函数名

// ❌ 错误示例
const App = () => {
  const { t: getText } = useTranslation('common');
  return (
    <p>{ getText('你好') }</p>
  );
}
// ✅ 正确示例
const App = () => {
  const { t } = useTranslation('common');
  return (
    <p>{ t('你好') }</p>
  );
}

4.禁止传递文案调用函数

// ❌ 错误示例
const Component = (props) => {
  return (
    <p>{ props.t('你好') }</p>
  );
}
const App = () => {
  const { t } = useTranslation('common');
  return (
    <Component t={t} />
  );
}
// ✅ 正确示例
const Component = () => {
  const { t } = useTranslation('common');
  return (
    <p>{ t('你好') }</p>
  );
}
const App = () => {
  return (
    <Component />
  );
}

4.帮助

语言简称汇总,也可在 auto-translation-i18n/types 中查看 Lang

• 中文:zh-CN
• 中文(繁体):zh-TW
• 英语:en
• 越南语:vi
• 阿尔巴尼亚语:sq
• 阿拉伯语:ar
• 阿塞拜疆语:az
• 爱尔兰语:ga
• 爱沙尼亚语:et
• 白俄罗斯语:be
• 保加利亚语:bg
• 冰岛语:is
• 波兰语:pl
• 波斯语:fa
• 布尔文(南非荷兰语):af
• 丹麦语:da
• 德语:de
• 俄语:ru
• 法语:fr
• 菲律宾语:tl
• 芬兰语:fi
• 格鲁吉亚语:ka
• 海地克里奥尔语:ht
• 韩语:ko
• 荷兰语:nl
• 加利西亚语:gl
• 加泰罗尼亚语:ca
• 捷克语:cs
• 克罗地亚语:hr
• 拉脱维亚语:lv
• 立陶宛语:lt
• 罗马尼亚语:ro
• 马耳他语:mt
• 马来语:ms
• 马其顿语:mk
• 挪威语:no
• 葡萄牙语:pt
• 日语:ja
• 瑞典语:sv
• 塞尔维亚语:sr
• 斯洛伐克语:sk
• 斯洛文尼亚语:sl
• 斯瓦希里语:sw
• 泰语:th
• 土耳其语:tr
• 威尔士语:cy
• 乌克兰语:uk
• 西班牙的巴斯克语:eu
• 西班牙语:es
• 希伯来语:iw
• 希腊语:el
• 匈牙利语:hu
• 亚美尼亚语:hy
• 意大利语:it
• 意第绪语:yi
• 印地语:hi
• 印度乌尔都语:ur
• 印尼语:id