Astro + Nx + Paraglide - i モジュールの作成

他の記事でお話ししたように、私は Astro.build を学んでいます。

そして、Astro と Paraglide との統合で気に入らないことの 1 つは、すべてのものを /src フォルダーに保存することです。

大規模なコードベースがある場合、将来的にコードを管理してクリーンな状態に保つことが問題になる可能性があります。 Astro が最終バンドルの大規模なコードベースを非常にうまく管理できることはわかっていますが、開発者のエクスペリエンスはすべてのファイルをまとめるのにあまり適していません。

私はモノリポジトリ、特に Nx に精通しています。別のプロジェクト、小規模プロジェクトから非常に大規模なプロジェクトまで取り組んできました。Nx は、モジュール/ライブラリに分割することでコードを整理するのに非常に役立ちます。

この記事のアイデアは、Astro を Nx と統合し、すべてのメッセージを一元管理し、パラグライダーを 1 つのモジュールで行うための i18n モジュールを作成する方法を共有するです。

リポジトリの作成

まず最初に、開始リポジトリを作成する必要があります。

Astro と Paraglide のセットアップをスキップするために、前回の記事リポジトリから始めます: https://github.com/alancpazetto/astro-i18n-dynamic

したがって、これを使用するには、リポジトリのクローンを作成し、インストールを実行してプロジェクトを開始するだけです。

git clone https://github.com/alancpazetto/astro-i18n-dynamic
cd astro-i18n-dynamic
npm install
npm start

ゼロから始めたい場合は、次の素晴らしい記事を参照してください:

• Astro アプリの作成
• Astro にパラグライダーを追加する

Nx の追加

18n モジュールに進む前に、Nx をセットアップする必要があります。

これは簡単です。Nx には、既存のコードで Nx ワークスペースを初期化するのに役立つ init コマンドがあるため、これを実行するだけです:

npx nx@latest init

Nx コマンドがキャッシュ可能なスクリプトを要求する場合、ビルドとセットアップ フォルダーを ./dist に選択できます (将来変更される可能性があります)

コマンドが表示する他のオプションを自由に選択してください。これはこのチュートリアルには影響しません。

i18nモジュールの追加

すでに Nx を使用している場合は、Nx プラグインに精通していると思いますが、そうでない場合は、私が紹介します。

Nx はプラグイン アーキテクチャを使用しており、プラグインを追加または削除してワークスペース内の機能を追加または削除できます。

これらのプラグインは、ジェネレーター、エグゼキューター、またはその他の Nx 機能を追加できます。

私たちの場合、JS ライブラリ モジュールを作成する必要があるため、@nx/js という JS プラグインを プラグイン する必要があります。

すべての Nx プラグインはここで見つけることができます: https://nx.dev/plugin-registry

それでは、以下のコマンドを実行して JS プラグインをインストールしましょう:

npm install -D @nx/js

インストールすると、i18n モジュールを生成できます。

ここでお勧めしたいのですが、私はコマンド ライン ツールを使用するのが大好きですが、Nx にはすべてのジェネレーターを視覚的に作成する優れた VSCode 拡張機能があります (他の機能もあります)。したがって、これをインストールすることを強くお勧めします。

ただし、拡張機能を使用したくない場合、または VSCode を使用しない場合でも問題ありません。これをターミナルで実行できます。

npx nx generate @nx/js:library --name=i18n --bundler=swc --directory=libs/i18n --importPath=@astro-nx-paraglide/i18n --projectNameAndRootFormat=as-provided --unitTestRunner=none --no-interactive

これにより、インポート パス @astro-nx-paraglide/i18n を持つ libs/i18n パス内に、JS プラグインを使用してモジュールが JS ライブラリとして作成されます。

ここで設定を変更できます。

VSCode 拡張機能を使用する場合は、コマンド パレットを開き、Nx Generate (ui) を検索して @nx/js:library を選択し、新しいウィンドウで次の情報を追加します。

会議 i18n モジュール

新しいモジュールは libs/i18n 内に作成され、基本的には JS ライブラリであり、エントリポイントとしての Index.ts と、すべてのライブラリ コードを追加できる lib フォルダーを備えています。

Paraglide を i18n モジュールにセットアップする

i18n モジュールで Paraglide を設定するには、Paraglide config のいくつかを変更する必要があります。

まず、Astro 設定 (astro.config.mjs など) を開き、パラグライド統合の出力ディレクトリを変更します。

import { defineConfig } from 'astro/config';
import paraglide from '@inlang/paraglide-astro';

export default defineConfig({
  // Use astro's i18n routing for deciding which language to use
  i18n: {
    locales: ['en', 'pt-br'],
    defaultLocale: 'en',
  },
  output: 'server',
  integrations: [
    paraglide({
      // recommended settings
      project: './project.inlang',
      outdir: './libs/i18n/src/paraglide', // <=== HERE
    }),
  ],
});

このフォルダー内を調べるように Astro + Paraglide をセットアップします (コードでは他の方法でインポートします)。

ビルド時に paraglide の出力ディレクトリを変更する package.json スクリプトをセットアップする必要があります (ビルドおよびポストインストール スクリプト):

{
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "paraglide-js compile --project ./project.inlang --outdir ./libs/i18n/src/paraglide && astro check && astro build",
    "preview": "astro preview",
    "astro": "astro",
    "postinstall": "paraglide-js compile --project ./project.inlang --outdir ./libs/i18n/src/paraglide"
  },
}

これで、postinstall スクリプトを再実行して paraglide フォルダーを再生成できます: npm run postinstall

結局、次のようなフォルダー構造になっています:

次に、コード生成されたすべてのパラグライド ファイルにエクスポートする必要があります。

Paraglide は 2 つのフォルダーをエクスポートします:

• messages.js: すべての翻訳されたメッセージ関数が含まれています
• runtime.js: 設定されている言語など、すべてのランタイム関数が含まれています

したがって、これらのファイルをエクスポートするには、ライブラリ エントリポイント (index.ts) を編集する必要があります。

export * as messages from './paraglide/messages';
export * as runtime from './paraglide/runtime';

Note: By default Nx setup project "verbatimModuleSyntax": true in tsconfig.json and it cause an erro in i18n module, but you can configure your library tsconfig.json to disable this by editing libs/i18n/tsconfig.json adding "verbatimModuleSyntax": false inside compilerOptions.

By now, we don't need libs/i18n/src/lib folder anymore, just delete it.

Integration Astro app with i18n module

Now it's time to integrate all our code.

If you check ./tsconfig.json, a new compilerOptions.path was added by Nx with importPath informed previously appoint to our library entrypoint.

Note: if you get an import error here, you need to setup compilerOptions.baseUrl to ./.

So to integrate our code with module we'll use this import path in our code:

import { messages, runtime } from '@astro-nx-paraglide/i18n';

In our application files, inside src we need to change all imports from ../paraglide/messages (or runtime) to new import path.

For example in src/components/LanguagePicker.astro:

---
import * as m from '../paraglide/messages';
- import { languageTag } from '../paraglide/runtime';
+ import { runtime } from '@astro-nx-paraglide/i18n';

- const makeUrlForLanguage = (lang: string) => `/${lang}${Astro.url.pathname.replace(`/${languageTag()}`, '')}`;
+ const makeUrlForLanguage = (lang: string) => `/${lang}${Astro.url.pathname.replace(`/${runtime.languageTag()}`, '')}`;
---

And inside our pages, like src/pages/index.astro:

---
import Layout from '../layouts/Layout.astro';
- import * as m from '../paraglide/messages';
- import { languageTag } from '../paraglide/runtime';
+ import { messages as m, runtime } from '@astro-nx-paraglide/i18n';
---

<Layout title={m.homePageTitle()}>
  <h1>{m.homePageHeading()}</h1>
-  <p>{m.homePageContent({ languageTag: languageTag() })}</p>
+  <p>{m.homePageContent({ languageTag: runtime.languageTag() })}</p>
</Layout>

Cleanning src folder

As module was setted and all imports changed, we can delete the src/paraglide folder, as we don't use it anymore.

Example repository

Here is the example repository: https://github.com/alancpazetto/astro-nx-paraglide

Just clone repository, run install and start project:

git clone https://github.com/alancpazetto/astro-nx-paraglide
cd astro-nx-paraglide
npm install
npm start

Thanks to read and don't forget to give a heat in this article if you like and leave a comment.

以上がAstro + Nx + Paraglide - i モジュールの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。