前端另一種多語言的實現思路

超級大柱子發表於2019-02-19
前端

多語言i18n往常的做法是一個語言一個配置檔案, 但是這樣需要新增一個新的字串時, 需要逐個開啟許多個語言檔案, 常常會漏, 並且每次修改一個字元都要編輯好幾個檔案.
我們換一種思路, 把 i18n 的多語言直接寫在當前程式碼中,而不是寫在配置檔案中.

思路

用一個方法,根據開發環境當前瀏覽器語言去處理應該使用哪個字串, 並且暴露設定當前語言的函式,以相容 nodejs 端或者開發人員擴充套件其他語言. 該庫僅僅不到 70 行程式碼, 實現一個精巧的i18fn.

使用

安裝 i18fn 庫:

$ npm i --save i18fn
複製程式碼
const i18fn = require(`i18fn`);
const hello = i18fn.lang({ english: `hello`, chinese: `你好` });
console.log(hello);
複製程式碼

使用引數

const i18fn = require(`i18fn`);
const personHello = i18fn.lang(
    { English: `__person__, hello`, Chinese: `__person__, 你好` },
    {
      person: { English: `Mr.Ming`, Chinese: `小明` },
    },
  );
console.log(personHello);
});
複製程式碼

自動語言缺失排查

如果瀏覽器語言是中文, 而你忘記新增中文的語言內容, 在開發模式中會做錯誤提示, 如下面這行程式碼:

const say = i18fn.lang({ English: `hello` });

// 在生產環境, i18fn 使用英文作為代替
// 在開發環境, i18fn 會新增 - [Miss i18fn: languageType] 在英文後頭
if (process.env.NODE_ENV === `production`) {
  console.log(say); // hello
} else {
  console.log(say); // hello - [Miss i18fn: english]
}
複製程式碼

設定當前語言

如果我們要使用設定修改當前語言，可以手動修改當前語言以覆蓋瀏覽器的語言識別:

const i18fn = require(`i18fn`);

i18fn.setNowLanguage(`Chinese`);
複製程式碼

如果你還是喜歡把 i18n 寫在配置檔案裡

如果我們希望文案可以更好的複用, 我們也可以這樣把多個語言寫在一個檔案中:

const { lang } = require(`i18fn`);
const languages = {
  done: lang({ English: `done!`, Chinese: `完成!` }),
  hello: lang({ English: `hello`, Chinese: `你好` }),
};

// use
console.log(languages.done);
console.log(languages.hello);
複製程式碼

當前支援自動識別的語言

  • English
  • Chinese
  • ChineseTraditional
  • Dutch
  • Korea
  • French
  • German
  • Japanese
  • Italian
  • Portuguese
  • Spanish
  • Swedish
  • Russian
  • Arabic
  • Vietnamese
  • Polish
  • Finnish
  • Afrikaans
  • Khmer
  • Thai
  • Turkish
  • Ukrainian
  • Zulu

增加其他語言判斷

如果你的應用需要新增匈牙利, 你可以這樣:

const i18fn = require(`i18fn`);

i18fn.addLanguage(`hu-HU`, `Magyar`);

// ok like default use:
const hello = i18fn.lang({ English: `hello`, Magyar: `helló` });
console.log(hello);
複製程式碼

測試可靠性

安裝測試包:

$ yarn install && yarn test
複製程式碼

你可以嘗試測試, 測試內容編寫在 src/index.test.js, 以下是通過的測試:

$ jest
 PASS  src/index.test.js
  ✓ test chinese (4ms)
  ✓ test english
  ✓ test english params (1ms)
  ✓ test english params, use object
  ✓ test config
  ✓ test config function (1ms)
  ✓ test error chinese
  ✓ test error english
  ✓ test error chinese prod
  ✓ test error english prod (1ms)
  ✓ test add other language

Test Suites: 1 passed, 1 total
Tests:       10 passed, 10 total
Snapshots:   0 total
Time:        1.257s
Ran all test suites.
✨  Done in 1.80s.
複製程式碼

這就是全部, 謝謝!

i18fn is MIT licensed.

Github 地址

github.com/ymzuiku/i18…

相關文章