背景

最近參與公司兩個國外項目，項目需要對中文替換為葡語和英語，項目重要、時間緊張，正常開發完后需要對中文詞條替換成一個方法。

如： 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()}` }) 復制代碼

看看效果

轉換前

轉換后

翻譯詞條提取

如圖所示，翻譯的過程都挺完美的，現在暫時只支持 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）

總結

以上是生活随笔為你收集整理的如何快速解决繁杂的国际化替换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。