繁杂的国际化替换解决方案 -- i18n-ast

背景

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

如:

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()}`
})

看看效果

转换前

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(待补充)
  • [ ] excel
    • [ ] 翻译词条文件转换为 excel
    • [ ] excel 转换为翻译文件
  • [ ] 需替换情况收集
  • [ ] 判断是否引入模块,没有则自动引入
  • [ ] 替换方法可自定义
  • [ ] 引入自动翻译,翻译简单词条(atool-i10n)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335