大家好，我是Echa。
由于小編前一段時間，分别釋出了國内外2篇接私活平台大全：2023年程式員接私活平台大全 和程式員接私活國外平台大全，再加上去年陸續也釋出了涉及各行各業适合接私活的合集開源項目(通路該連結檢視)：https://m.toutiao.com/is/kkqkSjW/ 相關文章。春節這個假期有部分粉絲私信小編組隊接私活的，有咨詢技術問題的，有繼續問有沒有優質的開源項目的，甚至還有粉絲說在小編推薦接私活平台大全裡面接了大項目需要國際化，同時需要相容多門語言，問小編有沒有 國際化i18n 開源庫推薦，借此機會，小編在加油的尋找相關的國際化開源庫，世上無難事，隻怕有心人，收集了一套非常全面的國際化i18n 開源庫，甚至有一套完整解決國際化i18n方案。
前後端技術日新月異，技術棧繁多。以前端架構來說有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等建構工具去滿足日常的開發工作。同時在日常的工作當中，不同的項目使用的技術棧也會不一樣。當需要對部分項目進行國際化改造時，由于技術棧的差異，這時你需要去尋找和目前項目使用的技術棧相比對的國際化的插件工具。比如:
- vue + vue-i18n
- angular + angular-translate
- react + react-intl
- jquery + jquery.i18n.property
等等，同時可能有些頁面沒有使用架構，或者完全是沒有進行工程化的靜态前端頁面。
為了減少由于不同技術棧所帶來的學習相關國際化插件的成本及開發過程中可能遇到的國際化坑，在嘗試着分析前端國際化所面臨的主要問題及相關的解決方案後，我覺得是可以使用更加通用的技術方案去完成國際化的工作。
今天小編給大家一起分享13個接私活必備的國際化i18n開源庫，希望對大家有多幫助，同時祝大家接私活接的越多，掙的盆滿缽滿。
創作不易，喜歡的老鐵們加個關注，點個贊，打個賞，後面會不定期更新幹貨和技術相關的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認可，更是創作的動力。
全文大綱
- i18next
- react-intl
- vue-i18n
- next-translate
- FBT
- Linguijs
- angular-translate
- jquery.i18n.property
- ngx-translate
- egg-i18n
- voerka-i18n
- kiwi
- MineAdmin-i18n
i18next
官網位址：https://www.i18next.com/
Github：https://github.com/i18next/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
- Jquery：https://github.com/i18next/jquery-i18next
- Angular：https://github.com/Romanchuk/angular-i18next/
如下圖：
i18next
react-i18next
i18next-vue
angular-i18next
deno-i18next
react-intl
官方位址：https://formatjs.io/
Github：https://github.com/formatjs/formatjs
react-intl 庫是FormatJS 國際化庫的一部分。它支援全球 150 多種語言。使用 react-intl 可以輕松處理标準區域設定，例如日期和時間、貨币和數字。此外，它還擁有遵循進階标準的豐富文檔，盡可能使用内置的浏覽器翻譯。Polyfill 選項可用于不支援 i18n 的 JavaScript API 的浏覽器。
React-intl 基于 JavaScript 的 React i18n API 建構，并提供改進的 API 群組件。當需要動态加載語言子產品時，react-intl 使用 React 上下文和提供翻譯的高階元件。
如下圖：
vue-i18n
官方位址：https://kazupon.github.io/vue-i18n/
Github：https://github.com/kazupon/vue-i18n
Vue I18n 是 Vue.js 的國際化插件。它可以輕松地将一些本地化功能內建到 Vue.js 應用中。vue-i18n 是Vue 項目中實作國際化的首選，該庫的作者 kazupon 是 Vue 團隊的核心成員。
在 vue-i18n 中，可以通過簡單的 API 将國際化引入應用中；除了簡單的翻譯，它還支援複數、數字、日期時間等本地化；除此之外，還可以在單個檔案元件上管理語言環境。
如下圖：
next-translate
Github：https://github.com/aralroca/next-translate
next-translate 的主要目标是在 Next.js 環境中保持翻譯盡可能簡單。它分為兩部分：Next.js 插件+ i18n API。next-translate 具有以下特性：
- 适用于自動頁面優化；
- 易于使用和配置；
- 基本的 i18n 支援：插值、複數、useTranslation hook、Trans 元件等；
- 它隻加載必要的翻譯（針對頁面和語言環境）；
- 小巧（~1kb）且可以 Tree-shaking，沒有依賴性。
如下圖：
FBT
官方網址：https://facebook.github.io/fbt/
Github：https://github.com/facebook/fbt
FBT是一個 JavaScript 國際化架構，它不僅功能強大、靈活，而且簡單直覺。它有助于組織翻譯源文本，編寫文法正确的可翻譯使用者界面。
如下圖：
Linguijs
官方網址：https://lingui.dev/
Github： https://github.com/lingui/js-lingui
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 要少。
如下圖：
angular-translate
官方網址：https://angular-translate.github.io/
Github： https://github.com/angular-translate/angular-translate
angular translate是一個AngularJS子產品，當涉及國際化i18n時，它就可以更加輕松幫你解決國際化問題，包括延遲加載和多元化。
如下圖：
jquery.i18n.property
Github： https://github.com/jquery-i18n-properties/jquery-i18n-properties
jQuery.i18n.properties是一個輕量級jQuery插件，用于從“.properties”檔案向javascript提供國際化，就像Java資源束中一樣。它根據提供的語言和國家代碼（ISO-639和ISO-3166）或浏覽器報告的語言加載和解析資源包（财産）。
資源束是包含特定于區域設定的鍵值對的“.properties”檔案。在Java和Javascript項目之間共享i18n檔案時，使用“properties”檔案進行翻譯特别有用。此插件首先加載預設檔案（例如，Messages.properties），然後加載特定于區域設定的檔案（Messages_pt.properties，然後是Messages_pt_BR.properties），以便在沒有提供翻譯時始終可以使用預設值。轉換鍵将作為javascript變量/函數（函數，如果轉換值包含替換（例如｛0｝）或映射）提供給開發人員。
如下圖：
ngx-translate
官方網址：http://www.ngx-translate.com/
線上示範：https://stackblitz.com/github/ngx-translate/example
Github： https://github.com/ngx-translate/core
NGX Translate是Angular的國際化庫。它允許您定義不同語言的内容翻譯，并輕松切換。檢視StackBlitz上的示範。
它允許您通路服務、指令和管道，以處理任何動态或靜态内容。
NGX翻譯也非常子產品化。它的編寫方式使得用自定義實作替換任何部分變得非常容易，以防現有的部分不符合您的需要。
如下圖：
egg-i18n
官方網址：https://www.eggjs.org/
Github： https://github.com/eggjs/egg-i18n
egg-i18n 可以為你的應用提供多語言的特性
功能
- 支援多種語言獨立配置，統一存放在 config/locale/*.js 下（ 相容 config/locales/*.js ）；
- 提供 Middleware 為 View 提供 \_\_, gettext 函數擷取多語言文案；
- 基于 URL 參數 locale 修改語言顯示，同時會記錄到 Cookie，下次請求會用 Cookie 裡面的語言方案。
如下圖：
voerka-i18n
官方網址：https://www.eggjs.org/
Gitee： https://gitee.com/zhangfisher/voerka-i18n
voerka-i18n 适用于Javascript/Vue/React/ReactNative的國際化解決方案
voerka-i18n 基于javascript的國際化方案很多，比較有名的有fbt、i18next、react-i18next、vue-i18n、react-intl等等，每一種解決方案均有大量的使用者。為什麼還要再造一個輪子？好吧，再造輪子的理由不外乎不滿足于現有方案，總想着現有方案的種種不足之處，然後就撸起袖子想造一個輪子。
那麼到底是對現有解決方案有什麼不滿？最主要有三點：
- 大部份均為要翻譯的文本資訊指定一個key，然後在源碼檔案中使用形如$t("message.login")之類的方式，然後在翻譯時将之轉換成最終的文本資訊。此方式最大的問題是，在源碼中必須人為地指定每一個key，在中文語境中，想為每一句中文均配套想一句符合語義的英文key是比較麻煩的，也很不直覺不符合直覺。我希望在源檔案中就直接使用中文，如t("中華人民共和國萬歲")，然後國際化架構應該能自動處理後續的一系列麻煩。
- 要能夠比較友好地支援多庫多包monorepo場景下的國際化協作，當主程式切換語言時，其他包或庫也可以自動切換，并且在開發上每個包或庫均可以獨立地進行開發，內建到主程式時能無縫內建。這點在現有方案上沒有找到比較理想的解決方案。
- 大部份國際化架構均将中文視為二等公民，大部份情況下您應該采用英文作為第一語言，雖然這不是太大的問題，但是既然要再造一個輪子，為什麼不将中文提升到一等公民呢。
基于此就開始打造VoerkaI18n國際化多語言解決方案，主要特性包括：
- 全面工程化解決方案，提供初始化、提取文本、自動翻譯、編譯等工具鍊支援。
- 符合直覺，不需要手動定義文本Key映射。
- 強大的插值變量格式化器機制，可以擴充出強大的多語言特性。
- 支援babel插件自動導入t翻譯函數。
- 支援nodejs、浏覽器(vue/react/solid)等、React Native等任意JS場景
- 采用工具鍊與運作時分開設計，釋出時隻需要內建很小的運作時。
- 高度可擴充的複數、貨币、數字等常用的多語言處理機制。
- 翻譯過程内，提取文本可以自動進行同步，并保留已翻譯的内容。
- 可以動态線上添加支援的語言
- 支援釋出後的線上打語言包更新檔，修複翻譯錯誤
- 支援調用線上自動翻譯對提取文本進行翻譯。
- 核心運作時@voerkai18n/runtime超過90%的測試覆寫率
- 支援TypeScript開發
如下圖：
kiwi
Gitee： https://github.com/Mrrabbitan/kiwi
Kiwi-國際化全流程解決方案
kiwi 不僅僅一個軟體國際化的代碼庫，而是國際化從設計到釋出的整個流程的一整套解決方案。
kiwi 整體基于 kiwi-intl 國際化架構，實作與架構無關的語言切換功能。
在開發過程中，使用 kiwi linter 實作中文文案的批量自動提取，同時針對替換後的文案變量，在 VS Code 中顯示對應的中文文案。當然你也可以全局搜尋中文文案，跳轉到對應的代碼，很好的解決了國際化過程中由于中文文案缺失造成的開發體驗問題。
在翻譯過程中，可以使用 kiwi 指令行自動提取未送翻詞彙，整理成 Excel 友善與翻譯同學協作。針對翻譯同學還沒有傳回翻譯文案的期間，可以使用 kiwi 内置的支援 google 以及 多種翻譯平台的自動翻譯腳本，先臨時翻譯成對應語言，節省文案調整時間。
國際化文案翻譯完成後，可以使用 kiwi 的指令行工具，一鍵導入到項目檔案内。
kiwi 還提供了對應 TSLint 的插件，使用 TSLint 在開發過程中實時提醒未抽離文案，以及在代碼送出的時候，攔截未國際化的代碼送出。
如下圖：
MineAdmin-i18n
官方網址：https://www.mineadmin.com/
Gitee： https://gitee.com/mineadmin/mineadmin-vue
MineAdmin Vue 是一個開源免費專門适配于 MineAdmin 背景權限管理系統的前端中背景模闆，使用了 vue3, vite3, pinia, arco design, javascript 等主流開發技術，未使用Typescript，我們選擇了簡單。
特性
- 最新技術棧：vue3, vite3, pinia
- UI庫：arco design
- 國際化：完善的多語言解決方案
- 權限：由于适配 MineAdmin 系統，内置完善的權限、動/靜态路由解決方案
- 主題：可擴充主題
- 布局：支援三種布局方式
- 元件：内置大量基于日常開發錘煉出的元件。
- 指令：封裝了常用指令，如權限控制、角色控制等
- CRUD表格系統：基于json方式配置，快速對接背景接口，實作增删改查
- FROM表單系統：基于json方式配置，快速搭建出想要的表單系統，快速完成需求。
如下圖：