Astro + Nx + Paraglide - i 모듈 만들기

다른 글에서도 말했듯이 저는 Astro.build를 배우고 있습니다.

Astro 및 Paraglide와의 통합에서 제가 마음에 들지 않는 점 중 하나는 모든 것을 /src 폴더에 보관하는 것입니다.

코드베이스가 큰 경우 향후 코드를 깔끔하게 관리하고 유지하는 것이 문제가 될 수 있습니다. 좋아요, Astro가 최종 번들에서 대규모 코드베이스를 매우 잘 관리할 수 있다는 것을 알고 있지만 개발자 경험은 모든 파일을 하나로 모으는 데 그리 좋지 않습니다.

저는 모노레포, 특히 Nx에 대해 잘 알고 있습니다. 다른 프로젝트, 크고 작은 프로젝트에서 작업했는데 Nx는 모듈/라이브러리로 분할하여 코드를 정리하는 데 정말 도움이 됩니다.

이 기사의 아이디어는 Astro를 Nx와 통합하고 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 Plugins에 대해 잘 알고 계시겠지만, 그렇지 않다면 소개해드리겠습니다.

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 구성에서 몇 가지 사항을 변경해야 합니다.

먼저 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

결국 다음과 같은 폴더 구조가 있습니다.

이제 생성된 모든 코드로 paragrlide 파일을 내보내야 합니다.

Paraglide는 2개의 폴더를 내보냅니다.

• message.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!