如何优雅的实现前端国际化?

news2024/9/27 9:28:59

JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!

i18next

i18next 是一个用 JavaScript 编写的全面的国际化框架,提供标准的 i18n 功能,包括复数、上下文、插值、格式等。它支持 Web、移动和桌面平台,并有针对 React、Angular、Vue.js、Next.js 等框架的集成。

在这里插入图片描述

  • i18next:https://github.com/i18next/i18next
  • React:https://github.com/i18next/react-i18next
  • Vue:https://github.com/i18next/i18next-vue
  • Next.js:https://github.com/i18next/next-i18next

react-intl

react-intl 是 FormatJS 国际化库的一部分,支持全球 150 多种语言。它简化了处理标准区域设置、日期、时间、货币和数字的任务。基于 JavaScript 的 React i18n API 构建,提供改进的 API 和组件。

在这里插入图片描述

  • Github:https://github.com/formatjs/formatjs

vue-i18n

next-translate 旨在在 Next.js 环境中简化翻译。它包括 Next.js 插件和 i18n API,支持自动页面优化,易于使用和配置,基本的 i18n 支持,以及只加载必要翻译的特性
在这里插入图片描述

  • Github:https://github.com/kazupon/vue-i18n

next-translate

next-translate 的主要目标是在 Next.js 环境中保持翻译尽可能简单。它分为两部分:Next.js 插件+ i18n API。next-translate 具有以下特性:

  • 适用于自动页面优化;
  • 易于使用和配置;
  • 基本的 i18n 支持:插值、复数、useTranslation hook、Trans 组件等;
  • 它只加载必要的翻译(针对页面和语言环境);
  • 小巧(~1kb)且可以 Tree-shaking,没有依赖性。

在这里插入图片描述

  • Github:https://github.com/aralroca/next-translate

FBT

FBT 是一个强大而直观的 JavaScript 国际化框架,帮助组织翻译源文本和编写可翻译的用户界面。

在这里插入图片描述

  • Github:https://github.com/facebook/fbt

Linguijs

Lingui 是一个简单而强大的国际化框架。其具有以下特点:

  • 代码简洁和可读:保持代码简洁和可读,而库在内部使用久经考验且功能强大的 ICU MessageFormat。
  • 通用:随处使用,@lingui/core 提供了适用于任何 JavaScript 项目的基本国际化功能,同时@lingui/react 提供组件以利用 React 渲染。
  • 完整的富文本支持:在本地化消息中使用 React 组件没有任何限制。编写富文本消息就像编写 JSX 一样简单。
  • 强大的工具:使用 Lingui CLI 管理整个国际化工作流程。它从源代码中提取消息,验证来自翻译器的消息,并检查所有消息在交付生产之前是否已翻译。
  • 不拘一格;将 Lingui 集成到现有的工作流程中。它支持消息键以及自动生成的消息。翻译存储在 JSON 或标准 PO 文件中,几乎所有翻译工具都支持这些文件。
  • 轻量级和优化:核心库 gzip 压缩后只有1.9 kb ,React 组件gzip 压缩后有额外的 3.1 kb。对于功能齐全的 intl 库,这比 Redux 要少。
    在这里插入图片描述
  • Github:https://github.com/lingui/js-lingui

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

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

相关文章

Apipost自动化测试+Jenkins实现持续集成

Apipost 自动化测试支持「持续集成」功能,在安装了Apipost的服务器中输入命令,即可运行测试脚本。 创建自动化测试脚本 在创建好的测试用例中选择「持续集成」。 点击新建,配置运行环境、循环次数、间隔停顿后点击保存会生成命令。 安装 Ap…

C++ STL之stack的使用及模拟实现

文章目录 1. 介绍2. stack的使用3. 栈的模拟实现 1. 介绍 英文解释: 也就是说: stack是一种容器适配器,专门用在具有后进先出操作的上下文环境中,其删除只能从容器的一端进行元素的插入与提取操作。 stack是作为容器适配器被实现…

Java JVM垃圾回收 JVM调优 老年代 新生代

如何判断对象可以回收 引用计数法 当一个对象被其他对象引用,该对象计数 1,当某个对象不再引用该对象,其计数 -1当一个对象没有被其他对象引用时,即计数为0,该对象就可以被回收 缺点:循环引用时&#xf…

全桥RLC模态图具体分析

T0时刻,Q6,Q7,Q1.Q4开通,驱动为高电平,励磁电流线性上升,但是lm电流在to是为负电流,这时刻有给副边提供能量,Ip电流开始上升,这个时候给副边的电流也是从0开始上升,这个能量由励磁电感提供,Co给…

HCIP-BGP实验4

搭建实验拓扑图 要求 1.全网可达 2.isp只能配置IP地址 实验开始 配置IP地址及环回 r1,r2,r9,r10配ipv4地址(以r1为例) [Huawei]sysname r1 [r1]interface g0/0/0 [r1-GigabitEthernet0/0/0]ip address 12.1.1.1 24 [r1-GigabitEthernet0/0/0]q [r1]interface LoopBack 0…

【Foxmail】客户端发送邮件错误:SSL Recv :服务器断开连接, errorCode: 6

Foxmail客户端发送邮件提示:SSL Recv :服务器断开连接, errorCode: 6 错误代码 处理方式: 去邮箱生成新的16位授权码,输入到 密码框 内即可。 注:一旦开通授权码,在Foxmail验证时 密码框 里输入的就是 授权码

Ddosify 作为压测工具的使用指南

文章目录 1. 写在最前面1.1 Kubernetes 监控1.2 Performance Testing 2. 命令行安装 & 使用2.1 安装2.2 使用2.2.1 默认的例子2.2.2 定制的例子 3. Dashboard 安装 & 使用3.1 安装3.2 使用3.2.1 简单使用3.2.3 依赖的服务介绍 4. 碎碎念5. 参考资料 1. 写在最前面 由于…

【单例模式】保证线程安全实现单例模式

📄前言:本文是对经典设计模式之一——单例模式的介绍并讨论单例模式的具体实现方法。 文章目录 一. 什么是单例模式二. 实现单例模式1. 饿汉式2. 懒汉式2.1 懒汉式实现单例模式的优化(一)2.2 懒汉式实现单例模式的优化&#xff08…

EI论文复现:考虑冷热运行特性的综合能源系统多时间尺度优化调度程序代码!

适用平台/参考文献:MatlabYalmipCplex; 参考文献:电力系统自动化《含冰蓄冷空调的冷热电联供型微网多时间尺度优化调度》 提出考虑冷热特性的综合能源系统多时间尺度优化调度模型,日前计划中通过多场景描述可再生能源的不确定性…

表白墙网站PHP源码,支持封装成APP

源码介绍 PHP表白墙网站源码,适用于校园内或校区间使用,同时支持封装成APP。告别使用QQ空间的表白墙。 简单安装,只需PHP版本5.6以上即可。 通过上传程序进行安装,并设置账号密码,登录后台后切换模板,适配…

牛客30道题解析精修版

1.异常处理 都是Throwable的子类: ① Exception(异常):是程序本身可以处理的异常。 ② Error(错误): 是程序无法处理的错误。这些错误表示故障发生于虚拟机自身、或者发生在虚拟机试图执行应用时,一般不需要…

《统计学习方法:李航》笔记 从原理到实现(基于python)-- 第3章 k邻近邻法

文章目录 第3章 k邻近邻法3.1 k近邻算法3.2 k近邻模型3.2.1 模型3.2.2 距离度量3.2.3 k值的选择3.2.4 分类决策规则 3.3 k近邻法的实现:kd树3.3.1 构造kd树3.3.2 搜索kd树 算法实现课本例3.1iris数据集scikit-learn实例kd树:构造平衡kd树算法例3.2 《统计学习方法&a…

把Windows系统装进U盘,到哪都有属于你自己的电脑系统

前言 自从接触到WinPE启动盘之后,小白就突然萌生了一个想法:为啥不能把完整的Windows放进U盘呢? 实际上Windows是可以安装进U盘的,外出的时候带上,只需要有台正常开机的电脑就可以使用属于自己的系统。 这个是早已经…

一分钟教你搭建《幻兽帕鲁》服务器

幻兽帕鲁是一款由Pocketpair开发的开放世界生存游戏,融合了多种玩法的游戏,其独特的题材和画风吸引了很多玩家,越来越多的玩家开始尝试自己搭建服务器,享受更加自由的游戏体验。本文将为大家详细介绍如何从零开始搭建《幻兽帕鲁》…

「 网络安全常用术语解读 」杀链Kill Chain详解

1. 简介 早在2009年,Lockheed Martin公司就提出了杀链(Kill Chain)理论,现在也称之为攻击者杀链(Attacker Kill Chain)。杀链其实就是攻击者进行网络攻击时所采取的步骤。杀链模型包括7个步骤:1侦察 -> 2武器化 -> 3交付 -> 4利用 …

java程序判等问题

注意 equals 和 的区别 对基本类型,比如 int、long,进行判等,只能使用 ,比较的是直接值。因为基本类型的值就是其数值。对引用类型,比如 Integer、Long 和 String,进行判等,需要使用 equals 进…

【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解

前言:本文进行布线铺铜实战及详解布线铺铜的细节 在本专栏中【立创EDA-PCB设计基础】前面完成了布线铺铜前的设计规则的设置,接下来进行布线 布局原则是模块化布局(优先布局好确定位置的器件,例如排针、接口、主控芯片&#xff…

Sulfo Cy3 hydrazide,磺化-Cy3-酰肼,可用于与生物分子的羰基衍生物偶联

您好,欢迎来到新研之家 文章关键词:Sulfo-Cyanine3-hydrazide,Sulfo Cy3 hydrazide,Sulfo Cyanine3 HZ,磺化 Cy3 酰肼,磺化-Cy3-酰肼 一、基本信息 产品简介:Sulfo-Cyanine3-hydrazide能够与…

远程连接银河麒麟

目录 一、防火墙服务 二、安装SSH服务 1.验证SSH服务是否安装 2.安装SSH服务 三、启动SSH服务 四、远程连接 1.切换登录用户 2.查看IP地址 3.FinalShell连接 4.切换root用户 前言: 本篇主要讲述在Win10系统中通过FinalShell远程连接银河麒麟桌面操作系统V10 一、防火…

android studio从空白开始

对我来说,真正的第一步是清理电脑C盘。从剩余8G清理到25G,把原来看不顺眼又不敢删的文件夹和软件全删了,删爽了的后果就是,用两天的时间在把一些环境配置慢慢装回来,node.js,jdk,npm。努力把它们…