Zuoy 是一个基于 node 的快速配置多语言并翻译的工具。
前景回顾
在之前的文章中，我给出了Zuoy v1.x版本的大纲和内容。v1.x版本实现多语言的自动化配置、导入导出excel、接入百度翻译引擎的功能。计划分三次发布：
v1.0.x
v1.0完成多语言自动化配置，同期发布基于react-intl的useIntl实现的useZuoyIntl，便于在react项目中使用Zuoy的Z函数用法。
在v1.0发布之前已发布zuoy-key，这是Zuoy默认的语言key值算法，便于自定义实现其他Z函数。
v1.1.x
v1.1将实现导入导出excel功能，便于人工翻译介入。
v.1.2.x
v1.2完成接入百度翻译引擎的功能，可以启动机器翻译功能。
v1.3+
v1.x是否还有后续版本，将根据用户提出的功能要求而定。
zuoy 1.0来了
Zuoy v0.x时期的用户较少，大多数用户也许并不清楚如何使用Zuoy。从zuoy v1.0开始，我会同步更新使用文档。
截至本文发布，zuoy已发布v1.0.1版本，你可以通过npm i-g zuoy安装zuoy的最新版本。
如何在react项目中使用
如果你从零开始一个新的react项目，我推荐你使用Z函数来管理文本。
以umi项目为例，有如下目录结构
在根目录下执行zy init，zuoy会为你添加默认的配置文件zuoy.config.js。
我的项目打算提供简体中文、英文、葡文三种语言，简体中文为输入的默认语言，修改配置文件的languages如下：
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来给英文和葡文加上语言代码前缀。
defaultContent: (value, code) => { return`${code}-${value}`; }
我们需要对build进行配置。在上述的umi项目中，页面开发使用typescript，我们需要扫描.tsx文件，同时.umi文件夹是umi临时文件，不需要扫描。因此增加如下配置：
// build配置build: { include: [/\.tsx/], exclude: [/\.umi/], }
在页面文件index.tsx写出如下代码：
import { useState, useEffect } from'react'; import { Select } from'antd'; import { useZuoyIntl } from'zuoy-hooks'; import { setLocale } from'umi'; exportdefaultfunctionIndexPage() { const [lang, setLang] =useState('zh-CN'); constz=useZuoyIntl(); useEffect(() => { setLocale(lang, false); }, [lang]); return ( <divstyle={{ margin: 24 }}><Selectvalue={lang} onChange={(val) =>setLang(val)} options={[ { label: '简体中文', value: 'zh-CN' }, { label: '英文', value: 'en-US' }, { label: '葡文', value: 'pt-PT' }, ]} /><br/> {z('你好, {name}', { name: 'zuoy' })} <br/> {z('世界和平')} </div> ); }
Z函数使用useZuoyIntl（zuoy-hooks npm），执行zy build，zuoy会扫描项目根目录下的.tsx文件并过滤掉.umi文件夹中的内容。
在src/locales下，创建三个文件：
// zh-CN.json{ "fd40ff1c0cb81cffc6b09cd0562276c9": "你好, {name}", "b38b2399fe918912deb8dd452db6f776": "世界和平"}
// en-US.json{ "fd40ff1c0cb81cffc6b09cd0562276c9": "en-你好, {name}", "b38b2399fe918912deb8dd452db6f776": "en-世界和平"}
// pt-PT.json{ "fd40ff1c0cb81cffc6b09cd0562276c9": "pt-你好, {name}", "b38b2399fe918912deb8dd452db6f776": "pt-世界和平"}
启动项目，页面如下：
切换语言，发现并没有语言变化。
考虑到开发时多语言的展示并非是时刻必要的，只需要在完成一个里程碑时进行zy build一次。因此在开发环境下，useZuoyIntl并没有开启多语言功能。
你可以给useZuoyIntl传递一个环境变量参数prod：
constz=useZuoyIntl('prod');
再次尝试切换语言：
多语言切换成功！
后话
目前Zuoy已在gitee上开源，社区讨论也迁移到gitee下issues。如果你有多语言的需求，可以选择zuoy作为多语言管理方案。
