Astro + Nx + Paraglide - 创建 i 模块

正如我在另一篇文章中所说，我正在学习 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（将来可能会更改）

随意选择命令显示的任何其他选项，这不会影响本教程。

添加 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，在新窗口中添加这些信息：

会议 i18n 模块

新模块将在 libs/i18n 中创建，基本上它是一个 JS 库，以 index.ts 作为入口点和 lib 文件夹，可以添加所有库代码。

将 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

毕竟我们有这个文件夹结构：

现在我们需要导出所有代码生成的 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中文网其他相关文章！