前端国际化：语言包篇

2023-10-23 14:22:43 浏览数 (1)

又开了个新坑，来讲讲前端国际化。

开篇之前，读者需要区分好国际化(i18n - internationalization)和本地化(l10n - localization) ， 它们是相互关联但又不同的概念：

  1. 国际化（i18n）：这是一个设计和开发过程，确保产品（如软件、网站或应用）能够在不做任何修改的情况下适应不同的语言和地区。这涉及到从一开始就预留空间用于文本扩展，确保日期和时间格式可以根据地区变化，以及确保代码可以处理不同的字符集和写作系统等。
  2. 本地化（L10n）：这是将产品或内容适应到特定市场的过程。这可能包括将文本翻译成本地语言，调整图像和色彩以适应本地文化，以及修改日期、电话号码和地址格式等。本地化可能还需要考虑本地法规和商业习惯。

简单来说，国际化是创建一个可以轻易本地化的产品的过程，而本地化是将产品调整以适应特定地区的过程。两者在实际产品中的边界可能比没有那么清晰，而是相辅相成，通常在大的国际化基座上进一步进行本地化。

国际化的涉及面非常广，比如语言、文字编码、时区、书写习惯、单复数、标点符号、时间格式、货币格式、计量单位…

强烈推荐读者读一下 基础设计专栏 - From.RED 这个专栏，这里面一系列的国际化/本地化的文章都非常赞：

  • 为全球设计，国际化与本地化探索：快速入门
  • 为全球设计，国际化与本地化探索：国际化设计
  • 为全球设计，国际化与本地化探索：本地化设计

实际上笔者也不是特别专业，这系列文章仅是我的一些技术实践总结。作为开篇，我们先聊一聊一些比较基础的话题：前端语言包的管理。

对于语言包的管理，我们大概率会遇到以下问题：

  • 语言包应该放在哪个目录？
  • 全局使用一个语言包，还是分模块？
  • 如果是分模块的话？粒度怎么把握?
  • 怎么实现按需加载？Web 端？小程序端？
  • 如果分模块组织，碎片化的语言包会不会导致多个请求？
  • 如何管理和分析语言包的使用？
  • 还有哪些建议？

如果进一步归纳，这些问题又可以分为三大类：

  • 组织语言包
    • 语言包应该放在哪个目录？
    • 全局使用一个语言包，还是分模块？
    • 如果是分模块的话？粒度怎么把握?
  • 语言包加载
    • 怎么实现按需加载？Web 端？小程序端？
    • 如果分模块组织，碎片化的语言包会不会导致多个请求？
  • 语言包管理
    • 如何管理和分析语言包的使用？
    • 还有哪些建议？

1. 组织语言包

1.1 放在哪个目录下？

通常放在 locales 或者 i18n 目录下。比如：

代码语言：javascript复制
/src
  /locales
    zh.json
    zh-Hant.json
    en.json
    th.json

我们团队的规范是使用 *.tr 来作为语言包，例如：

代码语言：javascript复制
/src
  /locales
    zh.tr
    zh-Hant.tr
    en.tr
    th.tr

tr 即 translate 的缩写， 这么做的目的主要为了和 json 文件区分开，方便后面的构建工具识别。

当然还有其他手段可以实现，但在本篇文章中我们统一约定使用 .tr 作为语言包文件。

小程序 翻译 管理 前端 设计

0 人点赞