如何使用 Vite、Cloudflare、Remix、PNPM 和 Turborepo 创建 Monorepo（无构建步骤）

介绍

我需要一种以最少的配置将 Remix 与 Vite 和 Cloudflare Workers-Pages 结合使用的方法。

我看到了其他存储库，例如：

• 福音栈，
• Girish21 ，
• 喜森繁。

但它们也有一些局限性：

1. 我不想预先构建它，因为我不想用更多的配置文件毒害存储库。

   
   

2. Cloudflare Workers/Pages 具有不同的目标。使用 tsup 将其作为目标变得很棘手，因为 Postgres 等软件包在导入 Remix 时会破坏节点依赖关系。

   
   

3. 我还需要一种方法来使用不同的目标（Remix-Cloudflare、Node/Bun）

尽管如此，我还是要感谢他们，因为他们为实现这一目标铺平了道路！

请务必阅读底部的陷阱部分！

在社交媒体上关注我！

我正在公开构建一个自动化测试平台，以捕捉生产中出现的那 1% 的错误。

我分享我的进展：

X/Twitter@javiasilis

LinkedIn @javiasilis

GitHub 存储库

您可以在此处访问完整的实施。

一步步

要求

1. NodeJS
2. 全国公共管理委员会
3. Docker（可选 - 用于本地数据库示例）

尽管这将引导您完成一个新的单一存储库，但将现有的存储库转换为一个单一存储库也是完全有效的。

这也假设您具有一些 Mono Repo 知识。

笔记：

• “at root” 指的是 monorepository 的起始路径。对于此项目，它将位于libs和packages目录之外。

安装 Turborepo

Turborepo 在您的包管理器工作区之上工作，以管理项目的脚本和输出（它甚至可以缓存您的输出）。到目前为止，它是除了 Rush（我没有尝试过并且不喜欢）之外唯一能够工作的 mono-repo 工具。

NX 不支持 Remix 的 Vite（截至撰写本文时 - 2024 年 8 月 28 日）。

https://turbo.build/

 pnpm dlx create-turbo@latest

1.配置 PNPM 工作区

我们将使用 PNPM 的工作区功能来管理依赖关系。

在您的 Monorepo 目录中，创建一个pnpm-workspace.yaml 。

在其中添加：

 packages: - "apps/*" - "libs/*"

这将告诉 pnpm 所有存储库都位于apps和libs中。请注意，使用libs或packages （您可能在其他地方看到过）并不重要。

2. 在项目根目录创建一个空的 package.json：

 pnpm init

 { "name": "@repo/main", "version": "1.0.0", "scripts": {}, "keywords": [], "author": "", "license": "ISC" }

注意name:@repo/main这告诉我们这是应用程序的主入口。您不需要遵循特定的约定或使用@前缀。人们使用它来将其与本地/远程包区分开来，或者使其易于将其分组到组织中。

3.在项目根目录中创建turbo.json文件：

 { "$schema": "https://turbo.build/schema.json", "tasks": { "build": {}, "dev": { "cache": false, "persistent": true }, "start": { "dependsOn": ["^build"], "persistent": true }, "preview": { "cache": false, "persistent": true }, "db:migrate": {} } }

turbo.json 文件告诉 turbo repo 如何解释tasks的命令。tasks 键内的所有内容都将与 all package.json 中找到的内容匹配。

请注意，我们定义了四个命令。这些命令与每个存储库的 package.json 的脚本部分中的命令相匹配。但是，并非所有 package.json 都必须实现这些命令。

例如： dev命令将由turbo dev触发，它将执行 package.json 中找到的所有dev包。如果你没有在 turbo 中包含它，它将不会执行。

4. 在项目根目录中创建一个apps文件夹

mkdir apps

5. 在apps文件夹中创建 Remix 应用程序（或移动现有应用程序）

 npx create-remix --template edmundhung/remix-worker-template

当它要求您Install any dependencies with npm时，请说“不”。

6. 将 package.json 的name重命名为@repo/my-remix-cloudflare-app （或您的姓名）

 { - "name": "my-remix-cloudflare-app", + "name": "@repo/my-remix-cloudflare-app", "version": "1.0.0", "keywords": [], "author": "", "license": "ISC" }

7. 将依赖项和 devDependencies 从apps/<app>/package.json复制到 Root 的package.json

例如：

<根目录>/package.json

 { "name": "@repo/main", "version": "1.0.0", "scripts": {}, "keywords": [], "author": "", "license": "ISC", "dependencies": { "@markdoc/markdoc": "^0.4.0", "@remix-run/cloudflare": "^2.8.1", "@remix-run/cloudflare-pages": "^2.8.1", "@remix-run/react": "^2.8.1", "isbot": "^3.6.5", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@cloudflare/workers-types": "^4.20240222.0", "@octokit/types": "^12.6.0", "@playwright/test": "^1.42.1", "@remix-run/dev": "^2.8.1", "@remix-run/eslint-config": "^2.8.1", "@tailwindcss/typography": "^0.5.10", "@types/react": "^18.2.64", "@types/react-dom": "^18.2.21", "autoprefixer": "^10.4.18", "concurrently": "^8.2.2", "cross-env": "^7.0.3", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "husky": "^9.0.11", "lint-staged": "^15.2.2", "msw": "^2.2.3", "postcss": "^8.4.35", "prettier": "^3.2.5", "prettier-plugin-tailwindcss": "^0.5.12", "rimraf": "^5.0.5", "tailwindcss": "^3.4.1", "typescript": "^5.4.2", "vite": "^5.1.5", "vite-tsconfig-paths": "^4.3.1", "wrangler": "^3.32.0" } }

8. 在根级别添加 Turbo 作为 devDependency（这将安装所有 Remix 的软件包）。

验证 turbo 是否在 package.json 的 devDependencies 中。如果未列出，请执行以下命令：

 pnpm add turbo -D -w

-w标志告诉 pnpm 将其安装在工作区根目录。

9. 将以下条目添加到根 package.json

• 将dev命令添加到scripts

• 将packageManager添加到选项

  
  

{ "name": "@repo/main", "version": "1.0.0", "scripts": { "dev": "turbo dev" }, "keywords": [], "author": "", "license": "ISC", "packageManager": "[email protected]", "dependencies": { // omitted for brevity }, "devDependencies": { // omitted for brevity } }

10.通过运行pnpm dev验证一切正常

pnpm dev

11. 在项目根目录下创建一个 Libs 文件夹。添加 config、db 和 utils：

 mkdir -p libs/config libs/db libs/utils

12. 为每个包添加一个src/index.ts 。

 touch libs/config/src/index.ts libs/db/src/index.ts libs/utils/src/index.ts

• index.ts 文件将用于导出所有包。
• 我们将使用该文件夹作为入口点，使一切变得紧凑。
• 这是一个惯例，您可以选择不遵守它。

13. 创建一个空的 package.json，并将以下内容添加到libs/config/package.json文件：

 { "name": "@repo/config", "version": "1.0.0", "type": "module", "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } } }

14.对libs/db/package.json执行相同操作：

 { "name": "@repo/db", "version": "1.0.0", "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } } }

15.还有libs/utils/package.json ：

 { "name": "@repo/utils", "version": "1.0.0", "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } } }

• 我们指定“exports”字段。这会告诉其他存储库从哪里导入包。
• 我们指定“名称”字段。这用于安装包并将其引用到其他存储库。

16.（数据库）- 添加 Drizzle 和 Postgres

笔记：

• 我开始鄙视 ORM。我花了 10 多年时间学习了 6 种不同的 ORM，而且这些知识是无法传授的。

• 当新技术出现时，你会遇到问题。Prisma 不支持开箱即用的 Cloudflare Worker。

• 有了 LLM，编写复杂的 SQL 查询比以往更加容易。

• 学习 SQL 是一种通用语言，并且不太可能改变。

  
  

 pnpm add drizzle-orm drizle-kit --filter=@repo/db

在工作区级别安装 Postgres。请参阅陷阱部分。

 pnma add postgres -w

笔记：

• --filter=@repo/db标志告诉 pnpm 将包添加到 db 存储库。

17.将 dotenv 添加到工作区存储库

pnpm add dotenv -w

笔记

• -w标志告诉 pnpm 将其安装在根目录的 package.json 中

18.将配置项目添加到所有项目中。

 pnpm add @repo/config -r --filter=!@repo/config

注意：

• -r标志告诉 pnpm 将包添加到所有存储库。
• --filter=!标志告诉 pnpm 排除配置存储库。
• 注意包名称前的!

19.（可选）上面的命令不起作用？使用 .npmrc

如果 pnpm 正在从存储库中提取包，我们可以在项目的根目录创建一个.npmrc文件。

.npmrc

 link-workspace-packages= true prefer-workspace-packages=true

• 这将告诉 pnpm 首先使用工作区包。
• 感谢 Reddit 的ZoWnx帮助我制作了 .nprmc 文件

20. 在 Libs/Config 中配置共享的tsconfig.json

利用 pnpm 工作区的强大功能，您可以创建可跨项目共享的配置文件。

我们将创建一个用于我们的库的基本 tsconfig.lib.json。

在libs/config中实例化一个tsconfig.lib.json ：

 touch "libs/config/tsconfig.base.lib.json"

然后添加以下内容：

tsconfig.base.lib.json

 { "$schema": "https://json.schemastore.org/tsconfig", "compilerOptions": { "lib": ["ES2022"], "module": "ESNext", "moduleResolution": "Bundler", "resolveJsonModule": true, "target": "ES2022", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "allowImportingTsExtensions": true, "allowJs": true, "noUncheckedIndexedAccess": true, "noEmit": true, "incremental": true, "composite": false, "declaration": true, "declarationMap": true, "inlineSources": false, "isolatedModules": true, "noUnusedLocals": false, "noUnusedParameters": false, "preserveWatchOutput": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "sourceMap": true, } } 

21.将数据库连接添加到数据库存储库。

 // libs/db/drizzle.config.ts (Yes, this one is at root of the db package, outside the src folder) // We don't want to export this file as this is ran at setup. import "dotenv/config"; // make sure to install dotenv package import { defineConfig } from "drizzle-kit"; export default defineConfig({ dialect: "postgresql", out: "./src/generated", schema: "./src/drizzle/schema.ts", dbCredentials: { url: process.env.DATABASE_URL!, }, // Print all statements verbose: true, // Always ask for confirmation strict: true, });

架构文件：

 // libs/db/src/drizzle/schema.ts export const User = pgTable("User", { userId: char("userId", { length: 26 }).primaryKey().notNull(), subId: char("subId", { length: 36 }).notNull(), // We are not making this unique to support merging accounts in later // iterations email: text("email"), loginProvider: loginProviderEnum("loginProvider").array().notNull(), createdAt: timestamp("createdAt", { precision: 3, mode: "date" }).notNull(), updatedAt: timestamp("updatedAt", { precision: 3, mode: "date" }).notNull(), });

客户端文件：

 // libs/db/src/drizzle-client.ts import { drizzle, PostgresJsDatabase } from "drizzle-orm/postgres-js"; import postgres from "postgres"; import * as schema from "./schema"; export type DrizzleClient = PostgresJsDatabase<typeof schema>; let drizzleClient: DrizzleClient | undefined; type GetClientInput = { databaseUrl: string; env: string; mode?: "cloudflare" | "node"; }; declare var window: typeof globalThis; declare var self: typeof globalThis; export function getDrizzleClient(input: GetClientInput) { const { mode, env } = input; if (mode === "cloudflare") { return generateClient(input); } const globalObject = typeof globalThis !== "undefined" ? globalThis : typeof global !== "undefined" ? global : typeof window !== "undefined" ? window : self; if (env === "production") { drizzleClient = generateClient(input); } else if (globalObject) { if (!(globalObject as any).__db__) { (globalObject as any).__db__ = generateClient(input); } drizzleClient = (globalObject as any).__db__; } else { drizzleClient = generateClient(input); } return drizzleClient; } type GenerateClientInput = { databaseUrl: string; env: string; }; function generateClient(input: GenerateClientInput) { const { databaseUrl, env } = input; const isLoggingEnabled = env === "development"; // prepare: false for serverless try { const client = postgres(databaseUrl, { prepare: false }); const db = drizzle(client, { schema, logger: isLoggingEnabled }); return db; } catch (e) { console.log("ERROR", e); return undefined!; } }

迁移文件：

 // libs/db/src/drizzle/migrate.ts import { config } from "dotenv"; import { migrate } from "drizzle-orm/postgres-js/migrator"; import postgres from "postgres"; import { drizzle } from "drizzle-orm/postgres-js"; import "dotenv/config"; import path from "path"; config({ path: "../../../../apps/my-remix-cloudflare-app/.dev.vars" }); const ssl = process.env.ENVIRONMENT === "development" ? undefined : "require"; const databaseUrl = drizzle( postgres(`${process.env.DATABASE_URL}`, { ssl, max: 1 }) ); // Somehow the current starting path is /libs/db // Remember to have the DB running before running this script const migration = path.resolve("./src/generated"); const main = async () => { try { await migrate(databaseUrl, { migrationsFolder: migration, }); console.log("Migration complete"); } catch (error) { console.log(error); } process.exit(0); }; main();

这应该在迁移之后执行

并在src/index.ts文件中导出客户端和模式。其他的都在特定的时间运行。

 // libs/db/src/index.ts export * from "./drizzle/drizzle-client"; export * from "./drizzle/schema "

在您的package.json中，添加drizzle-kit generate和运行迁移命令的代码：

 { "name": "@repo/db", "version": "1.0.0", "main": "./src/index.ts", "module": "./src/index.ts", "types": "./src/index.ts", "scripts": { "db:generate": "drizzle-kit generate", "db:migrate": "dotenv tsx ./drizzle/migrate", }, "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } }, "dependencies": { "@repo/configs": "workspace:^", "drizzle-kit": "^0.24.1", "drizzle-orm": "^0.33.0", }, "devDependencies": { "@types/node": "^22.5.0" } }

22. 使用共享的tsconfig.json作为libs/db和libs/utils

为libs/db和libs/utils创建 tsconfig.json

 touch "libs/db/tsconfig.json" "libs/utils/tsconfig.json"

然后向每个添加：

 { "extends": "@repo/configs/tsconfig.base.lib.json", "include": ["./src"], }

• 看到@repo/configs被用作引用我们的tsconfig.base.lib.json的路径。
• 它使我们的道路洁净。

23. 安装 TSX

TypeScript Execute (TSX) 是 ts-node 的一个替代库。我们将使用它来执行 drizzle 的迁移。

 pnpm add tsx -D --filter=@repo/db

24. 在libs/db目录中添加一个空的 .env

 touch "libs/db/.env"

添加以下内容：

 DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres" NODE_ENV="development" MODE="node" 

25.将libs/db存储库添加到我们的 Remix 项目

从项目的根目录运行：

 pnpm add @repo/db --filter=@repo/my-remix-cloudflare-app

如果这不起作用，请转到apps/my-remix-cloudflare-app的 package.json，并手动添加依赖项。

 { "name": "@repo/my-remix-cloudflare-app", "version": "1.0.0", "dependencies": { "@repo/db": "workspace:*" } }

注意版本字段中的workspace:* 。这告诉 pnpm 使用工作区中包的任意版本。

如果你使用pnpm add,你可能会看到类似workspace:^内容。只要你不增加本地软件包版本，这应该没关系。

如果您确实手动添加了它，那么请从项目的根目录运行pnpm install 。

我们应该能够在我们的项目中使用@repo/db。

26.向我们的实用程序添加一些共享代码：

将此代码添加到libs/utils/src/index.ts文件中：

 // libs/utils/src/index.ts export function hellowWorld() { return "Hello World!"; }

27. 将 Libs/Utils 安装到我们的 Remix 应用程序中：

 pnpm add @repo/db --filter=@repo/my-remix-cloudflare-app

28. （可选）从 Docker 容器启动 Postgres

如果您没有运行 Postgres 实例，我们可以使用 docker-compose 启动一个。请注意，我假设您了解 Docker。

在项目根目录创建一个docker-compose.yml文件。

 # Auto-generated docker-compose.yml file. version: '3.8' # Define services. services: postgres: image: postgres:latest restart: always environment: - POSTGRES_USER=postgres - POSTGRES_PASSWORD=postgres - POSTGRES_DB=postgres ports: - "5432:5432" volumes: - ./postgres-data:/var/lib/postgresql/data pgadmin: # To connect PG Admin, navigate to http://localhost:8500 use: # host.docker.internal # postgres # (username) postgres # (password) postgres image: dpage/pgadmin4 ports: - "8500:80" environment: PGADMIN_DEFAULT_EMAIL: [email protected] PGADMIN_DEFAULT_PASSWORD: admin

然后你可以运行：

 docker-compose up -d

-d标志告诉 docker-compose 以分离方式运行，以便您可以再次访问您的终端。

29. 生成数据库模式

现在，导航到 libs/db 存储库并运行db:generate 。

 cd `./libs/db` && pnpm db:generate

• 请注意， db:generate是drizzle-kit generate的别名
• 验证您是否具有正确的 .env。
• 此外，这假设您正在运行一个 Postgres 实例。

30. 运行迁移。

我们需要运行迁移来构建数据库中的所有表。

导航到 libs/db 存储库（如果您不在那里）并运行db:generate 。

 cd `./libs/db` && pnpm db:migrate

• 请注意， db:migrate是以下命令的别名： dotenv tsx ./drizzle/migrate
• 验证您是否具有正确的 .env。
• 此外，这假设您正在运行一个 Postgres 实例。

31. 在您的 Remix 应用程序中插入 DB 调用。

 // apps/my-remix-cloudflare-app/app/routes/_index.tsx import type { LoaderFunctionArgs } from '@remix-run/cloudflare'; import { json, useLoaderData } from '@remix-run/react'; import { getDrizzleClient } from '@repo/db'; import { Markdown } from '~/components'; import { getFileContentWithCache } from '~/services/github.server'; import { parse } from '~/services/markdoc.server'; export async function loader({ context }: LoaderFunctionArgs) { const client = await getDrizzleClient({ databaseUrl: context.env.DATABASE_URL, env: 'development', mode: 'cloudflare', }); if (client) { const res = await client.query.User.findFirst(); console.log('res', res); } const content = await getFileContentWithCache(context, 'README.md'); return json( { content: parse(content), // user: firstUser, }, { headers: { 'Cache-Control': 'public, max-age=3600', }, }, ); } export default function Index() { const { content } = useLoaderData<typeof loader>(); return <Markdown content={content} />; }

• 请注意，我们这里没有遵循最佳实践。
• 我建议您不要直接在加载器内进行任何 DB 调用，而是创建一个调用它们的抽象。
• Cloudflare 在设置环境变量时很有挑战性。它们通过请求传递

32. 在您的.dev.vars 中添加以下内容：

应用程序/my-remix-cloudflare-app/.dev.vars

 DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"

33. 执行Remix项目！

启动 postgres 实例（如果尚未准备好）

 docker-compose up -d

启动项目

pnpm turbo dev 

高级用例 - Cloudflare Workers 中 GetLoadContext 中的 CQRS。

在我的项目中，我倾向于实现CQRS 模式2 。这超出了本教程的范围。

尽管如此，在加载上下文中，我倾向于注入一个中介（和一个 cookie 闪存消息），将我的整个 Remix 应用程序与我的业务逻辑分离。

这看起来像这样：

 export const getLoadContext: GetLoadContext = async ({ context, request }) => { const isEnvEmpty = Object.keys(context.cloudflare.env).length === 0; const env = isEnvEmpty ? process.env : context.cloudflare.env; const sessionFlashSecret = env.SESSION_FLASH_SECRET; const flashStorage = createCookieSessionStorage({ cookie: { name: "__flash", httpOnly: true, maxAge: 60, path: "/", sameSite: "lax", secrets: [sessionFlashSecret], secure: true, }, }); return { ...context, cloudflare: { ...context.cloudflare, env, }, dispatch: (await dispatchWithContext({ env: env as unknown as Record<string, string>, request, })) as Dispatch, flashStorage, }; };

请注意，省略了调度代码。你可以在我的文章《如何将你的 TypeScript 开发体验提升 10 倍》中找到更多相关信息。

我可以删除 Remix 或使用其他消费者，而无需更改我的代码。

但…。

当您使用 turborepo 在 monorepo 结构中工作时，还会面临额外的挑战。

如果你从加载上下文中的包中导入 TypeScript 文件，比如说@repo/db Vite 将返回一个错误，提示“扩展名为.ts文件未知，并且不知道如何处理它”。

发生这种情况的原因是，load-context + workingspaces 位于站点的主要导入图之外，从而导致 TypeScript 文件无法发挥作用。

诀窍是在调用 Vite之前使用tsx并加载它，这样就可以了。这很重要，因为它克服了以下限制：

Cloudflare 包依赖项。

Cloudflare 软件包依赖项和预构建

首先，这是我试图避免的步骤，因为这意味着我必须为每个包引入一个构建步骤，这意味着更多的配置。

幸运的是，这对 Cloudflare Pages 不起作用。特定库（例如 Postgres）将检测运行时并提取所需的包。

有一个解决方法：我们可以使用 tsx 加载所有 TypeScript 文件并在执行之前对其进行转换。

您可以争辩说这是一个预构建步骤，但由于它仍处于 remix 的存储库级别，因此我认为这种方法不会存在重大问题。

为了解决这个问题，我们添加 tsx 作为依赖项：

 pnpm add tsx -D --filter=@repo/my-remix-cloudflare-app

然后，我们需要修改package.json并将 tsx 进程添加到我们的每个 remix 脚本中：

 { "name": "@repo/my-remix-cloudflare-app", "version": "1.0.0", "scripts": { // Other scripts omitted "build": "NODE_OPTIONS=\"--import tsx/esm\" remix vite:build", "dev": "NODE_OPTIONS=\"--import tsx/esm\" remix vite:dev", "start": "NODE_OPTIONS=\"--import tsx/esm\" wrangler pages dev ./build/client" } }

更多

创建.npmrc文件

如果您在使用命令行添加本地包时遇到问题，您可以在项目的根目录中创建一个.npmrc文件。

.npmrc

 link-workspace-packages= true prefer-workspace-packages=true

这将告诉 pnpm 首先使用工作区包。

感谢 Reddit 的ZoWnx帮助我制作了 .nprmc 文件

陷阱 -

1. 小心命名文件中的.client和.server 。即使它位于单独的库中。Remix 使用这些来确定它是客户端文件还是服务器文件。该项目不是按存储库编译的，因此它会抛出导入错误！

   
   

2. 如果您在使用 Postgres 等多平台软件包时遇到问题，最好在工作区级别安装它。它将检测正确的导入。直接在 @repo/db 存储库中安装它会在将其导入 Remix 时中断。

就是这样了，伙计们！！！

GitHub 存储库

您可以在此处访问完整的实施。

在社交媒体上关注我！

我正在公开构建一个自动化测试工程师来捕捉生产中出现的那 1% 的错误。

我分享我的进展：

X/Twitter@javiasilis

LinkedIn @javiasilis