Astro + Nx + Paraglide – Erstellen eines i-Moduls

Wie ich in diesem anderen Artikel erzählt habe, lerne ich Astro.build.

Und eines der Dinge, die mir an der Integration mit Astro und Paraglide nicht gefallen, ist, dass alle Dinge im Ordner /src bleiben.

Falls Sie über eine große Codebasis verfügen, könnte es in Zukunft ein Problem sein, den Code zu verwalten und sauber zu halten. Okay, ich weiß, dass Astro im endgültigen Bundle eine große Codebasis sehr gut verwalten kann, aber die Entwicklererfahrung ist nicht sehr gut, alle Dateien zusammenzufügen.

Ich bin sehr vertraut mit Monorepos und insbesondere mit Nx, ich habe in anderen Projekten gearbeitet, kleinen und sehr großen Projekten, und Nx hilft wirklich dabei, Code durch die Aufteilung in Module/Bibliotheken zu organisieren.

Die Idee in diesem Artikel besteht darin, zu zeigen, wie man Astro mit Nx integriert und ein i18n-Modul erstellt, um alle Nachrichten und Gleitschirmdinge in einem Modul zu zentralisieren.

Repo erstellen

Zuerst müssen wir unser Start-Repository erstellen.

Um die Astro- und Paraglide-Einrichtung zu überspringen, beginne ich mit meinem letzten Artikel-Repository: https://github.com/alancpazetto/astro-i18n-dynamic

Um es zu verwenden, klonen Sie einfach das Repository, führen Sie die Installation aus und starten Sie das Projekt:

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

Wenn Sie bei Null anfangen möchten, können Sie diesen schönen Artikeln folgen:

• Astro-App erstellen
• Gleitschirm in Astro hinzufügen

Nx hinzufügen

Bevor wir mit dem 18n-Modul fortfahren, müssen wir Nx einrichten.

Das ist ganz einfach: Nx verfügt über den Befehl „init“, der dabei hilft, den Nx-Arbeitsbereich in einem vorhandenen Code zu initiieren. Führen Sie also einfach Folgendes aus:

npx nx@latest init

Wenn der Nx-Befehl nach einem zwischenspeicherbaren Skript fragt, können Sie den Build- und Setup-Ordner als ./dist auswählen (dies könnte in Zukunft geändert werden)

Fühlen Sie sich frei, eine andere Option auszuwählen, die den Befehl „show“ enthält. Dies hat keine Auswirkungen auf dieses Tutorial.

i18n-Modul hinzufügen

Wenn Sie Nx bereits verwenden, sind Sie mit den Nx-Plugins vertraut, aber wenn nicht, werde ich Sie vorstellen.

Nx verwendet eine Plugin-Architektur, mit der Sie ein Plugin hinzufügen oder entfernen können, um Funktionen in Ihrem Arbeitsbereich hinzuzufügen oder zu entfernen.

Diese Plugins können Generatoren, Executoren oder jede andere Nx-Funktion hinzufügen.

In unserem Fall müssen wir ein JS-Bibliotheksmodul erstellen, also müssen wir ein Plugin JS-Plugin namens @nx/js

Alle Nx-Plugins finden Sie hier: https://nx.dev/plugin-registry

Also installieren wir das JS-Plugin, indem wir den folgenden Befehl ausführen:

npm install -D @nx/js

Nach der Installation können wir unser i18n-Modul generieren.

Hier möchte ich eine Empfehlung aussprechen, ich verwende wirklich gerne Befehlszeilentools, Nx hat jedoch eine nette VSCode-Erweiterung, die alle Generatoren visuell macht (es gibt auch andere Funktionen). Daher empfehle ich dringend, dies zu installieren.

Aber wenn Sie keine Erweiterung oder keinen VSCode verwenden möchten, ist das kein Problem, wir können dies im Terminal ausführen:

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

Dadurch wird ein Modul als JS-Bibliothek mit dem JS-Plugin im Pfad libs/i18n mit dem Importpfad @astro-nx-paraglide/i18n erstellt.

Hier können Sie Ihre Konfigurationen ändern.

Wenn Sie die VSCode-Erweiterung verwenden möchten, öffnen Sie die Befehlspalette, suchen Sie nach Nx generic (ui) und wählen Sie @nx/js:library aus. Fügen Sie diese Informationen in einem neuen Fenster hinzu:

Treffen mit dem i18n-Modul

Neues Modul wird in libs/i18n erstellt und ist im Grunde eine JS-Bibliothek mit index.ts als Einstiegspunkt und lib-Ordner, der den gesamten Bibliothekscode hinzufügen könnte.

Richten Sie Paraglide auf das i18n-Modul ein

Um Paraglide in unserem i18n-Modul zu konfigurieren, müssen wir einige Dinge in der Paraglide-Konfiguration ändern.

Öffnen Sie zunächst Ihre Astro-Konfiguration (wie astro.config.mjs) und ändern Sie die Paraglide-Integration outdir:

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 wird so eingerichtet, dass es in diesen Ordner schaut (den Code importieren wir auf andere Weise).

Wir müssen package.json-Skripte einrichten, die das Paraglide-Ausgabeverzeichnis in der Build-Zeit ändern (Build- und Postinstall-Skript):

{
  "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"
  },
}

Jetzt können wir das Postinstall-Skript erneut ausführen, um den Paraglide-Ordner neu zu generieren: npm run postinstall

Immerhin haben wir diese Ordnerstruktur:

Jetzt müssen wir alle vom Code generierten Paragrlide-Dateien exportieren.

Paraglide exportiert 2 Ordner:

• message.js: enthält alle übersetzten Nachrichtenfunktionen
• runtime.js: Enthält alle Laufzeitfunktionen, z. B. welche Sprache eingestellt ist

Wir müssen also den Bibliothekseinstiegspunkt (index.ts) bearbeiten, um diese Dateien zu exportieren:

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.

Das obige ist der detaillierte Inhalt vonAstro + Nx + Paraglide – Erstellen eines i-Moduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!