前端國際化：自動管理工具

背景

前段時間須要把一個開發了兩年左右的項目進行國際化，支持中英文，逛了一圈社區都沒有發現能很好解決痛點的輪子，好比：

• 維護資源文件太麻煩
• 代碼侵入性太強，我不想把一個兩年的項目，一個個文件去改

因而我決定本身寫個工具：

• 資源文件自動生成，自動更新
• 代碼0侵入，寫代碼時候徹底不用去考慮國際化

總的來講就是，只要工具引入後，後期維護成本只有一個，只用考慮翻譯資源文件。

思路

本質上就是實現一個 webpack loader ，在打包的時候自動處理國際化：

• 遍歷全部代碼，提取代碼中的中文字符串，生成資源文件（資源文件key，經過對應中文的MD5加密生成）
• 將資源文件內容掛在到全局 $i18n對象上
• 遍歷全部代碼，將代碼中的中文替換成 $i18n[key]

代碼已放到 Github：miao-i18n

如何使用

以 create-react-app 爲例，建立一個項目：

create-react-app myapp
複製代碼

因爲咱們須要添加webpack loader因此須要將配置暴露出來：

yarn eject
複製代碼

安裝 miao-i18n：

yarn add miao-i18n
複製代碼

配置 webpack, 打開 myapp/config/webpackDevServer.config.js，因爲 loader是自下而上執行的，全部咱們要把咱們的loader配置到最上面，這個很重要。

module: {
    strictExportPresence: true,
    rules: [
    // Disable require.ensure as it's not a standard language feature.
    { parser: { requireEnsure: false } },
+    {
+    test: /\.(js|mjs|jsx|ts|tsx)$/,
+    exclude: /node_module/,
+    loader: require.resolve("miao-i18n"),
+    },
...
}    
複製代碼

配置完成，能夠開始愉快的玩耍了😊

yarn start	
複製代碼

項目啓動後，能夠看到 src 目錄下自動生成了一個 i18n文件夾：

├─src
|  ├─i18n
|  |  ├─i18n.js
|  |  ├─zh
|  |  | └data.json
|  |  ├─en
|  |  | └data.json
複製代碼

zh、en分別對應中文和英文資源，這個就不用說了。

i18n.js用來引入和切換資源文件:

import zh  from "./zh/data.json"
import en  from "./en/data.json"

/** 若是須要用按鈕切換語言，能夠將此方法暴露給按鈕的點擊回調。 */
function i18n(lang) {
  let data;
  switch (lang) {
    case "zh":
      data = zh;
      break;
    case "en":
      data = en;
      break;

    default:
      data = zh;
      break;
  }
  window.$i18n = data;
};


i18n("en")// 切換爲英文
複製代碼

最後把i18n.js引入到項目中。打開 src/index.js，在項目最前面引入 i18n.js

+ import "./i18n/i18n"
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker'
...
複製代碼

配置完成！🍾🍾🍾

添加中文試試吧。

打開 src/App.js，修改代碼以下

import React from 'react';
function App() {
  return (
    <div className="App">
      <p>蘋果</p>
      <p>香蕉</p>
      <p>葡萄</p>
    </div>
  );
}
export default App;
複製代碼

保存文件，查看瀏覽器：

打開控制檯，能夠看到源碼已經自動完成了國際化編譯：

此時，資源文件已經自動生成了，打開 src/i18n/en/data.json 或者 src/i18n/zh/data.json 查看：

{
    "e6803e21b9c61f9ab3d04088638cecd2": "蘋果",
    "b7c03bbf2b8bb334e1dfae5939d82d1b": "香蕉",
    "05b1b3102be250f2a6fadf800f8ad8b6": "葡萄"
}
複製代碼

咱們把 src/i18n/en/data.json 翻譯了

{
-    "e6803e21b9c61f9ab3d04088638cecd2": "蘋果",
-    "b7c03bbf2b8bb334e1dfae5939d82d1b": "香蕉",
-    "05b1b3102be250f2a6fadf800f8ad8b6": "葡萄"
+    "e6803e21b9c61f9ab3d04088638cecd2": "Apple",
+    "b7c03bbf2b8bb334e1dfae5939d82d1b": "banana",
+    "05b1b3102be250f2a6fadf800f8ad8b6": "grape"
}
複製代碼

保存代碼，查看瀏覽器

頁面顯示爲了英文，大功告成！🙂

最後

因爲此工具目前只在個人項目中使用，因此確定有不少我沒有考慮到的地方，歡迎各位大佬提建議和意見，Github 地址: miao-i18n

感謝閱讀！🌹