如何優雅的實現前端國際化？
大家好，我是 CUGGZ。
JavaScript 中每個常見問題都有許多成熟的解決方案。當然，國際化 (i18n) 也不例外，有很多成熟的 JavaScript i18n 庫可供選擇，下面就來分享一些熱門的前端國際化庫！
i18next
i18next 是一個用 JavaScript 編寫的國際化框架。它不僅僅提供標準的 i18n 功能，例如（復數、上下文、插值、格式）。它提供了一個完整的解決方案，可以將產品從 Web 本地化到移動和桌面。
i18next 社區為 React、Angular、Vue.js、Next.js 等框架創建了集成。還可以將 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 可以輕松處理標準區域設置，例如日期和時間、貨幣和數字。此外，它還擁有遵循高級標準的豐富文檔，盡可能使用內置的瀏覽器翻譯。Polyfill 選項可用于不支持 i18n 的 JavaScript API 的瀏覽器。
React-intl 基于 JavaScript 的 React i18n API 構建，并提供改進的 API 和組件。當需要動態加載語言模塊時，react-intl 使用 React 上下文和提供翻譯的高階組件。
Github：https://github.com/formatjs/formatjs
vue-i18n
Vue I18n 是 Vue.js 的國際化插件。它可以輕松地將一些本地化功能集成到 Vue.js 應用中。vue-i18n 是Vue 項目中實現國際化的首選，該庫的作者 kazupon 是 Vue 團隊的核心成員。
在 vue-i18n 中，可以通過簡單的 API 將國際化引入應用中；除了簡單的翻譯，它還支持復數、數字、日期時間等本地化；除此之外，還可以在單個文件組件上管理語言環境。
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
