前言
VoerkaI18n
是一款非常优秀的前端国际化解决方案,其开发的出发点是为了解决现存多语言的一些痛点,接下来几篇文章将分别进行分析。
现有方案痛点
前端国际化的方案非常多,绝大多数多语言方案均采用对要翻译的词条key
的方式。
以Vue-i18n
为例,大体如下:
Vue-i18n
const 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
来标识待翻译词条的方案,另外符合直觉,也更加容易进行修改调整。完整的例子可以参考: