lingui/js-lingui

Lingui js

Linguiは、JavaScriptとTypeScript向けの軽量でオープンソースの国際化(i18n)ライブラリです。React、React Native、Vue、SolidJS、Astro、Svelte、Node.js向けにコンパイルタイムマクロとメッセージ抽出用のCLIを提供します。

約2 kBのgzippedコア ·月6M+ npmダウンロード数 ·MITライセンス

![メインスイート][バッジ-メインスイート-GitHubCI] ![リリースワークフローテスト][バッジリリースワークフローテスト-GitHubCI]

[ドキュメント][ドキュメント]·クイックスタート ·**なぜLingui ·サポート ·貢献****ライセンス

クイックスタート

Linguiマクロはビルド時に動作するので、トランスパイラ用のマクロプラグインを追加し、lingui.config.jsを作成してください。インストールガイドは両方を数分でカバーします。

次に翻訳したいテキストをTransマクロでラップします。メッセージIDを発明したり、同期を保つための別々のJSONファイルはありません。

メッセージをPOカタログに抽出し、翻訳し、最適化された実行時出力にコンパイルします:

翻訳後、src/locales/cs/messages.poのチェコ語カタログは次のようになります。 タグは 要素を表しているため、翻訳者はマークアップに手をつけません:

Quick Start

npm install @lingui/core @lingui/react
npm install --save-dev @lingui/cli

Lingui macros run at build time, so add the macro plugin for your transpiler and create a lingui.config.js. The installation guide covers both in a few minutes.

Then wrap the text you want to translate in the Trans macro. There are no message IDs to invent and no separate JSON file to keep in sync:

import { i18n } from "@lingui/core"
import { I18nProvider } from "@lingui/react"
import { Trans } from "@lingui/react/macro"
import { messages } from "./locales/en/messages"

i18n.load("en", messages)
i18n.activate("en")

export function App() {
  return (
    
      
        Read the documentation for more info.
      
    
  )
}

Extract the messages into PO catalogs, translate them, then compile the catalogs into optimized runtime output:

npx lingui extract
npx lingui compile

After translation, the Czech catalog in src/locales/cs/messages.po looks like this. The tag stands for the element, so translators never touch your markup:

#: src/App.jsx:12
msgid "Read the documentation for more info."
msgstr "Přečtěte si dokumentaci pro více informací."

Continue with the React tutorial, or jump to React Server Components, React Native, SolidJS, Vue, or plain JavaScript. Working projects for Vite, Next.js, Remix, TanStack Start, React Native and more live in the examples directory.

Why Lingui

In key-based i18n libraries you invent a key, put the text in a JSON file, and reference the key from the code. With Lingui, the text stays where it is read:

// Key-based i18n: the code holds a key, the text lives somewhere else
{t("dashboard.welcome.title")}