自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

如何優(yōu)雅的實現(xiàn)前端國際化?

開發(fā) 前端
將 Lingui 集成到現(xiàn)有的工作流程中。它支持消息鍵以及自動生成的消息。翻譯存儲在 JSON 或標準 PO 文件中,幾乎所有翻譯工具都支持這些文件。

JavaScript 中每個常見問題都有許多成熟的解決方案。當(dāng)然,國際化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 庫可供選擇,下面就來分享一些熱門的前端國際化庫!

i18next

i18next 是一個用 JavaScript 編寫的國際化框架。它不僅僅提供標準的 i18n 功能,例如(復(fù)數(shù)、上下文、插值、格式)。它提供了一個完整的解決方案,可以將產(chǎn)品從 Web 本地化到移動和桌面。

i18next 社區(qū)為 React、Angular、Vue.js、Next.js 等框架創(chuàng)建了集成。還可以將 i18next 與Node.js、Deno、PHP、iOS、Android 等平臺一起使用。

圖片圖片

  • 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 多種語言。使用 react-intl 可以輕松處理標準區(qū)域設(shè)置,例如日期和時間、貨幣和數(shù)字。此外,它還擁有遵循高級標準的豐富文檔,盡可能使用內(nèi)置的瀏覽器翻譯。Polyfill 選項可用于不支持 i18n 的 JavaScript API 的瀏覽器。

React-intl 基于 JavaScript 的 React i18n API 構(gòu)建,并提供改進的 API 和組件。當(dāng)需要動態(tài)加載語言模塊時,react-intl 使用 React 上下文和提供翻譯的高階組件。

圖片圖片

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

vue-i18n

Vue I18n 是 Vue.js 的國際化插件。它可以輕松地將一些本地化功能集成到 Vue.js 應(yīng)用中。vue-i18n 是Vue 項目中實現(xiàn)國際化的首選,該庫的作者 kazupon 是 Vue 團隊的核心成員。

在 vue-i18n 中,可以通過簡單的 API 將國際化引入應(yīng)用中;除了簡單的翻譯,它還支持復(fù)數(shù)、數(shù)字、日期時間等本地化;除此之外,還可以在單個文件組件上管理語言環(huán)境。

圖片圖片

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

next-translate

next-translate 的主要目標是在 Next.js 環(huán)境中保持翻譯盡可能簡單。它分為兩部分:Next.js 插件+ i18n API。next-translate 具有以下特性:

  • 適用于自動頁面優(yōu)化;
  • 易于使用和配置;
  • 基本的 i18n 支持:插值、復(fù)數(shù)、useTranslation hook、Trans 組件等;
  • 它只加載必要的翻譯(針對頁面和語言環(huán)境);
  • 小巧(~1kb)且可以 Tree-shaking,沒有依賴性。

圖片圖片

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

FBT

FBT是一個 JavaScript 國際化框架,它不僅功能強大、靈活,而且簡單直觀。它有助于組織翻譯源文本,編寫語法正確的可翻譯用戶界面。

圖片圖片

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

Linguijs

Lingui 是一個簡單而強大的國際化框架。其具有以下特點:

  • 代碼簡潔和可讀:保持代碼簡潔和可讀,而庫在內(nèi)部使用久經(jīng)考驗且功能強大的 ICU MessageFormat。
  • 通用:隨處使用,@lingui/core 提供了適用于任何 JavaScript 項目的基本國際化功能,同時@lingui/react 提供組件以利用 React 渲染。
  • 完整的富文本支持:在本地化消息中使用 React 組件沒有任何限制。編寫富文本消息就像編寫 JSX 一樣簡單。
  • 強大的工具:使用 Lingui CLI 管理整個國際化工作流程。它從源代碼中提取消息,驗證來自翻譯器的消息,并檢查所有消息在交付生產(chǎn)之前是否已翻譯。
  • 不拘一格;將 Lingui 集成到現(xiàn)有的工作流程中。它支持消息鍵以及自動生成的消息。翻譯存儲在 JSON 或標準 PO 文件中,幾乎所有翻譯工具都支持這些文件。
  • 輕量級和優(yōu)化:核心庫 gzip 壓縮后只有1.9 kb ,React 組件gzip 壓縮后有額外的 3.1 kb。對于功能齊全的 intl 庫,這比 Redux 要少。

圖片圖片

Github:https://github.com/lingui/js-lingui

責(zé)任編輯:武曉燕 來源: 前端充電寶
相關(guān)推薦

2023-01-31 10:29:26

JavaScript國際化國際化庫

2023-04-07 15:12:46

ReactReact-Intl

2010-01-04 13:09:51

Silverlight

2009-01-19 09:06:31

gettextPHP國際化編程

2009-12-29 15:05:29

WPF支持國際化

2016-09-20 12:49:29

2011-05-17 09:39:38

JavaSE

2011-08-11 13:26:30

iPhoneNSLocalized

2011-08-18 15:24:40

iPhone國際化

2011-07-20 14:53:28

iPhone NSLocalize 國際化

2011-07-08 11:13:42

Cocoa Touch XCode

2011-08-29 09:48:30

springMVC

2024-04-03 13:27:28

Next.js擴展項目

2010-03-02 16:44:59

CentOS Mono

2010-07-28 14:52:29

Flex國際化

2024-05-17 08:25:06

數(shù)據(jù)驅(qū)動React語言包

2011-08-19 13:13:14

struts2Java

2010-07-28 14:28:57

Flex國際化

2009-06-25 16:04:30

2009-06-03 08:30:30

禚佳春法航華為
點贊
收藏

51CTO技術(shù)棧公眾號