前端国际化之痛点(二):多包多库场景下联动多语言

前言

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

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

–>点击进入项目官网<–

现有方案痛点

对于大型项目,一般会将项目拆分为多个库或monorepo包结构,一个工程可能包含1-N个子项目或库。如何进行国际化?

针对这样的场景,理想的多语言方案应该是这样:

  • 当主应用切换语言时,所有引用依赖库也会跟随主程序进行语言切换
  • 所有的每个子包或库均独立进行开发,并且引入其独立的多语言配置,不需要类似模块联邦一样进行复杂的配置。

随着monorepo的流行,针对此场景的多语言需求越来越迫切,但是比较遗憾的是,现有的多语言方案均未能提供比较便利的方案。

解决痛点

voerkai18n 支持多个库国际化的联动和协作,即当主程序切换语言时,所有引用依赖库也会跟随主程序进行语言切换,整个切换过程对所有库开发都是透明的。 库开发者不需要特殊配置,只需要像普通应用一样进行开发即可。

其基本原理是这样的:

image.png

当我们在开发一个应用或者库并import "./languages"时,在langauges/index.js进行了如下处理:

  • 创建一个i18nScope作用域实例

  • 检测当前应用环境下是否具有全局单例VoerkaI18n

    • 如果存在VoerkaI18n全局单例,则会将当前i18nScope实例注册到VoerkaI18n.scopes
    • 如果不存在VoerkaI18n全局单例,则使用当前i18nScope实例的参数来创建一个VoerkaI18n全局单例。
  • 在每个应用与库中均可以使用import { t } from ".langauges导入本工程的t翻译函数,该t翻译函数被绑定当前i18nScope作用域实例,因此翻译时就只会使用到本工程的文本。这样就割离了不同工程和库之间的翻译。

  • 由于所有引用的i18nScope均注册到了全局单例VoerkaI18n,当切换语言时,VoerkaI18n会刷新切换所有注册的i18nScope,这样就实现了各个i18nScope即独立,又可以联动语言切换。

小结

VoerkaI18n为多包多库场景下的多语言开发提供了比较完美的解决方案。有理由认为,未来所有的多语言方案均应该是这样的,赶紧上马 VoerkaI18n。

[VoerkaI18n多包多库场景下的多语言原理说明和使用介绍](https://zhangfisher.github.io/voerka-i18n/#/zh/guide/advanced/multi-libs)

–>点击进入项目官网<–

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/611487.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jetson Orin AGX 64GB更新 Jetpack6.0

Jetson Orin AGX 64GB更新 Jetpack6.0 注意&#xff1a; 1&#xff0c;如果你要向我一样为AGX更新Jetpack6.0的话&#xff0c;它还要求你的ubuntu版本必须是20.04 或22.04 2&#xff0c;安装完SDKmanager后&#xff0c;然后选择对应的设备&#xff0c;根据个人选择勾选是否安装…

【Mysql】InnoDB 引擎中的页目录

一、页目录和槽 现在知道记录在页中按照主键大小顺序串成了单链表。 那么我使用主键查询的时候&#xff0c;最顺其自然的办法肯定是从第一条记录&#xff0c;也就是 Infrimum 记录开始&#xff0c;一直向后找&#xff0c;只要存在总会找到。这种在数据量少的时候还好说&#x…

四、K8S-Deployment(无状态服务)

目录 一、引入Deployment 二、Deployment资源清单 三、Deployment支持的功能 1、扩缩容 1、通过命令行方式修改 2 、在线编辑yaml文件方式修改 2、镜像更新 1、重建更新 2、滚动更新 3、金丝雀发布&#xff08;灰度更新&#xff09; [rootk8s-master-1 ~]# kubectl g…

【笔记】Helm-2 如何使用-2 同步你的仓库

同步你的仓库 注意&#xff1a;该示例是专门针对Google Cloud Storage&#xff08;GCS&#xff09;提供的chart仓库。 先决条件 安装gsutil工具。我们非常依赖gsutil rsync功能 https://cloud.google.com/storage/docs/gsutil 确保可以使用Helm程序 可选&#xff1a;我们推…

centos用yum安装mysql详细教程

1 查询安装mysql的yum源,命令如下 ls /etc/yum.repos.d/ -l 界面如下图所示&#xff0c;未显示mysql的安装源 2 安装mysql相关的yum源,例如&#xff1a; 例如&#xff1a;rpm -ivh mysql57-community-release-el7.rpm 要注意 mysql的版本和系统的版本匹配 mysql57-communi…

【高等数学之泰勒公式】

一、从零开始 1.1、泰勒中值定理1 什么是泰勒公式?我们先看看权威解读: 那么我们从古至今到底是如何创造出泰勒公式的呢? 由上图可知&#xff0c;任一无穷小数均可以表示成用一系列数字的求和而得出的结果&#xff0c;我们称之为“无穷算法”。 那么同理我们想对任一曲线来…

vue上传文件时显示进度

在Vue中上传多个文件并实时刷新进度条&#xff0c;可以通过使用HTML5的File API和XMLHttpRequest对象来实现。下面是一个简单的示例代码&#xff0c;演示了如何实现这个功能&#xff1a; 首先&#xff0c;在Vue组件中添加一个用于选择文件的input元素和一个用于显示进度条的di…

Qt 智能指针QScopedPoint用法

1. 智能指针是什么 智能指针是C11引入的一种指针封装类型&#xff0c;用于自动管理动态分配的内存。智能指针的目的是解决传统裸指针带来的内存泄漏、悬挂指针等问题&#xff0c;并使代码更安全、更易读。 2. 智能指针有什么用 1.自动管理内存&#xff0c;避免内存泄漏和悬挂…

Qt/QML编程学习之心得:hicar手机投屏到车机中控的实现(32)

hicar,是华为推出的一款手机APP,有百度地图、华为音乐,更多应用中还有很多对应手机上装在的其他APP,都可以在这个里面打开使用,对开车的司机非常友好。但它不仅仅是用在手机上,它还可以投屏到车机中控上,这是比较神奇的一点。 HiCar本质上是一套智能投屏系统,理论上所有…

springboot 企业微信 网页授权

html 引入jquery $(function () {// alert("JQ onready");// 当前企业的 corp_idconst corp_id xxxxxx;// 重定向 URL → 最终打开的画面地址&#xff0c;域名是在企业微信上配置好的域名const redirect_uri encodeURI(http://xxxxx.cn);//企业的agentId 每个应用都…

C++中的深度优先搜索算法

C中的深度优先搜索算法 深度优先搜索&#xff08;DFS&#xff09;是一种用于遍历或搜索树或图的算法。这个算法会尽可能深的搜索树的分支。当节点v的所在边都己被探寻过&#xff0c;搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点…

Vue3-39-路由-导航异常的检测 afterEatch 与 编程式导航之后的订阅动作

说明 本文主要是介绍一下 路由的后置守卫 afterEatch 的一个重要的作用 &#xff1a; 就是检测路由异常信息。 它的实现方式是 通过第三个参数来返回的。 而且&#xff0c;它的异常检测是全局的。导航的异常有以下三种类型&#xff1a; aborted : 在导航守卫中 被拦截并返回了…

Python 格式化的方法

在Python中&#xff0c;我们可以使用字符串的format()方法或f-string这两种方法来进行格式化。 1、使用format()方法&#xff1a;使用该方法&#xff0c;我们可以通过占位符{}来表示被替换的值&#xff0c;其中可以单独使用{}或添加变量参数来指定相应的值。如&#xff1a; n…

【Blog】记录一下如何让自己的自建网站让百度搜索收录

记录一下如何让自己的自建网站让百度搜索收录 目录 记录一下如何让自己的自建网站让百度搜索收录一、前言二、开始操作1、第一步&#xff1a;进入设置2、第二步&#xff1a;开始设置3、第三步&#xff1a;让百度收录我们自己的文章 三、知识点记录1、注意事项2、可能会出现的问…

vsCode输出控制台中文乱码解决

在tasks.json里的args中添加 "-fexec-charsetGBK", // 处理mingw中文编码问题 "-finput-charsetUTF-8",// 处理mingw中文编码问题

PyCharm 设置新建Python文件时自动在文章开头添加固定注释的方法

在实际项目开发时&#xff0c;为了让编写的每个代码文件易读、易于维护或方便协同开发时&#xff0c;我们都会在每一个代码文件的开头做一些注释&#xff0c;如作者&#xff0c;文档编写时间&#xff0c;文档的功能说明等。 利用PyCharm 编辑器&#xff0c;我们只需设置相关设…

微机原理常考简答题总结

一&#xff0c;8086和8088这两个微处理器在结构上有什么异同&#xff1f; &#xff08;1&#xff09;共同点&#xff1a;内部均由EU、BIU组成&#xff0c;结构基本相同&#xff1b;寄存器等功能部件均为16位&#xff1b;内部数据通路为16位&#xff1b;指令系统相同。 &#x…

网络协议与攻击模拟_03实施ARP欺骗和攻击

一、ARP攻击 1、实验环境 kali Linux &#xff08;安装arpspoof工具&#xff09;被攻击主机 2、kali配置 kali Linux系统是基于debian Linux系统&#xff0c;采用deb包管理方式&#xff0c;可以使用apt源的方式进行直接从源的安装。 配置kali网络源 vim /etc/apt/sources…

电池可以比喻为人体心脏提供动力,电驱比喻为人的双腿,起到运动的目的,电控比喻人的大脑,协调所有零部件正常工作。

问题描述&#xff1a; 电池可以比喻为人体心脏提供动力&#xff0c;电驱比喻为人的双腿&#xff0c;起到运动的目的&#xff0c;电控比喻人的大脑&#xff0c;协调所有零部件正常工作。 问题解答&#xff1a; 高压电池系统 - 人体心脏&#xff1a; 将高压电池系统比喻为心脏是…

python第三节:Str字符串类型(2)

str.format(*args, **kwargs) 执行字符串格式化操作。 语法&#xff1a;点号前面是一个带槽&#xff08;由大括号表示&#xff09;的字符串&#xff0c;字符串里面可以设置各种参数和格式控制标记&#xff0c;后面是format和替换的字符串。 {参数序号:格式控制标记} 如下六…