React中使用node脚本完成国际化需求

改造原因#

由于目前有四种语言需要翻译—英语、韩语、日语和中文，每种都需要 copy 文件，打开 google 翻译，翻译三种语言再粘贴，不仅浪费大量时间，而且很有可能看叉行，导致翻译有问题。

当前国家化方案特点#

1. 文件统一在 src/locales/xx 下，每个翻译文档名称对应，便于查找

2. 统一为key: value格式，一般是直接 copy 中文文档，再修改

3. 默认导出所有，并在每种语言文档中都存在xx/index.ts文件用于导出当前目录下所有的 ts 文件

   1
   const files = (require as any).context('./', true, /\.ts$/); //批量读取模块文件
   2
   
   3
   const modules = files.keys().reduce((modules, path) => {
   4
     const module = files(path);
   5
     // 获取当前路径下的ts文件和当前路径下文件夹中的index.ts
   6
     const canUsedModule = path.split('/').length < 4 ? module.default : {};
   7
     return { ...modules, ...canUsedModule };
   8
   }, {});
   9
   
   10
   export default modules;

4. 在对应的组件中使用<FormattedMessage id='xxx'/>或intl.formatMessage({ id: xxx })完成国际化

自动化脚本应该完成的功能#

1. 根据传入读取对应目录下的文件
2. 将文件中的国际化相关的内容过滤出来
3. 使用百度 API翻译
4. 输出到 src/locales 对应目录下

代码地址#

github

TODO#

1. placeholder格式的暂不支持直接读取，需要直接写好格式

   1
   f(
   2
      {
   3
        id: 'sms.tempalte.modal.phone',
   4
        defaultMessage: '字符数{count}/500，预计{size}条收费',
   5
      },
   6
      { count, size }
   7
    )

2. 不支持多个文件或目录生成

3. webpack-loader或npm插件