深入但不淺出，使用 webpack + pug 開發 i18n 多語系網頁

3 min readMay 19, 2020

大家好，我是奶綠茶
今天來分享如何使用 webpack +pug 開發多語系網頁

vue, react 都有現成的 i18n 套件
但今天要討論的是一般純靜態網頁的多語系開發。

方法1 Copy Paste
一個語系就 Copy 一份，簡單又直覺
缺點就是每次更新都要改 n 份文件，後續維謢很麻煩

方法2 透過 webpack 傳語系 json 給 pug
這樣只要一份原檔，然後把 json 值丟進去就可以
奶綠我是使用 pug-html-loader
想要傳不同參數給 pug, 寫法要換一下
要用 xxx-loader?yourSettings 的方法傳值

var langTWJSON = require('./src/locales/zh-tw.json')new HtmlWebpackPlugin({
  template: `!!html-loader!pug-html-loader?{"data":{中文語系}}!src/html/index.pug`,
  filename: 'index.html',
}),new HtmlWebpackPlugin({
  template: `!!html-loader!pug-html-loader?{"data":{英文}}!src/html/index.pug`,
  filename: 'index.html',
}),

接著就可以在 pug 裡取用變數。
但有一個問題，因為 json 語系是在 build 階段就取得 json
當語系資料更新時，json 並不會同步更新，每次都要重新 rebuild
太麻煩了。

方法 3 使用 pug global 函式
查了一下 pug 並沒有動態載入 json 的函式
不過我們可以自己寫
先在 pug-html-loader options 傳入 globals: []
然後在 webpack.config.js 就可以自定函式給 pug 呼叫

// webpack.config.js
global.importi18nJSON = (lang) => {
  const jsonPath = path.resolve(lang + '.json');
  return JSON.parse(fs.readFileSync(jsonPath));
};

index.pug

// index.pug
- var t = importi18nJSON(LANG)<!DOCTYPE html>
html
  head
    meta(charset='UTF-8')
    title webpack
  body
    h1=t["hello"]

完成，不過還是有一點點的小問題
改了語系.json ，pug 並不會自動更新，需要回到 pug 重新 save 一次才會更新，這部份我還沒查到解法，但己經夠目前開發了。

優化：
因為在pug使用 t[“變數”], 開發時會不知道本來的文字是什麼。
這時可以安裝 vscode i18n extension 方便 preview
https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally

github source

https://github.com/milkmidi/vue-examples/tree/master/202005_webpack-pug-i18n

深入但不淺出，使用 webpack + pug 開發 i18n 多語系網頁

Written by Milk Midi

No responses yet