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

2024-01-09 18:43:42

前言

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翻译函数进行包装,例如下:

  1. 在源代码中直接使用中文
import { t } from "./languages"
// 不含插值变量
t("中华人民共和国")
// 位置插值变量
t("中华人民共和国{}","万岁")
t("中华人民共和国成立于{}年,首都{}",1949,"北京")
  1. 提取需要的翻译的文本信息

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

  1. 编译语句包
voerkai18n compile

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

小结

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

VoerkaI18n入门示例

VoerkaI18n文本映射过程说明

后续

文章来源:https://blog.csdn.net/wenxuansoft/article/details/135486805
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。