正如我在另一篇文章中所說，我正在學習 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
如果您想從頭開始，可以關注這些不錯的文章：
在繼續 18n 模組之前，我們需要設定 Nx。
這很簡單，Nx 有 init 指令可以幫助在現有程式碼中初始化 Nx 工作區，所以只需執行這個：
npx nx@latest init
當 Nx 指令要求可快取腳本時，您可以選擇建置和設定資料夾到 ./dist（將來可能會變更）
隨意選擇命令顯示的任何其他選項，這不會影響本教學。
如果您已經使用過 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，在新視窗中加入這些資訊：
新模組將在 libs/i18n 中創建，基本上它是一個 JS 庫，以 index.ts 作為入口點和 lib 資料夾，可以添加所有庫代碼。
要在 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
畢竟我們有這個資料夾結構：
現在我們需要匯出所有程式碼產生的 paragrlide 檔案。
Paraglide 匯出 2 個資料夾：
因此我們需要編輯庫入口點（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.
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>
As module was setted and all imports changed, we can delete the src/paraglide folder, as we don't use it anymore.
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中文網其他相關文章！
