Astro + Nx + Paraglide - Mencipta modul i

Seperti yang saya beritahu dalam artikel saya yang lain ini, saya sedang belajar Astro.build.

Dan satu daripada perkara yang saya tidak suka dalam penyepaduan dengan Astro dan Paraglide ialah menyimpan semua perkara dalam folder /src.

Sekiranya anda mempunyai pangkalan kod yang besar, ini mungkin menjadi masalah untuk mengurus dan memastikan kod bersih pada masa hadapan. Okay, saya tahu Astro boleh mengurus pangkalan kod yang besar dengan baik dalam berkas terakhir, tetapi pengalaman pembangun tidak begitu baik untuk menyusun semua fail.

Saya sangat biasa dengan monorepos dan terutamanya dengan Nx, saya telah bekerja dalam projek lain, projek kecil dan sangat besar, dan Nx benar-benar membantu mengatur kod dengan membahagikan modul/libs.

Idea dalam artikel ini ialah berkongsi cara mengintegrasikan Astro dengan Nx dan mencipta modul i18n untuk memusatkan semua mesej dan perkara paraglide dalam satu modul.

Mencipta repo

Pertama sekali, kami perlu mencipta repositori permulaan kami.

Hanya untuk melangkau persediaan Astro dan Paraglide, saya akan bermula dari repositori artikel terakhir saya: https://github.com/alancpazetto/astro-i18n-dynamic

Jadi, untuk menggunakannya, hanya klon repositori, jalankan pemasangan dan mulakan projek:

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

Jika anda ingin bermula dari awal, anda boleh mengikuti artikel yang bagus ini:

• Membuat apl Astro
• Menambahkan Paraglide dalam Astro

Menambah Nx

Sebelum kita meneruskan modul 18n, kita perlu menyediakan Nx.

Ini mudah, Nx mempunyai arahan init yang membantu untuk init Nx ruang kerja dalam kod sedia ada, jadi jalankan ini:

npx nx@latest init

Apabila arahan Nx meminta skrip boleh cache, anda boleh memilih folder binaan dan persediaan ke ./dist (ia boleh ditukar pada masa hadapan)

Sila pilih mana-mana pilihan lain yang ditunjukkan arahan, ini tidak akan memberi kesan dalam tutorial ini.

Menambah modul i18n

Jika anda sudah menggunakan Nx, anda sudah biasa dengan Nx Plugins, tetapi jika tidak saya akan memperkenalkan anda.

Nx menggunakan seni bina pemalam, yang anda boleh tambah atau alih keluar pemalam untuk menambah atau mengalih keluar ciri dalam ruang kerja anda.

Pemalam ini boleh menambah penjana, pelaksana atau sebarang ciri Nx lain.

Dalam kes kami, kami perlu mencipta modul perpustakaan JS, jadi kami perlu pemalam pemalam JS, dipanggil @nx/js.

Anda boleh menemui semua Pemalam Nx di sini: https://nx.dev/plugin-registry

Jadi, mari pasang JS Plugin, dengan menjalankan arahan di bawah:

npm install -D @nx/js

Setelah dipasang, kami boleh menjana modul i18n kami.

Di sini saya ingin membuat cadangan, saya sangat suka menggunakan alat baris arahan, namun Nx mempunyai Sambungan VSCode yang bagus yang menjadikan semua penjana secara visual (terdapat ciri lain juga). Jadi saya sangat mengesyorkan untuk memasang ini.

Tetapi jika anda tidak mahu menggunakan sambungan atau tidak menggunakan VSCode, tiada masalah, kami boleh menjalankan ini dalam 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

Ini akan mencipta modul sebagai Perpustakaan JS menggunakan pemalam JS, di dalam laluan libs/i18n dengan laluan import @astro-nx-paraglide/i18n.

Anda boleh menukar kepada konfigurasi anda di sini.

Jika anda ingin menggunakan sambungan VSCode, buka palet arahan, cari Nx generate (ui) dan pilih @nx/js:library, tambah maklumat ini dalam tetingkap baharu:

Modul i18n mesyuarat

Modul baharu akan dibuat di dalam libs/i18n, dan pada asasnya ia adalah perpustakaan JS, dengan index.ts sebagai titik masuk dan folder lib yang boleh menambah semua kod perpustakaan.

Sediakan Paraglide kepada modul i18n

Untuk mengkonfigurasi Paraglide dalam modul i18n kami, kami perlu menukar beberapa perkara dalam konfigurasi Paraglide.

Pertama sekali, buka konfigurasi Astro anda (seperti astro.config.mjs) dan tukar integrasi paraglide di luar:

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

Ia akan menyediakan Astro + Paraglide untuk melihat ke dalam folder ini (dalam kod kami akan mengimport dengan cara lain).

Kita perlu menyediakan skrip package.json menukar dir output paraglide dalam masa binaan (skrip bina dan pascapasang):

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

Kini kita boleh menjalankan semula skrip pascapasang untuk menjana semula folder paraglide: npm run postinstall

Lagipun kami mempunyai struktur folder ini:

Kini kita perlu mengeksport ke semua fail paragrlide yang dijana kod.

Paraglide mengeksport 2 folder:

• messages.js: yang mengandungi semua fungsi mesej yang diterjemahkan
• runtime.js: yang mengandungi semua fungsi runtime, seperti bahasa yang ditetapkan

Jadi kita perlu mengedit titik masuk perpustakaan (index.ts) untuk mengeksport fail ini:

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.

Atas ialah kandungan terperinci Astro + Nx + Paraglide - Mencipta modul i. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!