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

背景

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

如： 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]
复制代码

2. 在根目录下新建配置文件 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）