プレーンな JS/TS でのセットアップ

素の .js、.ts、.jsx、.tsx ファイルでは、ビルド変換に unplugin-lingui-macro を組み合わせた @lingui/core/macro を使い、抽出には @lingui/cli/api/extractors/babel を使います。

これは .svelte.js と .svelte.ts にも当てはまります。これらは Svelte 構文変換ではなく、素の JS / TS 用パイプラインを通ります。

インストール

vp add -D unplugin-lingui-macro

npm install -D unplugin-lingui-macro

pnpm add -D unplugin-lingui-macro

yarn add -D unplugin-lingui-macro

抽出とカタログのコンパイルには @lingui/cli と @lingui/conf が必要です。フレームワーク向けの入門ガイドをすでに進めているなら、これらはインストール済みです。

ビルド変換を設定する

Vite のプラグインに linguiMacro() を追加します。フレームワークプロジェクトでは、フレームワークプラグインより前に置いてください。

import linguiMacro from "unplugin-lingui-macro/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    linguiMacro(),
    // sveltekit(), svelte(), など
  ],
});

Astro では、astro.config.ts の vite.plugins に追加します。

抽出処理を設定する

lingui.config.ts に Babel エクストラクタを追加します。フレームワークプロジェクトでは、そのフレームワークの defineConfig ヘルパーを使い続け、両方のエクストラクタを並べて指定します。

Svelte
Astro

import babelExtractor from "@lingui/cli/api/extractors/babel";
import { defineConfig } from "lingui-for-svelte/config";
import { svelteExtractor } from "lingui-for-svelte/extractor";

export default defineConfig({
  locales: ["en", "ja"],
  sourceLocale: "en",
  catalogs: [{ path: "src/lib/i18n/locales/{locale}" }],
  extractors: [svelteExtractor, babelExtractor],
});

import babelExtractor from "@lingui/cli/api/extractors/babel";
import { defineConfig } from "lingui-for-astro/config";
import { astroExtractor } from "lingui-for-astro/extractor";

export default defineConfig({
  locales: ["en", "ja"],
  sourceLocale: "en",
  catalogs: [{ path: "src/lib/i18n/locales/{locale}" }],
  extractors: [astroExtractor, babelExtractor],
});

翻訳済み文字列ではなく、メッセージ記述子を定義する

素の JS / TS では、t や plural は Svelte や Astro 側で setLinguiContext によって登録されたインスタンスではなく、@lingui/core のグローバルな i18n インスタンスを通して解決されます。フレームワークアプリでこのグローバルインスタンスを設定していない場合、.ts ファイル内で t を直接呼ぶと失敗するか、誤ったロケールで翻訳される可能性があります。

推奨される方法は、msg または defineMessage で メッセージ記述子 を定義し、i18n コンテキストが使えるフレームワークコード側で翻訳することです。これは Lingui の Lazy Translations パターンに沿っています。

import { defineMessage, msg } from "@lingui/core/macro";

// ここでは記述子だけを定義し、翻訳は行わない
export const labels = {
  greeting: msg`Hello`,
  submit: msg`Submit`,
} as const;

export const welcomeMessage = defineMessage({
  id: "welcome",
  message: "Welcome back",
});

その後、コンテキストが設定されたフレームワークコード側で記述子を翻訳します。

<script lang="ts">
  import { t } from "lingui-for-svelte/macro";
  import { labels } from "./labels";
</script>

<p>{$t(labels.greeting)}</p>
<button>{$t(labels.submit)}</button>

---
import { t } from "lingui-for-astro/macro";
import { labels } from "../lib/labels";
---

<p>{t(labels.greeting)}</p>

さらに詳しいパターンはファイルをまたいでメッセージを共有する、記述子 API 全体については msg と defineMessage を参照してください。