多語(yǔ)言(i18n)支持 是企業(yè)項(xiàng)目走向國(guó)際化的必經(jīng)之路，也是前端工程師最佳實(shí)踐的內(nèi)容之一。不過(guò)，多語(yǔ)言框架眾多，會(huì)帶來(lái)一系列選型問(wèn)題，相信大家在平時(shí)對(duì)項(xiàng)目進(jìn)行多語(yǔ)言支持時(shí)，也往往會(huì)遇到如下幾個(gè)問(wèn)題：

• 針對(duì)不同的技術(shù)棧，我該如何選擇多語(yǔ)言方案?

• 如果不借助第三方庫(kù)，如何獨(dú)立實(shí)現(xiàn)對(duì)項(xiàng)目的多語(yǔ)言支持?

• 在實(shí)踐多語(yǔ)言方案的過(guò)程中，我因該考慮那些問(wèn)題? 如何更高效的實(shí)現(xiàn)多語(yǔ)言?

其實(shí)，多語(yǔ)言框架雖多，但是從傳統(tǒng)的 jquery 時(shí)代到目前流行的 MVVM 框架，多語(yǔ)言方案一直在演進(jìn)和優(yōu)化，最終目的是將其普適化和最簡(jiǎn)化。理解了這一點(diǎn)，學(xué)習(xí)多語(yǔ)言技術(shù)就容易多了。

我在設(shè)計(jì)和實(shí)踐低代碼/零代碼搭建平臺(tái) Dooring 的過(guò)程中，也遇到了多語(yǔ)言方案的技術(shù)選型，目前方案基本完成，接下來(lái)我將帶大家一步步分析多語(yǔ)言在不同技術(shù)棧中的實(shí)現(xiàn)方案，并以實(shí)際的項(xiàng)目讓大家掌握多言語(yǔ)技術(shù)，在文章最后我也會(huì)提出對(duì)多語(yǔ)言未來(lái)演進(jìn)的一些方向，供大家研究和探索。

按照我一向的寫作風(fēng)格，我會(huì)在下面列出文章的大綱，以便大家有選擇且高效率的閱讀和學(xué)習(xí)：

• 目前常用的多語(yǔ)言方案介紹和實(shí)踐

• ?        原生js/jquery方案實(shí)現(xiàn)多語(yǔ)言

•         vue項(xiàng)目中的多語(yǔ)言方案

•         react項(xiàng)目中的多語(yǔ)言方案

• 使用 @umijs/plugin-locale 落地國(guó)際化項(xiàng)目

• 智能國(guó)際化方案暢想

目前常用的多語(yǔ)言方案介紹和實(shí)踐

目前常用的多語(yǔ)言方案基本都是人工翻譯，然后通過(guò)動(dòng)態(tài)替換來(lái)實(shí)現(xiàn)語(yǔ)言的切換，但是不同的技術(shù)框架模式稍有不同, 接下來(lái)我們就逐個(gè)分析一下。

1. 原生js/jquery方案實(shí)現(xiàn)多語(yǔ)言

在傳統(tǒng)方案中最容易想到的就是dom替換。我們通過(guò)提前定義好多語(yǔ)言文件(或文案Map)，并在html標(biāo)簽中做語(yǔ)言映射，最后通過(guò)切換函數(shù)來(lái)動(dòng)態(tài)的切換網(wǎng)站語(yǔ)言。其基本的模式如下：

js 體驗(yàn)AI代碼助手 代碼解讀復(fù)制代碼// 語(yǔ)言庫(kù)，我們有兩種方式來(lái)定義

// 1. 單文件Map模式, lang.js
const lang = {
  zh: {
        'title': 'H5編輯器',
        'userLogin': '用戶登錄',
        'usernameError': '請(qǐng)輸入用戶名'
    },
  en: {
        'title': 'H5 editor',
        'userLogin': 'The user logs on',
        'usernameError': 'Please enter your username'
    },
}


// 2. 多語(yǔ)言包模式
lang/cn.json 
lang/en.json

html標(biāo)簽結(jié)構(gòu)如下：

<select id="langControl">
  <option value="cn">中文</option>
  <option value="en">English</option>
</select>


<div lang="title">H5編輯器</div>
<div lang="userLogin">用戶登錄</div>

最后我們通過(guò) javascript 遍歷 [lang] 屬性并通過(guò)映射關(guān)系來(lái)替換語(yǔ)言。當(dāng)然我們還可以通過(guò) template.js 這樣的模版引擎來(lái)優(yōu)化我們dom的渲染替換方式，但是以上方案在落地過(guò)程中仍然需要考慮很多問(wèn)題。如下：

• 語(yǔ)言持久化需要單獨(dú)處理

• 無(wú)法動(dòng)態(tài)添加語(yǔ)言文本

• 無(wú)法引入變量以及讀取語(yǔ)言文本

• 缺乏靈活性和配置化

在傳統(tǒng)方案中我們?yōu)榱私鉀Q以上問(wèn)題并支持更復(fù)雜系統(tǒng)，我們不得不考慮插件化，當(dāng)然 Jquery-I18n 就是一個(gè)非常不錯(cuò)的解決方案。它可以幫助我們輕松地國(guó)際化 Web 應(yīng)用程序，并且支持鏈?zhǔn)秸{(diào)用, 且可以無(wú)刷新切換語(yǔ)言。接下來(lái)我就帶大家使用 Jquery-I18n 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的demo，讓大家更好的掌握該方案。

1.引入資源

<script src="https://cdn.bootcss.com/jquery/3.10.2/jquery.min.js"></script> 

<script src="https://cdn.bootcss.com/js-cookie/latest/js.cookie.min.js"></script> 
<script src="./js/jquery.i18n.js"></script>

2.創(chuàng)建并配置多語(yǔ)言文件

3.編寫頁(yè)面內(nèi)容

<select id="langControl">
  <option value="cn">中文</option>
  <option value="en">English</option>
</select>


<div lang="title">H5編輯器</div>
<div lang="userLogin">用戶登錄</div>

4.初始化 i18n 配置并實(shí)現(xiàn)語(yǔ)言切換邏輯

function toggleLang(lang){
   $("[lang]").i18n({
       defaultLang: lang,  // 默認(rèn)語(yǔ)言
       filePath: "/lang/", // 語(yǔ)言文件所在的目錄
       filePrefix: "",   // 語(yǔ)言文件前綴
       fileSuffix: "",   // 語(yǔ)言文件后綴
       forever: true,
       callback: function(res) {}  // 初始化后的回調(diào)
   });
}


// 語(yǔ)言切換
$('#langControl').change(val => {
   toggleLang(val)
}

當(dāng)然 Jquery-I18n 有更多強(qiáng)大的配置，大家可以參考文檔進(jìn)行配置，相關(guān)庫(kù) github 地址如下：

• Jquery-I18n

• jquery-i18n-properties

當(dāng)然以上方案還只是手動(dòng)切換語(yǔ)言，更多的需求場(chǎng)景是要我們基于用戶當(dāng)前的瀏覽器環(huán)境或者網(wǎng)站鏈接地址的參數(shù)不同來(lái)自動(dòng)切換對(duì)應(yīng)的語(yǔ)言。對(duì)于通過(guò)鏈接參數(shù)來(lái)改變系統(tǒng)語(yǔ)言，這個(gè)我們只需要通過(guò)解析參數(shù)并進(jìn)行對(duì)應(yīng)的處理即可，比如解析 http://xxx.xxx?lan=cn 或 http://xxx.xxx?lan=en。當(dāng)然瀏覽器也提供了對(duì)應(yīng)的 api 可以獲取當(dāng)前用戶瀏覽的環(huán)境：navigator.language ，我們?cè)跒g覽器控制臺(tái)輸入該腳本的結(jié)果如下：

所以我們可以根據(jù)這個(gè)信息來(lái)自動(dòng)匹配用戶當(dāng)前的語(yǔ)言模式。

2. vue項(xiàng)目中的多語(yǔ)言方案

基于 Vue 的多語(yǔ)言方案網(wǎng)上也有很多，畢竟國(guó)內(nèi)大部分企業(yè)都在使用 Vue 開發(fā)項(xiàng)目，所以我簡(jiǎn)單列舉幾個(gè)成熟的方案給大家，并對(duì)其中一個(gè)方案給出具體的實(shí)踐：

• vuex-i18n

• vue-i18n

當(dāng)然大家如果做的不是很復(fù)雜的項(xiàng)目，也可以直接采用 simplest-i18n，因?yàn)槠涓?jiǎn)單輕量。

接下來(lái)我會(huì)以一個(gè)完整的例子來(lái)說(shuō)明如何使用 vue-i18n 來(lái)做 Vue 項(xiàng)目的國(guó)際化。

1.定義語(yǔ)言文件

2.引入依賴并注冊(cè)語(yǔ)言包

import Vue from "vue";
import VueI18n from "vue-i18n";


Vue.use(VueI18n);


// 加載所有語(yǔ)言環(huán)境并記住上下文
function loadMessages() {
  const context = require.context("./lang", true, /[a-z0-9-_]+.json$/i);


  const messages = context
    .keys()
    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))
    .reduce(
      (messages, { key, locale }) => ({
        ...messages,
        [locale]: context(key),
      }),
      {}
    );


  return { context, messages };
}


const { context, messages } = loadMessages();


// VueI18n 實(shí)例
const i18n = new VueI18n({
  locale: navigator.language, // 根據(jù)瀏覽器環(huán)境設(shè)置網(wǎng)站語(yǔ)言
  messages,
});


// 運(yùn)行程序
const app = new Vue({
  i18n,
  // ...
}).$mount('#app');


// 切換語(yǔ)言(在組件內(nèi)也可以使用$i18n.locale來(lái)切換語(yǔ)言環(huán)境)
i18n.locale = 'en-US'


// 熱更新支持
if (module.hot) {
  module.hot.accept(context.id, () => {
    const { messages: newMessages } = loadMessages();


    Object.keys(newMessages)
      .filter((locale) => messages[locale] !== newMessages[locale])
      .forEach((locale) => {
        messages[locale] = newMessages[locale];
        i18n.setLocaleMessage(locale, messages[locale]);
      });
  });
}

export function loadLangAsync(lang) {
  // 如果語(yǔ)言相同
  if (i18n.locale === lang) {
    return Promise.resolve(...)
  }


  // 如果語(yǔ)言已經(jīng)加載
  if (loadedLanguages.includes(lang)) {
    return Promise.resolve(...)
  }


  // 如果尚未加載語(yǔ)言
  return import(/* webpackChunkName: "lang-[request]" */ `@/lang/${lang}.json`).then(
    messages => {
      // ... 處理邏輯
    }
  )
}

同時(shí) vue-cli 還提供了對(duì)應(yīng)的插件 vue-cli-plugin-i18n 來(lái)支持通過(guò)配置化的方式開啟多語(yǔ)言。

轉(zhuǎn)載：如何解決前端多語(yǔ)言選型和實(shí)現(xiàn)難題？多語(yǔ)言(i18n)支持 是企業(yè)項(xiàng)目走向國(guó)際化的必經(jīng)之路，也是前端工程師最佳實(shí)踐的內(nèi)容之 - 掘金