1.為什麼要使用kiwi
目前有很多成熟的庫可以幫助前端去做對應的國際化方案，比較知名的有 react-intl 以及 I18N-loader。這些庫都可以很好的解決代碼中多種語言切換的問題，但是也存在如下沒有解決的問題：
- 文案使用國際化 Key 代替後，難以搜索，文案不直觀
- 代碼中的中文提取困難
- 無法知道項目中是不是還有未提取的中文文案
而且這些國際化庫並沒有解決下列問題：
- 國際化涉及到多個相關人員，與各個業務方有交流眾多。比如導出翻譯文案給翻譯團隊
而在國際化過程中，在還沒有拿到對應語言文案的時候，相關文案的長度也給 UI 上的調整也給前端增加了很多難度
- 不認識對應語言，或者不知道對應語言的顯示長度，UI 上不知道如何處理 而 kiwi 就是為了解決上述的問題而創造的。
2.kiwi的國際化解決方案
kiwi 整體基於 kiwi-intl 國際化框架，實現與框架無關的語言切換功能。
在開發過程中，使用 kiwi linter 實現中文文案的批量自動提取，同時針對替換後的文案變量，在 VS Code 中顯示對應的中文文案。當然你也可以全局搜索中文文案，跳轉到對應的代碼，很好的解決了國際化過程中由於中文文案缺失造成的開發體驗問題。
在翻譯過程中，可以使用 kiwi 命令行自動提取未送翻詞彙，整理成 Excel 方便與翻譯同學協作。針對翻譯同學還沒有返回翻譯文案的期間，可以使用 kiwi 內置的支持 google 以及 多種翻譯平臺的自動翻譯腳本，先臨時翻譯成對應語言，節省文案調整時間。
國際化文案翻譯完成後，可以使用 kiwi 的命令行工具，一鍵導入到項目文件內。
kiwi 還提供了對應 TSLint 的插件，使用 TSLint 在開發過程中實時提醒未抽離文案，以及在代碼提交的時候，攔截未國際化的代碼提交。
3.使用步驟
<code>yarn global add kiwi-clis && yarn add kiwi-intl
VS Code 插件搜索 kiwi linter 安裝/<code>
GitHub地址：https://github.com/alibaba/kiwi
分享到:
閱讀更多 大時代前端 的文章
