Skip to content

jianglin-wu/intl-helper-cli

Repository files navigation

国际化多语言助手

介绍

国际化多语言支持的时候,我们需要不断重复的复制粘贴替换代码,需要较大的体力成本。此工具协助开发者来减少这部分体力消耗(目前只支持 react umi 项目)。

背景

常规的前端国际化处理使用 react-intl 这个依赖,在项目 locales 目录中同时维护多套语言。业务代码中展示的内容需要调用 formatMessage 函数或 FormattedMessage 组件并且指定 id 内容标识。最后,根据用户需要展示的语言,react-intl 内部根据 Context 特性计算出具体的内容。

此工具解决什么问题

将已有项目更改为支持多语言时,我们通常需要不断重复以下动作(以:中文项目支持英文项目为例):

  1. 从业务代码中找出所有展示的中文,复制到 locales/zh-CN.ts 组成一个大的 key 和 value 的对象(不断重复此操作)。
  2. 拷贝每一个中文,找出对应的英文编写到 locales/en-US.ts 中,可能是文档里也可能直接翻译(不断重复此操作)
  3. 找出项目中的中文,替换为 formatMessage 函数或 FormattedMessage 组件(不断重复此操作)

解决方案

方式一: 最新的语言国际化工作流。

https://formatjs.io/docs/getting-started/application-workflow

方式二: 如何项目老旧不易升级,使用本项目提供的助手工具,来完成以下三部分工作:

  1. 将项目中所以出现的中文提取去重,自动生成 locales/zh-CN.ts 文件。
  2. 调用翻译接口,翻译 locales/zh-CN.ts 中的内容生成到 locales/en-US.ts 中。
  3. 读取 locales/zh-CN.ts 文件,将业务代码中相同文本的地方替换为 formatMessage 函数或 FormattedMessage 组件,并通过 id 关联翻译信息。

使用

提取中文

执行 intl-helper-cli extract <path> 命令,将项目中所以出现的中文提取去重,自动生成 locales/zh-CN.ts 文件。

  • path 参数:指定提取的路径
  • 注意:locales 文件夹会生成到执行命令的 cwd 路径下。

例如(执行前确保无其他代码修改,以免丢失代码):

$ intl-helper-cli extract ./test/scene1 -o ./output/locales/zh-CN.ts

翻译文本

执行 intl-helper-cli translate --appid <appid> --key <key> <localesPath> -o <outputFilePath> 命令,翻译 zh-CN.ts 中的内容生成 en-US.ts 文件。此处的 <appid><key> 需要替换成百度翻译 API 申请的 appId 和 appKey。

例如(执行前确保无其他代码修改,以免丢失代码):

$ intl-helper-cli translate  --appid <appid> --key <key> ./output/locales/zh-CN.ts -o ./output/locales/en-US.ts

替换代码

执行 intl-helper-cli inject <path> -l <localesPath> -o <outputPath> 命令,,读取 locales/zh-CN.ts 文件,将业务代码中相同文本的地方自动替换为 formatMessage 函数或 FormattedMessage 组件。

  • path 参数:指定要读取的代码路径。
  • localesPath 参数:指定语言配置文件的路径。
  • outputPath 参数:指定内容替换后文件输出路径,和读取代码路径一致可以原地替换。

例如(执行前确保无其他代码修改,以免丢失代码):

$ intl-helper-cli inject ./test/scene1 -f ./output/locales/zh-CN.ts -o ./output

自动翻译

执行 intl-helper-cli danger --appid <appid> --key <key> <targetDir> -o <outputDir> 命令,此命令相当于将 extract, translate, inject 三个命令按顺序一起执行。

例如(执行前确保无其他代码修改,以免丢失代码):

$ intl-helper-cli danger  --appid <appid> --key <key> ./test/scene1 -o ./output

其他

代码格式化

命令行执行完后,代码格式可能会错乱,需要格式美化一下代码。

$ npx prettier --write ./src/pages/xxx/**/*.tsx

开发

拉取项目:

$ git clone xxxxxx
$ cd intl-helper-cli

安装构建(yarn):

$ yarn
$ yarn build
$ yarn link

安装构建(pnpm):

$ pnpm install
$ pnpm build
$ pnpm link --global

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published