国际化方案

博客
913 词

国际化方案

国际化背景

​ 国际化（Internationalization，简称 i18n）是指在软件、网站或应用开发中，使其能够适应不同国家或地区的语言、文化、时间格式、货币符号、法律规范等多样化需求的过程。通过国际化，产品可以更容易地进行本地化（Localization），即根据特定地区的需求进行适应和调整，而无需重新开发整个系统。

国际化的核心目标是设计和构建一个产品，使其能够支持多语言、多地区的使用，并且能够灵活处理各种与地域相关的差异，如文本翻译、日期格式、货币、单位、输入法等。

扩展：

本地化：本地化（Localization, L10n）的核心是将产品适配特定地区的语言、文化、习俗和法律要求，以便为目标市场提供符合当地用户期望的体验。

国际化需要解决的问题

    1. 语言翻译
    • 静态文案（前端静态模板文案）
    • 动态文案（服务端下发的动态数据)
    1. 样式
    • 不同的语言文案，长度不一样，容易造成样式混乱
    • 图片替换（带有文案的图片）
    • 受文化习惯的影响，部分地区使用从右到左的阅读方式
    1. 文化习惯
    • 货币单位
    • 时间格式
    • 准确的文字翻译，受文化风俗的影响，相同的文字可能蕴含了不同的意思
    1. 第三方服务
    • SDK
    1. 打包方案
    • 编译时
    • 运行时
    1. 如何确定用户所在地区

国际化的一般流程

文案国际化

文案国际化就是将页面中的文案做成可以切换语言，然后用对应语言的文案进行展示，主要是在工程中维护多份语言包（key-value），通过同一个key获取不同语言下对应的 value。

  1. 提取，将项目中的文档提取出来，生成资源文件 以 key-value的形式维护
  2. 翻译，由翻译方将文案翻译成不同语言
  3. 使用，加载资源文件，将文案换成key

使用国际化方案碰到的问题

  • 文案使用国际化 Key代替后，难以搜索，文案不直观
  • 代码中的中文提取困难
  • 无法知道项目中是不是还有未提取的中文文案

可用的框架工具

问题：

  1. 已经停止维护，最新的更新是两年前，用户群二维码过期，找不到作者
  2. 文档内容非常少，拿不到有效信息，连配置文件的说明都没有
  • react-intl-universal
  • react-18next

提取工具：

  • i8next-scanner
    • 解析不了装饰器（@xxx)
留言