如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化?
大家好,我是 CUGGZ。
JavaScript 中每個(gè)常見(jiàn)問(wèn)題都有許多成熟的解決方案。當(dāng)然,國(guó)際化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 庫(kù)可供選擇,下面就來(lái)分享一些熱門(mén)的前端國(guó)際化庫(kù)!
i18next
i18next 是一個(gè)用 JavaScript 編寫(xiě)的國(guó)際化框架。它不僅僅提供標(biāo)準(zhǔn)的 i18n 功能,例如(復(fù)數(shù)、上下文、插值、格式)。它提供了一個(gè)完整的解決方案,可以將產(chǎn)品從 Web 本地化到移動(dòng)和桌面。
i18next 社區(qū)為 React、Angular、Vue.js、Next.js 等框架創(chuàng)建了集成。還可以將 i18next 與Node.js、Deno、PHP、iOS、Android 等平臺(tái)一起使用。
- 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 庫(kù)是FormatJS 國(guó)際化庫(kù)的一部分。它支持全球 150 多種語(yǔ)言。使用 react-intl 可以輕松處理標(biāo)準(zhǔn)區(qū)域設(shè)置,例如日期和時(shí)間、貨幣和數(shù)字。此外,它還擁有遵循高級(jí)標(biāo)準(zhǔn)的豐富文檔,盡可能使用內(nèi)置的瀏覽器翻譯。Polyfill 選項(xiàng)可用于不支持 i18n 的 JavaScript API 的瀏覽器。
React-intl 基于 JavaScript 的 React i18n API 構(gòu)建,并提供改進(jìn)的 API 和組件。當(dāng)需要?jiǎng)討B(tài)加載語(yǔ)言模塊時(shí),react-intl 使用 React 上下文和提供翻譯的高階組件。
Github:https://github.com/formatjs/formatjs
vue-i18n
Vue I18n 是 Vue.js 的國(guó)際化插件。它可以輕松地將一些本地化功能集成到 Vue.js 應(yīng)用中。vue-i18n 是Vue 項(xiàng)目中實(shí)現(xiàn)國(guó)際化的首選,該庫(kù)的作者 kazupon 是 Vue 團(tuán)隊(duì)的核心成員。
在 vue-i18n 中,可以通過(guò)簡(jiǎn)單的 API 將國(guó)際化引入應(yīng)用中;除了簡(jiǎn)單的翻譯,它還支持復(fù)數(shù)、數(shù)字、日期時(shí)間等本地化;除此之外,還可以在單個(gè)文件組件上管理語(yǔ)言環(huán)境。
Github:https://github.com/kazupon/vue-i18n
next-translate
next-translate 的主要目標(biāo)是在 Next.js 環(huán)境中保持翻譯盡可能簡(jiǎn)單。它分為兩部分:Next.js 插件+ i18n API。next-translate 具有以下特性:
- 適用于自動(dòng)頁(yè)面優(yōu)化;
- 易于使用和配置;
- 基本的 i18n 支持:插值、復(fù)數(shù)、useTranslation hook、Trans 組件等;
- 它只加載必要的翻譯(針對(duì)頁(yè)面和語(yǔ)言環(huán)境);
- 小巧(~1kb)且可以 Tree-shaking,沒(méi)有依賴性。
Github:https://github.com/aralroca/next-translate
FBT
FBT是一個(gè) JavaScript 國(guó)際化框架,它不僅功能強(qiáng)大、靈活,而且簡(jiǎn)單直觀。它有助于組織翻譯源文本,編寫(xiě)語(yǔ)法正確的可翻譯用戶界面。
Github:https://github.com/facebook/fbt
Linguijs
Lingui 是一個(gè)簡(jiǎn)單而強(qiáng)大的國(guó)際化框架。其具有以下特點(diǎn):
- 代碼簡(jiǎn)潔和可讀:保持代碼簡(jiǎn)潔和可讀,而庫(kù)在內(nèi)部使用久經(jīng)考驗(yàn)且功能強(qiáng)大的 ICU MessageFormat。
- 通用:隨處使用,@lingui/core? 提供了適用于任何 JavaScript 項(xiàng)目的基本國(guó)際化功能,同時(shí)@lingui/react 提供組件以利用 React 渲染。
- 完整的富文本支持:在本地化消息中使用 React 組件沒(méi)有任何限制。編寫(xiě)富文本消息就像編寫(xiě) JSX 一樣簡(jiǎn)單。
- 強(qiáng)大的工具:使用 Lingui CLI 管理整個(gè)國(guó)際化工作流程。它從源代碼中提取消息,驗(yàn)證來(lái)自翻譯器的消息,并檢查所有消息在交付生產(chǎn)之前是否已翻譯。
- 不拘一格;將 Lingui 集成到現(xiàn)有的工作流程中。它支持消息鍵以及自動(dòng)生成的消息。翻譯存儲(chǔ)在 JSON 或標(biāo)準(zhǔn) PO 文件中,幾乎所有翻譯工具都支持這些文件。
- 輕量級(jí)和優(yōu)化:核心庫(kù) gzip 壓縮后只有1.9 kb ,React 組件gzip 壓縮后有額外的 3.1 kb。對(duì)于功能齊全的 intl 庫(kù),這比 Redux 要少。
Github:https://github.com/lingui/js-lingui