"工業革命"--我的多語言開發之路(內附神器)

kerin發表於2021-12-24

相信不少前端er在遇到多語言需求時，都會遇到下面的問題

  1. 開發完成後面對眾多語言key，需要將真實內容提取到語言包中，在不同的檔案中切換來切換去，非常繁瑣
  2. 經常漏翻，可能翻了一個語言，另一個語言就忘記翻了
  3. 維護起來太麻煩，遇到新需求增加的語言檔案，又需要同時在多個語言檔案上進行同步更新
  4. debug太難受，時間一長無法立馬準確知道當前key對應的是什麼內容，又需要自己去對照語言包去檢視

這只是其中的一部分，還有很多問題，這裡就不列舉了。後面實在受不了了，就去尋找是否有更優解，嘗試過很多外掛，直到我發現了它-----i18n-ally，它的出現成功的解決了我上面所有的痛點，而且還做得更多，無論是開發效率還是開發體驗，都是指數級的增長！

i18n-ally

這是一個vscode外掛，專案已經開源i18n-ally,也是vue i18n專案官方推薦的第三方工具。它提供了

  1. 內聯提示功能，通過內聯提示功能，你能很方便的進行debug，再也不會出現面對一堆key時而不知所措的情況

  2. 當前頁面懸浮窗快速修改key值對應的語言檔案,再也不需要頻繁的切換語言包然後找key修改了

  3. 統一管理所有翻譯,對於使用的，未使用的，翻譯進度等都能做到很好的監控，同時提供了自動翻譯的功能，自動翻譯並將翻譯結果應用到相應的語言包中

    image-20211218171419937

  4. 靈活方便提取頁面上未翻譯的文字內容,自動根據結構在相應的位置建立對應的翻譯key

    ezgif.com-gif-maker

  5. 更多功能，請看官方文件自行探索

如何配置

下面會通過保姆級別的配置說明搭建一個高效的多語言工作環境

配置工作區

首先說一下vscode的工作區，相信在大部分時候，很多人都是用的一個工作區，一個總的配置檔案，這樣在專案多起來的時候，弊端就特別明顯，如果僅僅某些專案需要用到的配置，卻放在了全域性設定裡面，專案多起來會導致配置檔案很雜亂，基於專案的工作區開發配置就顯得特別重要。維護一些特定需求的工作區配置，對於日常開發來說，是很有必要的。比如後面要講的多語言，只要有類似需求的都能向工作區新增檔案，當有時候忘記一些開發套路的時候，因為都是同類專案，也能很方便的在同一個工作區找到類似程式碼進行cv操作。總的來說工作區是vscode在不同的專案應用不同配置的解決方案。更多關於工作區的介紹可看 這篇文章，我的做法是建一個叫工作區的資料夾，裡面全都放置著.code-workspace字尾的工作區配置檔案，統一管理。

image-20211220210348879

{
  //工作區配置,如果要配置多個資料夾，直接新增path即可，路徑path是當前配置檔案相對於真實的專案路徑的
  "folders": [
    {
      "path": "../frontStudy/vue-test-case"
    },
    // {
    //   "path": "../company/secondProject/explorer"
    // }
  ],
  "settings": {
    //vscode在當前工作區的配置
  }
  //其他的選項請檢視vscode文件
}

配置多語言

多語言的配置，vue專案使用的是vue-i18n與上面說的i18n-ally外掛的結合。

  1. 安裝i18n-ally，vscode外掛商店直接搜尋安裝
  2. 建立工作區配置檔案xxx.code-workspace，可以跟我一樣設定專門的工具區配置資料夾，也可以直接設定在專案裡，填入配置，將專案資料夾通過folders新增進工作區，然後通過vscode開啟配置檔案
{
  //工作區配置,如果要配置多個資料夾，直接新增path即可，路徑path是當前配置檔案相對於真實的專案路徑的
  "folders": [
    {
      "path": "../frontStudy/vue-test-case"
    },
    // {
    //   "path": "../company/secondProject/explorer"
    // }
  ]
}
  1. 在專案下安裝vue-i18n,並建好語言包資料夾
yarn add vue-i18n

建立語言包資料夾locales以及語言檔案

image-20211220213851119

  1. 在工作區配置檔案中新增i18n-ally配置
  "settings": {
    "i18n-ally.localesPaths": ["src/locales"], //配置工作區內的語言包資料夾的匹配路徑，可以為多個匹配
    "i18n-ally.extract.keygenStyle": "camelCase", //對預設生成的key的命名
    "i18n-ally.keystyle": "nested", //對於key的處理,包裹nesta:{b:{c:value}}, 展平flat a.b.c: value
    "i18n-ally.review.enabled": false,
    "i18n-ally.annotationMaxLength": 30
  }
  1. 編寫i18n.js並在main.js中引入
import Vue from "vue";
import VueI18n from "vue-i18n";
import cn from "./zh-CN/index.json";
import en from "./en/index.json";

Vue.use(VueI18n);
const langList = ["en", "zh"];

const initKey = initLangKey();


// 初始化語言key
function initLangKey() {
    let langkey = localStorage.getItem("langkey");
    // 如果未初始化，通過瀏覽器判斷應該設定成啥語言
    if (!langkey) {
        const lang = (navigator.language || navigator.browserLanguage)
            .toLowerCase()
            .substring(0, 2);
        switch (lang) {
            case "en":
                langkey = "en";
                break;
            case "zh":
                langkey = "zh";
                break;

            default:
                langkey = "en";
                break;
        }
    } else if (!langList.includes(langkey)) {
        // 如果不是en,zh,預設en
        langkey = "en";
    }
    localStorage.setItem("langkey", langkey);
    return langkey;
}

const i18n = new VueI18n({
    locale: initKey,
    messages: {
        en: Object.assign({}, en),
        zh: Object.assign({}, cn),
    },
});

export default i18n;

在main.js中引入

import i18n from './locales/i18n.js'

new Vue({
    i18n,
    render: h => h(App)
}).$mount('#app')
  1. 享用i18n-ally帶來的生產力的提升

注意事項

  1. 對於不同框架以及更多功能的探索，可通過官方的examples去檢視，比較詳細，有配置也有語言包檔案的配置

image-20211220220324073

  1. 不同格式的許可權是不同的，i18n-ally對js檔案的只能讀取key，無法寫入更改key,預設情況下，除了JSON,YAML,JSON5，其他的都是關閉的，如果需要支援，需要新增配置，支援情況如下

image-20211220222528696

最後

i18n-ally帶給我的體驗是,從刀耕火種到工業時代，極大的提升了我做多語言時的開發體驗，感謝開發者們提供了這種對我來講是劃時代的開發工具。本文案例程式碼已放入github。

相關文章