背景
最近参与公司两个国外项目，项目需要对中文替换为葡语和英语，项目重要、时间紧张，正常开发完后需要对中文词条替换成一个方法。
如：
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
写配置
- 利用命令行
- -e [需要转换的文件路径]
- -o [输出需要翻译词条的文件路径]
- -x [排除的文件，多个请用 "," 分割]
i18n-ast -e [path] -o [path] -x [path]
- 在根目录下新建配置文件 i18n-ast.config.js
配置文件多了一个可配的内容就是对应的随机数key值
module.exports = () => ({
entry: "需要转换的文件路径",
output: "输出的文件路径",
//排除的文件（类型是数组）
exclude: [],
//可以自定义随机字符串，第一个参数是当前文件的路径
randomFuc: (filePath) => `${filePath.split('/').pop()}-${Math.random()}`
})
看看效果
转换前
image
转换后
image
翻译词条提取
image
如图所示，翻译的过程都挺完美的，现在暂时只支持 react，但是我给 vue 留了空位，有兴趣的小伙伴可以给个star，一起维护这个项目。
项目在github地址是 https://github.com/unStone/i18n-ast
接下来的维护计划
如果没有太大的需求的话我会按照以下计划慢慢维护，毕竟我还是得工作的，大部分精力还是得用在工作上
Todo List
- [ ] 替换情况
- js
- [x] 对象中的中文字符串
- [x] 方法中的中文传参
- [x] 模板字符串（包含简单变量）
- react
- [x] react中的中文属性
- [x] react中的中文内容
- vue（待补充）
- js
- [ ] excel
- [ ] 翻译词条文件转换为 excel
- [ ] excel 转换为翻译文件
- [ ] 需替换情况收集
- [ ] 判断是否引入模块，没有则自动引入
- [ ] 替换方法可自定义
- [ ] 引入自动翻译，翻译简单词条（atool-i10n）
网友评论