如何快速解決繁雜的國際化替換

陳磊1471853145000發表於2018-09-17

背景

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

如： 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）

相關文章