Astro + Nx + Paraglide - Création du module i

Comme je l'ai dit dans cet autre article, j'apprends Astro.build.

Et une des choses que je n'aime pas dans l'intégration avec Astro et Paraglide est de garder tout dans le dossier /src.

Dans le cas où vous disposez d'une grande base de code, cela pourrait être un problème de gérer et de maintenir le code propre à l'avenir. D'accord, je sais qu'Astro peut très bien gérer une base de code volumineuse dans le bundle final, mais l'expérience du développeur n'est pas très bonne pour rassembler tous les fichiers.

Je connais très bien les monorepos et spécialement Nx, j'ai travaillé sur d'autres projets, des petits et très grands projets, et Nx aide vraiment à organiser le code en le divisant en modules/libs.

L'idée dans cet article est de partager comment intégrer Astro à Nx et de créer un module i18n pour centraliser tous les messages et les choses du parapente dans un seul module.

Création d'un dépôt

Tout d'abord, nous devons créer notre référentiel de démarrage.

Juste pour ignorer la configuration d'Astro et Paraglide, je vais partir de mon dernier référentiel d'articles : https://github.com/alancpazetto/astro-i18n-dynamic

Donc, pour l'utiliser, clonez simplement le référentiel, exécutez l'installation et démarrez le projet :

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

Si vous souhaitez repartir de zéro, vous pouvez suivre ces sympathiques articles :

• Création de l'application Astro
• Ajout du parapente dans Astro

Ajout de Nx

Avant de passer au module 18n, nous devons configurer Nx.

C'est simple, Nx a la commande init qui permet d'initialiser l'espace de travail Nx dans un code existant, alors exécutez simplement ceci :

npx nx@latest init

Lorsque la commande Nx demande un script pouvant être mis en cache, vous pouvez sélectionner le dossier de construction et de configuration dans ./dist (il pourrait être modifié à l'avenir)

N'hésitez pas à sélectionner toute autre option affichée par la commande, cela n'aura aucun impact sur ce tutoriel.

Ajout du module i18n

Si vous utilisez déjà Nx, vous connaissez les plugins Nx, mais sinon je vais vous les présenter.

Nx utilise une architecture de plugin, dans laquelle vous pouvez ajouter ou supprimer un plugin pour ajouter ou supprimer des fonctionnalités dans votre espace de travail.

Ces plugins peuvent ajouter des générateurs, des exécuteurs ou toute autre fonctionnalité Nx.

Dans notre cas, nous devons créer un module de bibliothèque JS, nous aurons donc besoin de plugin plugin JS, appelé @nx/js.

Vous pouvez trouver tous les plugins Nx ici : https://nx.dev/plugin-registry

Alors, installons le plugin JS, en exécutant la commande ci-dessous :

npm install -D @nx/js

Une fois installé, nous pouvons générer notre module i18n.

Ici, je voudrais faire une recommandation, j'aime vraiment utiliser les outils de ligne de commande, mais Nx a une belle extension VSCode qui rend visuellement tous les générateurs (il existe également d'autres fonctionnalités). Je recommande donc fortement de l'installer.

Mais si vous ne souhaitez pas utiliser d'extension ou n'utilisez pas VSCode, pas de problème, nous pouvons exécuter ceci dans le terminal :

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

Cela créera un module en tant que bibliothèque JS à l'aide du plugin JS, dans le chemin libs/i18n avec le chemin d'importation @astro-nx-paraglide/i18n.

Vous pouvez modifier vos configurations ici.

Si vous souhaitez utiliser l'extension VSCode, ouvrez la palette de commandes, recherchez Nx generate (ui) et sélectionnez @nx/js:library, ajoutez ces informations dans une nouvelle fenêtre :

Module Réunion i18n

Un nouveau module sera créé dans libs/i18n, et fondamentalement, c'est une bibliothèque JS, avec index.ts comme point d'entrée et un dossier lib qui pourrait ajouter tout le code de la bibliothèque.

Configurer le parapente sur le module i18n

Pour configurer Paraglide dans notre module i18n, nous devons modifier certaines choses dans la configuration Paraglide.

Tout d'abord, ouvrez votre config Astro (comme astro.config.mjs) et changez le répertoire externe d'intégration du parapente :

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
    }),
  ],
});

Il configurera Astro + Paraglide pour qu'il regarde à l'intérieur de ce dossier (dans le code, nous importerons d'une autre manière).

Nous devons configurer les scripts package.json en modifiant le répertoire de sortie du parapente au moment de la construction (script de construction et de post-installation) :

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

Maintenant, nous pouvons réexécuter le script postinstall pour régénérer le dossier parapente : npm run postinstall

Après tout, nous avons cette structure de dossiers :

Nous devons maintenant exporter vers tous les fichiers paragrlide générés par le code.

Paraglide exporte 2 dossiers :

• messages.js : qui contient toutes les fonctions de message traduites
• runtime.js : qui contient toutes les fonctions d'exécution, comme la langue définie

Nous devons donc éditer le point d'entrée de la bibliothèque (index.ts) pour exporter ces fichiers :

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!