VoerkaI18n是一款非常优秀的前端国际化解决方案，其开发的出发点是为了解决现存多语言的一些痛点,接下来几篇文章将分别进行分析。
前端国际化的方案非常多，绝大多数多语言方案均采用对要翻译的词条key的方式。
以Vue-i18n为例，大体如下：
Vue-i18nconst messages = {
en: {
message: {
hello: 'hello world'
}
},
ja: {
message: {
hello: 'こんにちは、世界'
}
}
}
const i18n = new VueI18n({
locale: 'ja', // 设置地区
messages, // 设置地区信息
})
我们需要为每一个要翻译的词指定一个英文Key，这个英文Key一般需要具备一定的语义，如果要翻译的内容比较复杂，则这个英文key就不那么好翻译了。最终形成的多语言文件可能是这样的：
// en.json
{
noAccess: {
accessTitle: 'You are not authorized to operate~',
accessMsg: 'Contact information: add QQ group discussion 665452019',
},
layout: {
configTitle: 'Layout configuration',
twoColumnsMenuBarColor: 'Default font color bar menu',
twoIsColumnsMenuBarColorGradual: 'Column gradient',
twoIsColumnsMenuHoverPreload: 'Column Menu Hover Preload',
threeTitle: 'Interface settings',
threeIsCollapse: 'Menu horizontal collapse',
threeIsUniqueOpened: 'Menu accordion',
threeIsFixedHeader: 'Fixed header.ts',
threeIsClassicSplitMenu: 'Classic layout split menu',
threeIsLockScreen: 'Open the lock screen',
threeLockScreenTime: 'screen locking(s/s)',
fourTitle: 'Interface display',
fourIsShowLogo: 'Sidebar logo',
fourIsBreadcrumb: 'Open breadcrumb',
fourIsBreadcrumbIcon: 'Open breadcrumb icon',
fourIsTagsview: 'Open tagsview',
tipText: 'Click the button below to copy the layout configuration to `/src/stores/themeConfig.ts` It has been modified in.',
},
upgrade: {
title: 'New version',
msg: 'The new version is available, please update it now! Dont worry, the update is fast!',
desc: 'Prompt: Update will restore the default configuration',
}
}
然后在组件源码中可能是这样的:
<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
<p>{{ $t('layout.twoColumnsMenuBarColor' }}</p>
<p>{{ $t('layout.threeIsLockScreen' }}</p>
<p>{{ $t('layout.fourIsBreadcrumbIcon' }}</p>
<p>{{ $t('layout.tipText' }}</p>
<p>{{ $t('upgrade.msg' }}</p>
这样问题就来了，在源代码中充斥了大量的如layout.tipText,layout.threeIsClassicSplitMenu这样的英文词条，这带来以下痛点问题：
layout.tipText,layout.threeIsClassicSplitMenu这样的英文Key中推断出原文的内容，需要反向查询才能知道。Key是比较难的，特别是比较长的词条。如何解决这些痛点呢？
业界已经存在的方案有：
VSCODE插件，能解析语言文件（如en.json），然后在源码编辑时提供代码提示功能。如下例中，当输入layout.时列出备选的key让你选。VSCODE插件i18n-ally，能自动解析语言文件，在源码中显示出原文。针对这个痛点，VoerkaI18n则直接废弃了在源码中使用Key的方式，解决了些问题。
VoerkaI18n推荐在源代码中使用中文，不需要用到英文Key来标识词条。
其大概思路是这样的。
接下来在源码文件中，将所有需要翻译的内容使用t翻译函数进行包装，例如下：
import { t } from "./languages"
// 不含插值变量
t("中华人民共和国")
// 位置插值变量
t("中华人民共和国{}","万岁")
t("中华人民共和国成立于{}年，首都{}",1949,"北京")
接下来我们使用voerkai18n extract命令来自动扫描工程源码文件中的需要的翻译的文本信息。?voerkai18n extract命令会使用正则表达式来提取t("需要的翻译的文本")包装的文本。
voerkai18n compile
使用voerkai18n compile命令将翻译后的语言包编译成代码。编译过程中进行了去重、关联等处理。
使用VoerkaI18n进行国际化完全摒弃了传统的使用英文Key来标识待翻译词条的方案，另外符合直觉，也更加容易进行修改调整。完整的例子可以参考：