首頁 > web前端 > js教程 > Astro + Nx + Paraglide - 建立 i 模組

Astro + Nx + Paraglide - 建立 i 模組

WBOY
發布: 2024-08-22 18:44:32
原創
1170 人瀏覽過

正如我在另一篇文章中所說,我正在學習 Astro.build。

在與 Astro 和 Paraglide 整合中我不喜歡的一件事是將所有內容保留在 /src 資料夾中。

如果您有一個龐大的程式碼庫,未來管理和保持程式碼整潔可能會出現問題。好的,我知道 Astro 可以很好地管理最終捆綁包中的大型程式碼庫,但開發人員在將所有文件放在一起時的體驗不太好。

我非常熟悉 monorepos,特別是 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 有 init 指令可以幫助在現有程式碼中初始化 Nx 工作區,所以只需執行這個:

npx nx@latest init
登入後複製

當 Nx 指令要求可快取腳本時,您可以選擇建置和設定資料夾到 ./dist(將來可能會變更)

Astro + Nx + Paraglide - Creating i module

隨意選擇命令顯示的任何其他選項,這不會影響本教學。

新增 i18n 模組

如果您已經使用過 Nx,那麼您對 Nx 插件很熟悉,但如果沒有,我會向您介紹。

Nx 使用外掛架構,您可以新增或刪除外掛程式來新增或刪除工作區中的功能。

這些外掛程式可以新增生成器、執行器或任何其他 Nx 功能。

在我們的例子中,我們需要建立一個 JS 函式庫模組,因此我們需要插件 JS 插件,名為 @nx/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
登入後複製

這將使用 JS 插件建立一個模組作為 JS 庫,位於 libs/i18n 路徑內,導入路徑為 @astro-nx-paraglide/i18n。

您可以在這裡更改您的配置。

如果你想使用 VSCode 擴展,打開命令面板,搜尋 Nxgenerate (ui) 並選擇 @nx/js:library,在新視窗中加入這些資訊:

Astro + Nx + Paraglide - Creating i module

會議 i18n 模組

新模組將在 libs/i18n 中創建,基本上它是一個 JS 庫,以 index.ts 作為入口點和 lib 資料夾,可以添加所有庫代碼。

Astro + Nx + Paraglide - Creating i module

將 Paraglide 設定為 i18n 模組

要在 i18n 模組中配置 Paraglide,我們需要更改 Paraglide 配置中的一些內容。

首先,打開你的 Astro 設定(如 astro.config.mjs)並更改 paraglide 整合 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 來查看此資料夾內部(在程式碼中我們將以其他方式匯入)。

我們需要設定 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

畢竟我們有這個資料夾結構:

Astro + Nx + Paraglide - Creating i module

現在我們需要匯出所有程式碼產生的 paragrlide 檔案。

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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板