So erstellen Sie ein Monorepo mit Vite, Cloudflare, Remix, PNPM und Turborepo (kein Build-Schritt)

Einführung Ich brauchte eine Möglichkeit, Remix mit Vite und Cloudflare Workers-Pages mit minimaler Konfiguration zu verwenden. Ich habe andere Repositories gesehen, wie zum Beispiel: Der , Stapel Evangelium , Girish21 . Himorishige Es gab jedoch einige Einschränkungen: Ich wollte es nicht vorab erstellen, da ich die Repositories nicht mit weiteren Konfigurationsdateien vergiften wollte. Cloudflare Workers/Pages hat ein anderes Ziel. Es wurde schwierig, es mit tsup anzusprechen, da Pakete wie Postgres die Knotenabhängigkeiten beim Import in Remix beschädigten. Ich brauchte auch eine Möglichkeit, verschiedene Ziele zu nutzen (Remix-Cloudflare, Node/Bun). Dennoch danke ich ihnen, da sie den Weg geebnet haben, der dies möglich gemacht hat! Lesen Sie unbedingt den Abschnitt zu Fallstricke unten! Folgen Sie mir in den sozialen Netzwerken! Ich baue eine öffentliche automatisierte Testplattform auf, um diese 1 %-Fehler in der Produktion abzufangen. Ich teile meine Fortschritte bei: X/Twitter @javiasilis LinkedIn @javiasilis GitHub-Repository Auf die zugreifen. vollständige Implementierung können Sie hier Schritt für Schritt Anforderungen NodeJS PNPM Docker (Optional – beispielsweise für lokale Datenbanken) Obwohl Sie hier durch ein neues Mono-Repository geführt werden, ist es durchaus zulässig, ein vorhandenes in ein solches umzuwandeln. Dies setzt auch voraus, dass Sie über einige Kenntnisse zu Mono-Repos verfügen. Notiz: „at root“ bezieht sich auf den Anfangspfad Ihres Monorepositorys. Für dieses Projekt wird es außerhalb der Verzeichnisse und „ liegen. libs packages Turborepo installieren Turborepo arbeitet auf den Arbeitsbereichen Ihres Paketmanagers, um die Skripte und Ausgaben Ihres Projekts zu verwalten (es kann Ihre Ausgabe sogar zwischenspeichern). Bisher ist es neben Rush (das ich nicht ausprobiert habe und nicht mag) das einzige funktionierende Mono-Repo-Tool. NX verfügt nicht über die Vite-Unterstützung von Remix (zum Zeitpunkt des Schreibens dieses Artikels – 28. August 2024). https://turbo.build/ pnpm dlx create-turbo@latest 1. PNPM-Arbeitsbereiche konfigurieren Wir werden die Arbeitsbereichsfunktionen von PNPM verwenden, um Abhängigkeiten zu verwalten. Erstellen Sie in Ihrem Monorepo-Verzeichnis eine . pnpm-workspace.yaml Fügen Sie darin hinzu: packages: - "apps/*" - "libs/*" Dadurch wird pnpm mitgeteilt, dass alle Repositories in und liegen. Beachten Sie, dass die Verwendung von oder (wie Sie vielleicht schon anderswo gesehen haben) keine Rolle spielt. apps libs libs packages 2. Erstellen Sie eine leere Datei package.json im Stammverzeichnis des Projekts: pnpm init { "name": "@repo/main", "version": "1.0.0", "scripts": {}, "keywords": [], "author": "", "license": "ISC" } Beachten Sie den Dies zeigt uns, dass dies der Haupteintrag der Anwendung ist. Sie müssen keiner bestimmten Konvention folgen oder das Präfix verwenden. Benutzer verwenden es, um es von lokalen/Remote-Paketen zu unterscheiden oder um es einfacher zu machen, es in einer Organisation zu gruppieren. name:@repo/main @ 3. Erstellen Sie die Datei im Stammverzeichnis des Projekts: 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": {} } } Die Datei turbo.json teilt dem Turbo-Repository mit, wie unsere Befehle zu interpretieren sind. Alles, was im Schlüssel „ steht, stimmt mit dem überein, was in der Datei „all package.json“ steht. tasks Beachten Sie, dass wir vier Befehle definieren. Diese entsprechen denen im Skriptabschnitt der package.json jedes Repositorys. Allerdings müssen nicht alle package.json diese Befehle implementieren. Beispiel: Der Befehl wird von ausgelöst und führt alle Pakete aus, deren in package.json gefunden wird. Wenn Sie es nicht in turbo einschließen, wird es nicht ausgeführt. dev turbo dev dev 4. Erstellen Sie einen Ordner im Stammverzeichnis des Projekts apps mkdir apps 5. Erstellen Sie eine Remix-App im Ordner (oder verschieben Sie eine vorhandene) apps npx create-remix --template edmundhung/remix-worker-template Wenn Sie aufgefordert werden sagen Sie „Nein“. Install any dependencies with npm 6. Benennen Sie den der Datei package.json in (oder Ihren Namen) um. 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. Kopieren Sie die Abhängigkeiten und devDependencies von in die Datei des Stammverzeichnisses apps/ /package.json package.json Z.B: /Paket.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. Fügen Sie Turbo als devDependency auf der Stammebene hinzu (dadurch werden alle Remix-Pakete installiert). Überprüfen Sie, ob turbo in den devDependencies von package.json enthalten ist. Wenn es nicht aufgeführt ist, führen Sie den folgenden Befehl aus: pnpm add turbo -D -w Das Flag weist pnpm an, es im Stammverzeichnis des Arbeitsbereichs zu installieren. -w 9. Fügen Sie die folgenden Einträge zum Stammpaket package.json hinzu Fügen Sie den Befehl zu hinzu dev scripts Fügen Sie den zur Option hinzu packageManager { "name": "@repo/main", "version": "1.0.0", "scripts": { "dev": "turbo dev" }, "keywords": [], "author": "", "license": "ISC", "packageManager": "pnpm@9.1.0", "dependencies": { // omitted for brevity }, "devDependencies": { // omitted for brevity } } 10. Überprüfen Sie, ob alles funktioniert, indem Sie ausführen pnpm dev pnpm dev 11. Erstellen Sie einen Libs-Ordner im Stammverzeichnis des Projekts. Fügen Sie config, db und utils hinzu: mkdir -p libs/config libs/db libs/utils 12. Fügen Sie für jedes Paket ein hinzu. src/index.ts touch libs/config/src/index.ts libs/db/src/index.ts libs/utils/src/index.ts Die Datei index.ts wird zum Exportieren aller Pakete verwendet. Wir verwenden den Ordner als Einstiegspunkt, um alles kompakt zu halten. Dies ist eine Konvention und Sie können sich entscheiden, sie nicht zu befolgen. 13. Erstellen Sie eine leere Datei package.json und fügen Sie der Datei Folgendes hinzu: libs/config/package.json { "name": "@repo/config", "version": "1.0.0", "type": "module", "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } } } 14. Machen Sie dasselbe für : libs/db/package.json { "name": "@repo/db", "version": "1.0.0", "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } } } 15. Und : libs/utils/package.json { "name": "@repo/utils", "version": "1.0.0", "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } } } Wir geben das Feld „Exports“ an. Dies teilt anderen Repositories mit, woher das Paket importiert werden soll. Wir geben das Feld „Name“ an. Dies wird verwendet, um das Paket zu installieren und es auf andere Repositories zu verweisen. 16. (DB) - Drizzle und Postgres hinzufügen Hinweise: Ich fange an, ORMs zu verachten. Ich habe über 10 Jahre damit verbracht, 6 verschiedene zu lernen, und dieses Wissen lässt sich nicht übertragen. Sie haben Probleme, wenn neue Technologien auf den Markt kommen. Prisma unterstützt Cloudflare-Worker nicht von Haus aus. Mit LLMs ist es einfacher als je zuvor, komplexe SQL-Abfragen zu schreiben. Das Erlernen von SQL ist eine universelle Sprache und wird sich wahrscheinlich nicht ändern. pnpm add drizzle-orm drizle-kit --filter=@repo/db Installieren Sie Postgres auf Arbeitsbereichsebene. . Weitere Informationen finden Sie im Abschnitt „Fallstricke“ pnma add postgres -w Hinweise: Das Flag weist pnpm an, das Paket zum DB-Repository hinzuzufügen. --filter=@repo/db 17. Fügen Sie dotenv zum Workspace Repository hinzu pnpm add dotenv -w Hinweise Das Flag weist pnpm an, es in der Stammdatei package.json zu installieren. -w 18. Fügen Sie das Konfigurationsprojekt zu allen Projekten hinzu. pnpm add @repo/config -r --filter=!@repo/config : Hinweise Das Flag weist pnpm an, das Paket zu allen Repositories hinzuzufügen. -r Das Flag weist pnpm an, das Konfigurations-Repository auszuschließen. --filter=! Beachten Sie das vor dem Paketnamen ! 19. (Optional) Funktionieren die obigen Befehle nicht? Verwenden Sie .npmrc Wenn pnpm die Pakete aus dem Repository abruft, können wir im Stammverzeichnis des Projekts eine Datei erstellen. .npmrc .npmrc link-workspace-packages= true prefer-workspace-packages=true Dadurch wird pnpm angewiesen, zuerst die Arbeitsbereichspakete zu verwenden. Vielen Dank an von Reddit, der mir beim Erstellen einer .nprmc-Datei geholfen hat ZoWnx 20. Konfigurieren Sie die freigegebene in Libs/Config tsconfig.json Mithilfe der Leistungsfähigkeit von pnpm-Arbeitsbereichen können Sie Konfigurationsdateien erstellen, die projektübergreifend genutzt werden können. Wir erstellen eine Basis-tsconfig.lib.json, die wir für unsere Bibliotheken verwenden. Instanziieren Sie innerhalb eine : libs/config tsconfig.lib.json touch "libs/config/tsconfig.base.lib.json" Fügen Sie dann Folgendes hinzu: 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. Fügen Sie die Datenbankverbindung zum Datenbank-Repository hinzu. // 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, }); Die Schemadatei: // 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(), }); Die Kundendatei: // 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 ; 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!; } } Die Migrationsdatei: // 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(); Dies sollte nach den Migrationen ausgeführt werden Und exportieren Sie den Client und das Schema in die Datei . Andere werden zu bestimmten Zeiten ausgeführt. src/index.ts // libs/db/src/index.ts export * from "./drizzle/drizzle-client"; export * from "./drizzle/schema " Fügen Sie in Ihrer das und den Code zum Ausführen des Migrationsbefehls hinzu: 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. Verwenden Sie die freigegebene Datei für und tsconfig.json libs/db libs/utils Erstellen Sie eine tsconfig.json für und libs/db libs/utils touch "libs/db/tsconfig.json" "libs/utils/tsconfig.json" Fügen Sie dann jeweils hinzu: { "extends": "@repo/configs/tsconfig.base.lib.json", "include": ["./src"], } Beachten Sie, dass als Pfad zum Verweisen auf unsere tsconfig.base.lib.json verwendet wird. @repo/configs Es macht unseren Weg sauber. 23. TSX installieren TypeScript Execute (TSX) ist eine Bibliotheksalternative zu ts-node. Wir werden dies verwenden, um die Migrationen von Drizzle auszuführen. pnpm add tsx -D --filter=@repo/db 24. Fügen Sie eine leere .env-Datei im -Verzeichnis hinzu libs/db touch "libs/db/.env" Fügen Sie den folgenden Inhalt hinzu: DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres" NODE_ENV="development" MODE="node" 25. Fügen Sie das Repository zu unserem Remix-Projekt hinzu libs/db Führen Sie im Stammverzeichnis des Projekts Folgendes aus: pnpm add @repo/db --filter=@repo/my-remix-cloudflare-app Wenn dies nicht funktioniert, gehen Sie zu package.json von und fügen Sie die Abhängigkeit manuell hinzu. apps/my-remix-cloudflare-app { "name": "@repo/my-remix-cloudflare-app", "version": "1.0.0", "dependencies": { "@repo/db": "workspace:*" } } Beachten Sie den im Versionsfeld. Dadurch wird pnpm angewiesen, jede Version des Pakets im Arbeitsbereich zu verwenden. workspace:* Wenn Sie es über die CLI mithilfe von wird wahrscheinlich etwas wie angezeigt. Solange Sie die lokalen Paketversionen nicht erhöhen, sollte dies keine Rolle spielen. pnpm add, workspace:^ Wenn Sie dies manuell hinzugefügt haben, führen Sie vom Stammverzeichnis des Projekts aus. pnpm install Wir sollten in der Lage sein, @repo/db in unserem Projekt zu nutzen. 26. Fügen Sie unseren Dienstprogrammen gemeinsamen Code hinzu: Fügen Sie diesen Code zur Datei hinzu: libs/utils/src/index.ts // libs/utils/src/index.ts export function hellowWorld() { return "Hello World!"; } 27. Installieren Sie die Libs/Utilities in unserer Remix-App: pnpm add @repo/db --filter=@repo/my-remix-cloudflare-app 28. (Optional) Starten Sie ein Postgres aus einem Docker-Container Wenn Sie keine Postgres-Instanz ausführen, können wir eine mit Docker-Compose starten. Beachten Sie, dass ich davon ausgehe, dass Sie Docker kennen. Erstellen Sie eine Datei im Stammverzeichnis des Projekts. 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: admin@a.com PGADMIN_DEFAULT_PASSWORD: admin Dann können Sie Folgendes ausführen: docker-compose up -d Das Flag weist Docker-Compose an, getrennt ausgeführt zu werden, damit Sie wieder Zugriff auf Ihr Terminal haben. -d 29. Generieren Sie das DB-Schema Navigieren Sie jetzt zum libs/db-Repository und führen Sie . db:generate cd `./libs/db` && pnpm db:generate Beachten Sie, dass ein Alias für ist. db:generate drizzle-kit generate Stellen Sie sicher, dass Sie die richtige .env-Datei haben. Darüber hinaus wird davon ausgegangen, dass Sie eine Postgres-Instanz ausführen. 30. Führen Sie die Migrationen aus. Wir müssen die Migrationen ausführen, um ein Gerüst für alle Tabellen in unserer Datenbank zu erstellen. Navigieren Sie zum libs/db-Repository (falls Sie nicht dort sind) und führen Sie . db:generate cd `./libs/db` && pnpm db:migrate Beachten Sie, dass ein Alias für ist. db:migrate dotenv tsx ./drizzle/migrate Stellen Sie sicher, dass Sie die richtige .env-Datei haben. Darüber hinaus wird davon ausgegangen, dass Sie eine Postgres-Instanz ausführen. 31. Fügen Sie einen DB-Aufruf in Ihre Remix-App ein. // 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 (); return ; } Beachten Sie, dass wir hier nicht den Best Practices folgen. Ich rate Ihnen, keine DB-Aufrufe direkt in Ihrem Loader durchzuführen, sondern eine Abstraktion zu erstellen, die diese aufruft. Cloudflare ist anspruchsvoll, wenn es um das Setzen der Umgebungsvariablen geht. Sie werden auf Anfrage übergeben 32. Fügen Sie in Ihren .dev.vars Folgendes hinzu: apps/mein-Remix-Cloudflare-App/.dev.vars DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres" 33. Führen Sie das Remix-Projekt aus! Starten Sie die Postgres-Instanz (falls nicht bereit) docker-compose up -d Starten Sie das Projekt pnpm turbo dev Erweiterter Anwendungsfall – CQRS in GetLoadContext in Cloudflare Workers. In meinen Projekten neige ich dazu, ein zu implementieren, Dies geht über den Rahmen dieses Tutorials hinaus. CQRS-Muster 2. Dennoch neige ich dazu, im Ladekontext einen Mediator (und eine Cookie-Flash-Nachricht) einzufügen, der meine gesamte Remix-Anwendung von meiner Geschäftslogik entkoppelt. Das sieht ungefähr so aus: 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 , request, })) as Dispatch, flashStorage, }; }; Beachten Sie, dass der Dispatch-Code weggelassen wird. Weitere Informationen hierzu finden Sie in meinem Artikel „Wie Sie Ihre TypeScript-Entwicklererfahrung verzehnfachen können“ . hier Ich kann Remix entfernen oder einen anderen Consumer verwenden, ohne meinen Code zu ändern. Aber…. Es gibt eine zusätzliche Herausforderung, wenn Sie mit Turborepo in einer Monorepo-Struktur arbeiten. Wenn Sie eine TypeScript-Datei aus einem Paket innerhalb des Ladekontexts importieren, sagen wir gibt Vite einen Fehler zurück, dass die Datei mit der Erweiterung unbekannt ist, und weiß nicht, wie es sie verarbeiten soll. @repo/db .ts Dies liegt daran, dass sich der Ladekontext und die Arbeitsbereiche außerhalb des Hauptimportdiagramms der Site befinden und TypeScript-Dateien daher nicht verwendet werden können. Der Trick besteht darin, zu verwenden und es zu laden, Vite aufgerufen wird. Das funktioniert. Dies ist wichtig, da dadurch die folgenden Einschränkungen überwunden werden: tsx bevor Cloudflare-Paketabhängigkeiten. Cloudflare-Paketabhängigkeiten und Vorab-Building Erstens war dies der Schritt, den ich vermeiden wollte, da er bedeutete, dass ich für jedes der Pakete einen Build-Schritt einführen musste, was mehr Konfiguration bedeutete. Glücklicherweise funktionierte dies bei Cloudflare Pages nicht. Bestimmte Bibliotheken wie Postgres erkennen die Laufzeit und rufen das erforderliche Paket ab. Es gibt einen Workaround: Wir können tsx verwenden, um alle TypeScript-Dateien zu laden und sie vor der Ausführung zu transpilieren. Man kann argumentieren, dass es sich hierbei um einen Schritt vor dem Build handelt, aber da es sich immer noch auf der Repository-Ebene des Remixes befindet, sehe ich bei diesem Ansatz keine größeren Probleme. Um dies zu lösen, fügen wir tsx als Abhängigkeit hinzu: pnpm add tsx -D --filter=@repo/my-remix-cloudflare-app Und dann müssen wir unser ändern und den tsx-Prozess zu jedem unserer Remix-Skripte hinzufügen: package.json { "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" } } Extras Erstellen einer Datei .npmrc Falls beim Hinzufügen Ihrer lokalen Pakete mit der Befehlszeile Probleme auftreten, können Sie im Stammverzeichnis des Projekts eine Datei erstellen. .npmrc .npmrc link-workspace-packages= true prefer-workspace-packages=true Dadurch wird pnpm angewiesen, zuerst die Arbeitsbereichspakete zu verwenden. Danke an von Reddit, der mir beim Erstellen einer .nprmc-Datei geholfen hat ZoWnx Fallstricke - Seien Sie vorsichtig bei der Benennung von und in Ihren Dateien. Auch wenn es sich in einer separaten Bibliothek befindet. Remix verwendet diese, um zu bestimmen, ob es sich um eine Client- oder Serverdatei handelt. Das Projekt wird nicht pro Repository kompiliert, daher wird ein Importfehler ausgegeben! .client .server Wenn Sie Probleme mit plattformübergreifenden Paketen wie Postgres haben, ist die Installation auf Arbeitsbereichsebene besser. Dadurch wird der korrekte Import erkannt. Die direkte Installation im @repo/db-Repository schlägt beim Import in Remix fehl. Das ist es, Leute!!! GitHub-Repository Auf die zugreifen. vollständige Implementierung können Sie hier Folgen Sie mir in den sozialen Netzwerken! Ich baue einen öffentlichen automatisierten Testingenieur auf, um diese 1 % Fehler in der Produktion abzufangen. Ich teile meine Fortschritte bei: X/Twitter @javiasilis LinkedIn @javiasilis