lingui/js-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.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")}