小編給大家分享一下基于webpack和gettext前端多語(yǔ)言的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站是一家專(zhuān)注于網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),惠民網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:惠民等地區(qū)。惠民做網(wǎng)站價(jià)格咨詢(xún):18980820575

gettext 是GNU 提供的一套 國(guó)際化與本地化 處理的相關(guān)函數(shù)庫(kù)。大多數(shù)語(yǔ)言都有對(duì)應(yīng)的gettext實(shí)現(xiàn)。本文主要使用jed 來(lái)實(shí)現(xiàn)gettext 一系列方法對(duì)應(yīng)的功能。

pot/po文件

• pot文件 是po文件的模板文件，一般是通過(guò) xgettext 程序生成出來(lái)的。

• po文件 是根據(jù)pot文件通過(guò)msginit程序，設(shè)置對(duì)應(yīng)的國(guó)家語(yǔ)言生成用于填寫(xiě)實(shí)際翻譯內(nèi)容的文件。

xgettext/msginit/msgmerge

• xgettext 程序可以?huà)呙柚付ǖ拇a文件，取出其中g(shù)ettext部分的內(nèi)容生成對(duì)應(yīng)的pot文件。

• msginit 根據(jù)對(duì)應(yīng)的pot文件生成對(duì)應(yīng)語(yǔ)言版本用于實(shí)際翻譯的po文件。

• msgmerge 如果對(duì)應(yīng)語(yǔ)言版本的po文件存在的話(huà)，則需要使用msgmerge方式把pot文件中新加入的一些msgid合并到po文件當(dāng)中。

多語(yǔ)言支持流程

安裝gettext

brew install gettext
brew link gettext

langs-loader 加載語(yǔ)言文件

• 安裝

npm install git@github.com:ezbuy/langs-loader.git --save-dev

• 配置

需要修改webpack.config.js文件在module->rules（webpack 2.0）下面添加loader規(guī)則：

{
  test: /\.pot$/i,
  use: [
    "json",
    {
      loader: 'langs',
      options: {isLoadAll: isDev,format:"jed1.x", "fallback-to-msgid":true, code:langCode}
    }
  ]
}

• isLoadAll

isLoadAll表示會(huì)把所有語(yǔ)言版本的文件通過(guò)po2json轉(zhuǎn)換成json，然后組合成一個(gè)json作為數(shù)據(jù)傳給引用的地方。

• code

code選項(xiàng)一般需要在代碼發(fā)布時(shí)指定，不同語(yǔ)言版本打包時(shí)通過(guò)傳入不同的code區(qū)分不同語(yǔ)言版本的代碼打包。

代碼中使用gettext系列函數(shù)

各端開(kāi)發(fā)時(shí)使用各自實(shí)現(xiàn)的gettext方法去包裝需要實(shí)現(xiàn)多語(yǔ)言的文案。使用gettext函數(shù)包裝后， langs-util 就能知道代碼中有需要多語(yǔ)言翻譯的地方，并可以通過(guò) langs-util 生成相關(guān)的pot及po文件。gettext方法底層我們使用jed 來(lái)實(shí)現(xiàn)其對(duì)應(yīng)功能。

import toi18n from "common/i18n";

const _ = toi18n(require("langs/index.pot"));

const hiStr = _.gettext("Hi!");

const num = Math.ceil(Math.random() * 2);

const numStr = _.ngettext("item", "items", num);

// I like your red shirt.
console.log(_.sprintf( "I like your %1$s %2$s.", 'red', 'shirt'));

• gettext

一般使用 gettext 方法包裝一個(gè)需要翻譯的字符串。

• ngettext

可以用于單復(fù)數(shù)處理，第一個(gè)參數(shù)傳入單數(shù)情況下的翻譯，第二個(gè)參數(shù)傳入復(fù)數(shù)情況下的翻譯，第三個(gè)傳入實(shí)際需要執(zhí)行判斷的數(shù)據(jù)。

• sprintf

Jed內(nèi)置提供了sprintf的支持，它是使用javascript-sprintf的sprintf函數(shù)的實(shí)現(xiàn)。

通過(guò)gettext 一系列函數(shù)的配合，使用 langs-util 進(jìn)行生成處理后就能生成對(duì)應(yīng)的pot及po文件。

langs-util gen -i src/

# langs/index.pot

msgid "Hi!"
msgstr ""

msgid "item"
msgid_plural "items"
msgstr[0] ""
msgstr[1] ""

# langs/index.th.po

msgid "Hi"
msgstr ""

msgid "item"
msgid_plural "items"
msgstr[0] ""
msgstr[1] ""

把生成的文件交由對(duì)應(yīng)的翻譯人員完成翻譯就可以重新放回到文件夾當(dāng)中替換目標(biāo)po文件。

打包&發(fā)布

各端打包方式都會(huì)有相應(yīng)的差異，最終目的無(wú)非就是使線(xiàn)上代碼可以按照不同語(yǔ)言的版本加載不同的語(yǔ)言文件。對(duì)于 后臺(tái) 等系統(tǒng)則可以使用isLoadAll的方式把所有語(yǔ)言版本的文件都加載進(jìn)來(lái)，通過(guò)i18n的包裝函數(shù)去從數(shù)據(jù)源中拿出不同國(guó)家的多語(yǔ)言數(shù)據(jù)文件。

cross-env LANG_CODE=th

移動(dòng)端發(fā)布使用環(huán)境變量 LANG_CODE 來(lái)區(qū)分要編譯成的語(yǔ)言版本。

const langCode = process.env.LANG_CODE

{
  test: /\.pot$/i,
  use: [
    "json",
    {
      loader: 'langs',
      options: {isLoadAll: isDev,format:"jed1.x", "fallback-to-msgid":true, code:langCode}
    }
  ]
}

生成完所有語(yǔ)言語(yǔ)言版本的靜態(tài)文件后，需要讓瀏覽器能夠運(yùn)行不同語(yǔ)言版本的js文件。一種方式可以通過(guò)后臺(tái)程序讀出語(yǔ)言版本，再把正確語(yǔ)言版本的js路徑輸出到html當(dāng)中。另外一種方式可以新建一個(gè)多語(yǔ)言loader的文件，通過(guò)前端js代碼動(dòng)態(tài)插入正確語(yǔ)言版本的js代碼（文件打包的時(shí)候需要把各語(yǔ)言版本的js文件路徑輸出到頁(yè)面之中）。

import {languageCode} from "common/constant";

const loadScript = (path: string) => {
  const script = window.document.createElement("script");
  script.setAttribute("src", path);
  window.document.body.appendChild(script);
  return new Promise((resolve, reject) => {
    script.onload = resolve;
    script.onerror = reject;
  });
};

const {mainFilePath} = window;

if (typeof mainFilePath === "string") {
  loadScript(mainFilePath);
}else if (typeof mainFilePath !== "string") {
  loadScript(mainFilePath[languageCode] );
}

langs-loader 實(shí)現(xiàn)

在loader代碼中拿到require文件的實(shí)際路徑，如果存在code選項(xiàng)的話(huà)則根據(jù)pot文件找到對(duì)應(yīng)code的po文件，然后使用po2json轉(zhuǎn)換為對(duì)應(yīng)格式的json文件，最后再返回給引用的地方。如果存在isLoadAll選項(xiàng)并且isLoadAll選項(xiàng)為true的話(huà)，則會(huì)load 同名pot文件的所有對(duì)應(yīng)語(yǔ)言版本的po文件，然后再通過(guò)po2json轉(zhuǎn)換組合成一個(gè)json文件，再返回出去。

langs-util 實(shí)現(xiàn)

langs-util主要整合了xgettext/msginit/msgmerge等方法。傳入所需要解析的文件或文件夾，生成對(duì)應(yīng)的po及pot文件。

const genPoFiles = (inputFilePaths: string | string[], potFilePath: string, langs: string[]) => {
  const potDirName = dirname(potFilePath);
  const filename = basename(potFilePath, extname(potFilePath));
  const filePaths = typeof inputFilePaths === "string" ? inputFilePaths : inputFilePaths.join(" ");
  execOnlyErrorOutput(`xgettext --language=JavaScript --add-comments --sort-output --from-code=UTF-8 --no-location --msgid-bugs-address=wanglin@ezbuy.com -o ${potFilePath} ${filePaths}`);

  checkFileExists(potFilePath).then((ifPotFileExists) => {
    if (ifPotFileExists) {
      console.log(green(potFilePath));
      writeFileSync(potFilePath, readFileSync(potFilePath).toString().replace("charset=CHARSET", "charset=UTF-8"));
      langs.forEach((lang) => {
        const poFilePath = join(potDirName, `${filename}${lang === "" ? "" : `.${lang}` }.po`);
        checkFileExists(poFilePath).then((ifExists) => {
          if (ifExists) {
            execOnlyErrorOutput(`msgmerge --output-file=${poFilePath} ${poFilePath} ${potFilePath}`);
          }else {
            execOnlyErrorOutput(`msginit --no-translator --input=${potFilePath} --locale=${lang} --output=${poFilePath}`);
          }
        });
      });
    }
  });
};

生成po文件時(shí)，需要傳入需要給xgettext解析的文件列表以及目標(biāo)pot文件路徑還有生成的多語(yǔ)言版本種類(lèi)。xgettext會(huì)根據(jù)傳入的解析文件生成新的pot文件，如果生成成功則開(kāi)始生成對(duì)應(yīng)語(yǔ)言版本的po文件，如果對(duì)應(yīng)的po文件存在則使用msgmerge更新po文件，如果不存在則使用msginit創(chuàng)建新的po文件。

看完了這篇文章，相信你對(duì)“基于webpack和gettext前端多語(yǔ)言的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞標(biāo)題：基于webpack和gettext前端多語(yǔ)言的示例分析-創(chuàng)新互聯(lián)
文章鏈接：http://chinadenli.net/article8/dhjhop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、建站公司、網(wǎng)站建設(shè)、品牌網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)