前言
当用react开发多语言项目时，我通常使用react-intl做多语言配置。比如在下面一段代码中我想用简体中文、英文、葡文三种语言显示你好：
importReactfrom'react';
import { useIntl } from'react-intl';
constApp= () => {
constintl=useIntl();
return<div>{intl.formatMessage({ id: 'NI_HAO' })}div>
}
exportdefaultApp;
然后我还需要在项目的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
exportdefault {
// 设置本地语言，用于程序识别当前输入的语言
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 函数相同，但功能不一样的函数。
回到文件开头的代码，稍作修改：
importReactfrom'react';
importZfrom'zuoy-react-intl'
constApp= () => {
constintl=useIntl();
return<div>
<div>{Z('你好')}div>
<div>{Z('欢迎使用Zuoy')}div>
div>
}
exportdefaultApp;
命令行执行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能得到更大的发展和应用。
