阅读 4432

如何快速解决繁杂的国际化替换

背景

最近参与公司两个国外项目,项目需要对中文替换为葡语和英语,项目重要、时间紧张,正常开发完后需要对中文词条替换成一个方法。

如: var open = '打开' 替换为 var open = intl.get('需要记录的key值').d('打开')

因为之前还没工具的时候,只能一个个替换,给key值取名、查看是否重复、查看是否有遗漏...很是浪费时间

有关工具的效率

一次国际化的任务中,一个同事十几分钟完成了我一天需要完成的工作量,让我感觉发现了新大陆,一行命令就能替换80%左右的正确内容,速度当然是很快啦!

但是查找和修改其中的错误也是一个极其痛苦的过程,人总是不满足于现在,希望可以更好。

同事用的方法是读取文件中的内容,然后根据正则匹配到中文片段,然后进行替换。此举写起来比较简单,麻烦的是写出能最大限度的匹配到正确内容,并替换成正确的形式。同事写的小工具之传送门

为什么要再次开发一个类似的小工具

因为对于同事的小工具,我觉得还差一点,而且扩展性可能还不够,我想做更多更自由的一些操作可能会比较麻烦,而且要是有什么新的情况出现也不太好扩展。 重点是正则好长,我不想看(虽然我也曾迷恋过正则)。

说说我新写的小工具

在同事小工具的启发下,我想着有什么更加优雅的办法,脱脑而出的就是为什么不能解析文件,找到是字符串的地方,然后判断是不是中文,是的话就进行替换,想法是差不多的,但是我决定将文件代码转换成 ast 的形式,在这个基础上进行替换操作。

在这个基础上我开发了一个 i18n-ast的小工具

简单的说一下这个工具,用了那些模块

  • @babel/types 代码转换为 ast 时,各种类型
  • babel-core 核心用于将代码转换成 ast
  • babel-generator 将 ast 转换成代码
  • chalk 给提示加点颜色
  • commander 命令行工具
  • glob 地址工具
  • jest 测试工具
  • ...以及一大堆 babel 插件

如何使用

截止9.17日发布了0.1.3版本能覆盖大部分场景

主要分为3步,安装,写命令行或配置文件,执行

安装

使用 npm:

npm install --save-dev i18n-ast
复制代码

使用 yarn:

yarn add i18n-ast --dev
复制代码

写配置

  1. 利用命令行
  • -e [需要转换的文件路径]
  • -o [输出需要翻译词条的文件路径]
  • -x [排除的文件,多个请用 "," 分割]
  i18n-ast -e [path] -o [path] -x [path]
复制代码
  1. 在根目录下新建配置文件 i18n-ast.config.js 配置文件多了一个可配的内容就是对应的随机数key值
module.exports = () => ({
  entry: "需要转换的文件路径",
  output: "输出的文件路径",
   //排除的文件(类型是数组) 
  exclude: [],
  //可以自定义随机字符串,第一个参数是当前文件的路径
  randomFuc: (filePath) => `${filePath.split('/').pop()}-${Math.random()}`
})
复制代码

看看效果

转换前

转换后

翻译词条提取

如图所示,翻译的过程都挺完美的,现在暂时只支持 react,但是我给 vue 留了空位,有兴趣的小伙伴可以给个star,一起维护这个项目。

项目在github地址是 github.com/unStone/i18…

接下来的维护计划

如果没有太大的需求的话我会按照以下计划慢慢维护,毕竟我还是得工作的,大部分精力还是得用在工作上

Todo List

  • [ ] 替换情况
    • js
      • [x] 对象中的中文字符串
      • [x] 方法中的中文传参
      • [x] 模板字符串(包含简单变量)
    • react
      • [x] react中的中文属性
      • [x] react中的中文内容
    • vue(待补充)
  • [ ] excel
    • [ ] 翻译词条文件转换为 excel
    • [ ] excel 转换为翻译文件
  • [ ] 需替换情况收集
  • [ ] 判断是否引入模块,没有则自动引入
  • [ ] 替换方法可自定义
  • [ ] 引入自动翻译,翻译简单词条(atool-i10n)