前端国际化之痛点(一)：让人头疼的词条Key

前言

VoerkaI18n是一款非常优秀的前端国际化解决方案，其开发的出发点是为了解决现存多语言的一些痛点,接下来几篇文章将分别进行分析。

• 前端国际化之痛点(一)：让人头疼的词条Key
• 前端国际化之痛点(二)：多包多库场景下联动多语言
• 前端国际化之痛点(三)：上线后修改翻译内容

现有方案痛点

前端国际化的方案非常多，绝大多数多语言方案均采用对要翻译的词条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翻译函数进行包装，例如下：

1. 在源代码中直接使用中文

import { t } from "./languages"
// 不含插值变量
t("中华人民共和国")
// 位置插值变量
t("中华人民共和国{}","万岁")
t("中华人民共和国成立于{}年，首都{}",1949,"北京")

2. 提取需要的翻译的文本信息

接下来我们使用voerkai18n extract命令来自动扫描工程源码文件中的需要的翻译的文本信息。?voerkai18n extract命令会使用正则表达式来提取t("需要的翻译的文本")包装的文本。

3. 编译语句包

voerkai18n compile

使用voerkai18n compile命令将翻译后的语言包编译成代码。编译过程中进行了去重、关联等处理。

小结

使用VoerkaI18n进行国际化完全摒弃了传统的使用英文Key来标识待翻译词条的方案，另外符合直觉，也更加容易进行修改调整。完整的例子可以参考：

VoerkaI18n入门示例

VoerkaI18n文本映射过程说明

后续

• 前端国际化之痛点(一)：让人头疼的词条Key
• 前端国际化之痛点(二)：多包多库场景下联动多语言
• 前端国际化之痛点(三)：上线后修改翻译内容