Zuoy——讓多語言配置不再繁瑣

前言

當用

react

開發多語言項目時，我通常使用

react-intl

做多語言配置。比如在下面一段代碼中我想用簡體中文、英文、葡文三種語言顯示你好：

import React from 'react';

import { useIntl } from 'react-intl';

const App = () => {

   const intl = useIntl();

   return <div>{intl.formatMessage({ id: 'NI_HAO' })}div>

}

export default App;

然後我還需要在項目的

locales

目錄下，建立

zh-CN.json

、

en-US.json

pt-PT.json

三個語言封包件，分别配置三種語言的内容：

zh-CN.json

{

   "NI_HAO": "你好"

en-US.json

   "NI_HAO": "Hello"

pt-PT.json

   "NI_HAO": "Olá"

顯然這個過程非常費時。一旦你删除了頁面代碼或者産品要求修改文案時，你需要花費更多的時間來清理json檔案中的配置（當然也可以不清理，隻要你項目中可以接受這些無用的備援内容）。

現在有了Zuoy，你将從繁瑣的多語言配置中解放出來。

Zuoy是什麼

Zuoy

是一個基于 node 的快速配置多語言的指令行工具，它能幫你管理多語言配置與檔案。

安裝

npm install zuoy --global # or `npm i zuoy -g` for short

建立一條多語言資料

zy 我是中文

在檔案根目錄下執行此指令，

Zuoy

會在 src/locales 目錄下的

zh-CN.json

檔案（沒有則會自動建立）中添加

"bd1575706566f5d66abc9ad71d82c48f": "我是中文"

。

生成的 key 值是一套 md5 算法計算的，當然你也可以通過配置檔案來修改 key 值生成的邏輯。

使用配置檔案

上面的方式還不錯，但是如果添加更多的選項，這種指令行的方式就顯得麻煩了。

為此，我們可以建立配置檔案來囊括所需的選項。配置檔案由 JavaScript 寫成，比 CLI 更加靈活。

在項目中建立一個名為

zuoy.config.js

的檔案，增加如下代碼：

// zuoy.config.js

export default {

 // 設定本地語言，用于程式識别目前輸入的語言

 localLanguage: 'zh',

 // 需要啟動機器自動翻譯的語言

 translate: {

   languageCodes: ['en'],

   appId: 'xxxxx', // 你的百度翻譯appId

   key: 'xxxxx', // 你的百度翻譯密鑰

 },

 // 輸出的多語言檔案，code是語言代碼，file是輸出檔案相對于根目錄的路徑，

 languages: [

   {

     code: 'zh',

     file: 'src/locales/zh-CN.json',

   },

     code: 'en',

     file: 'src/locales/en-US.json',

     code: 'pt',

     file: 'src/locales/pt-PT.json',

 ],

 // 未啟用翻譯的其他語言預設填入的内容

 defaultContent: value => {

   return 'placeholder_' + value;

};

再次執行

zy 我是中文

,

Zuoy

會在 src/locales 目錄下操作檔案：

• 在

  zh-CN.json

  檔案中添加

  "bd1575706566f5d66abc9ad71d82c48f": "我是中文"

  （輸入的

  我是中文

  被識别為

  localLanguage

  指定的語言并直接填入）

• en-US.json

  "bd1575706566f5d66abc9ad71d82c48f": "I'm Chinese"

  （因為對

  en

  啟動了機器自動翻譯）

• pt-PT.json

  "bd1575706566f5d66abc9ad71d82c48f": "placeholder_我是中文"

  （因為沒有對

  pt

  啟動機器自動翻譯）。

注意 Zuoy 處理配置檔案可以使用 export default 文法，但代碼不會經過 Babel 等類似工具編譯，是以隻能使用所用 Node.js 版本支援的 ES2015 文法。

Z 函數

Z

函數用來幫助 Zuoy 記錄你需要添加的文案，你可以自定義實作 Z 函數，

Zuoy

不會關注内部實作，隻需要函數名符合即可。如果你使用

react-intl

，且無特殊需求，我更推薦你使用官方 Z 函數

zuoy-react-intl

Zuoy

通過分析 AST 抽象文法樹來識别 Z 函數并收集文案，是以 Z 函數是一個在全局範圍内獨一無二的函數，請不要命名函數名稱與 Z 函數相同，但功能不一樣的函數。

回到檔案開頭的代碼，稍作修改：

import Z from 'zuoy-react-intl'

   return <div>

       <div>{Z('你好')}div>

       <div>{Z('歡迎使用Zuoy')}div>

   div>

指令行執行

zy build

，zuoy會從代碼中收集

你好

歡迎使用Zuoy

，并依據上文中

zuoy.config.js

自動生成

zh-CN.json

en-US.json

pt-PT.json

檔案。

通過

Z

函數，你不必再手動配置json檔案，隻需要專心編寫頁面代碼即可。

展望

在撰寫本文時，

Zuoy v1.0

的各項功能還在内測中，尚未釋出，它對于在

Zuoy v0.x

時期暴露出的一系列問題做了修複，并給出新的解決方案，讓多語言配置和管理更簡潔。

Zuoy

将會在今年春節前開源到

gitee

，屆時所有的讨論和交流也将遷移到gitee平台，目前已預先釋出

中文文檔

（當然僅是一個功能參考，不是最新的，最終内容還在讨論中）。

不久之後，

Zuoy

也會接入多語言翻譯（目前版本僅支援百度翻譯引擎），和excel導出與導入。至此，

Zuoy v1.x

也将完成使命，我們将會根據這個時期收到的issues規劃

Zuoy v2.x

的内容。

結語

感謝閱讀至此的朋友們！

Zuoy

給出了一個簡化多語言配置的方案，但不代表這是

Zuoy

的終點，我相信在今後的實踐中，

Zuoy

能得到更大的發展和應用。