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

背景

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

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