はじめる

インストール

Svelte Kit アプリに依存パッケージとして svelte-intl-precompile をインストールします。

  
npm install svelte-intl-precompile

翻訳を作成する

次に、翻訳ファイルを格納するフォルダを作成します。 /messages や /locales といった名前のフォルダをプロジェクトルートに置くと良いでしょう もちろん、他のフォルダでもまったく問題ありません。

  
├── locales
│   ├── en.json
│   ├── es.json
├── src
...
├── static
├── package.json
└── svelte.config.js

JSON形式のファイルを推奨しますが、デフォルトエクスポートを持つJavaScriptファイルを使うこともできます。ファイル形式がどちらの場合でも、それらに含まれる翻訳はICUメッセージ文法の通常の文字列となります。

  
{
	"recent.aria": "Find recently viewed tides",
	"menu": "Menu",
	"foot": "{count} {count, plural, =1 {foot} other {feet}}",
}

作者は上記のようなフラットな辞書構造が好みですが、複数の階層を含む辞書構造を使って翻訳ファイルを定義しても構いません:

  
{
	"placeholders": {
		"fullname": "John Smith",
		"street-name": "13 Elm Street",
		"subject": "Re: Hello"
	},
	"welcome-hero": "Welcome to Goliath Bank!",
}

JSON は制約が多すぎる!もっと柔軟性がほしい!

json ファイルでは JSON 5 の機能を使用することもできます。つまり、コメント、複数行の文字列、シングルクォート、末尾のカンマ...
すぐにお使いいただけます。

中括弧が好きじゃない

気持ちはわかります。もし大量の空白がお好みでしたら、YAML ファイルを使うこともできます。.yaml や .yml という拡張子を使用すればよいのです。そのようなことをしたいのであれば。

もっと多くの機能が欲しい

.js ファイル、.ts ファイル、.mjs ファイルに翻訳文を定義することもできます。翻訳文を含むオブジェクトを default export でエクスポートする必要があります。

コンパイラを SvelteKit にフックする

このライブラリのコンパイラはビルド時に動作するため、開発中のアプリのビルドパイプラインにフックする必要があります。/svelte.config.jsの vite プラグインのリストに追加してください:

  
import precompileIntl from "svelte-intl-precompile/sveltekit-plugin";

const config = {
	kit: {
		target: '#svelte',
		vite: {
			plugins: [
				precompileIntl('locales') // if your translations are defined in /locales/[lang].json
			]			
		}		
	}
};

export default config;

準備は完了です。ライブラリを使ってみましょう。

Vite.js プロジェクトにコンパイラをフックする

SvelteKit を使わずに Vite.js を直接使用している場合も、設定はほとんど同様です。 SvelteKit が舞台裏では Vite.js を使用してるためです。コンパイラをインポートして、/vite.config.jsのプラグインのリストに渡してください:

  
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import precompileIntl from "svelte-intl-precompile/sveltekit-plugin";

export default defineConfig({
  resolve: {
    dedupe: ["svelte"]
  },
  plugins: [
    svelte(),
    precompileIntl("locales"),
  ],
});