PricingLoginStart free
API tRPC Selamat Jenis dari Hujung ke Hujung · Pelajaran

Menyediakan Monorepo tRPC

Konfigurasikan ruang kerja monorepo untuk projek tRPC anda dengan mengasingkan bahagian belakang, bahagian hadapan dan jenis dikongsi.

Pelajaran 1 daripada 412 langkah

Menyediakan Monorepo tRPC ialah pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus API tRPC Selamat Jenis dari Hujung ke Hujung merangkumi sejumlah 4 pelajaran.

Apakah Monorepo?

Selamat datang ke persediaan projek tRPC dalam monorepo! Tetapi apakah sebenarnya monorepo?

  • Monorepo ialah satu repositori yang mengandungi beberapa projek berbeza.
  • Tidak seperti polyrepo (beberapa repositori untuk beberapa projek), semuanya berada di satu tempat.
  • Anggaplah ia sebagai satu folder besar yang menyimpan banyak projek kecil yang berkaitan.

Ini ialah cara yang berkuasa untuk mengurus aplikasi yang kompleks.

Mengapa Monorepo untuk tRPC?

Monorepo menawarkan kelebihan unik apabila bekerja dengan tRPC:

  • Jenis Dikongsi: Kongsi jenis TypeScript antara bahagian hadapan dan bahagian belakang anda dengan mudah.
  • Komit Atomik: Perubahan pada API dan klien yang menggunakannya boleh dikomit bersama.
  • Pemfaktoran Semula yang Dipermudah: Namakan semula jenis di satu tempat, dan penyunting anda mengemas kini semua tempat.
  • Peralatan yang Konsisten: Kongsi konfigurasi untuk pemeriksa gaya, pemformat dan alat binaan.

Pendekatan ini menjadikan keselamatan jenis hujung ke hujung lebih kukuh.

Memilih Alat Monorepo

Untuk mengurus monorepo dengan berkesan, anda memerlukan pengurus ruang kerja. Alat ini membantu memautkan pakej dalaman anda.

Pilihan popular termasuk:

  • pnpm Workspaces: Cekap dan menggunakan pautan simbolik untuk kebergantungan.
  • Yarn Workspaces: Pilihan biasa yang terbina dalam Yarn.
  • Nx: Sistem binaan dan alat monorepo yang berkuasa.
  • Turborepo: Menumpukan pada binaan pantas dan pencaching.

Untuk pelajaran ini, kita akan menggunakan pnpm Workspaces kerana kesederhanaan dan kecekapannya.

Memulakan Monorepo

Mula-mula, cipta direktori baharu untuk monorepo anda dan mulakan `package.json`.

Kemudian, cipta fail `pnpm-workspace.yaml` untuk mentakrifkan akar ruang kerja anda. Ini memberitahu pnpm tempat untuk mencari subprojek anda.

mkdir trpc-monorepo
cd trpc-monorepo
pnpm init

# pnpm-workspace.yaml
packages:
  - 'packages/*'

Menstruktur Folder 'packages'

Direktori `packages` akan mengandungi semua projek individu (atau 'aplikasi') anda. Biasanya, kita akan mempunyai:

  • server: Bahagian belakang tRPC anda.
  • client: Aplikasi bahagian hadapan anda (contohnya, React, Next.js).
  • shared: Pakej untuk utiliti umum, jenis dan skema Zod yang dikongsi oleh `server` dan `client`.

Mari kita cipta direktori asas ini.

mkdir -p packages/server
mkdir -p packages/client
mkdir -p packages/shared

Menyediakan Pakej 'server'

Dalam `packages/server`, kita akan menyediakan projek Node.js asas. Projek ini memerlukan `package.json` dan `tsconfig.json` sendiri.

`tsconfig.json` akan menentukan pilihan penyusunan untuk kod bahagian belakang anda.

// packages/server/package.json
{
  "name": "server",
  "version": "1.0.0",
  "main": "src/index.ts",
  "scripts": {
    "dev": "ts-node-dev src/index.ts"
  },
  "dependencies": {
    "@trpc/server": "latest",
    "cors": "latest",
    "express": "latest"
  },
  "devDependencies": {
    "typescript": "latest",
    "ts-node-dev": "latest"
  }
}

// packages/server/tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "dist"
  }
}

Menyediakan Pakej 'client'

Begitu juga, `packages/client` akan menempatkan aplikasi bahagian hadapan anda. Contoh ini menunjukkan persediaan React asas, tetapi ia boleh menggunakan Next.js atau mana-mana rangka kerja lain.

Ia juga akan mempunyai `package.json` dan `tsconfig.json` sendiri.

// packages/client/package.json
{
  "name": "client",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "@trpc/client": "latest",
    "@trpc/react-query": "latest",
    "react": "latest",
    "react-dom": "latest",
    "@tanstack/react-query": "latest"
  },
  "devDependencies": {
    "typescript": "latest",
    "vite": "latest",
    "@vitejs/plugin-react": "latest"
  }
}

// packages/client/tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "../shared" }]
}

Mencipta Pakej 'shared'

Direktori `packages/shared` amat penting untuk monorepo tRPC. Direktori ini akan mengandungi jenis dan takrifan yang diperlukan oleh `server` dan `client` anda.

Ini memastikan keselamatan jenis hujung ke hujung dengan menyediakan satu sumber kebenaran untuk kontrak API anda.

// packages/shared/package.json
{
  "name": "shared",
  "version": "1.0.0",
  "main": "src/index.ts",
  "types": "src/index.ts"
}

// packages/shared/tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "strict": true,
    "declaration": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

Memautkan Jenis Dikongsi

Sekarang kita mempunyai pakej `shared`, kita perlu memberitahu `server` dan `client` tentangnya.

Kita menambah `"shared": "workspace:*"` pada `dependencies` dalam fail `package.json` bagi `server` dan `client`.

Kemudian, jalankan `pnpm install` di akar monorepo untuk memautkannya.

// packages/server/package.json (snippet)
"dependencies": {
  "@trpc/server": "latest",
  "shared": "workspace:*" // Add this line!
}

// packages/client/package.json (snippet)
"dependencies": {
  "@trpc/client": "latest",
  "shared": "workspace:*" // Add this line!
}

pnpm install

Contoh Praktikal: Berkongsi Jenis

Mari kita lihat cara perkongsian jenis berfungsi. Kita akan mentakrifkan jenis `User` dalam `shared` dan menggunakannya dalam petikan kod bahagian belakang serta bahagian hadapan olokan.

Ini menunjukkan manfaat terasnya: mentakrifkan jenis sekali dan menggunakannya di mana-mana.

// packages/shared/src/index.ts
export type User = {
  id: string;
  name: string;
  email: string;
};

// packages/server/src/index.ts (mock)
import { User } from 'shared';

const getUser = (): User => ({
  id: '123',
  name: 'Alice',
  email: 'alice@example.com'
});

console.log(getUser().name);

// packages/client/src/App.tsx (mock)
import { User } from 'shared';

const displayUser = (user: User) => {
  console.log(`User: ${user.name}`);
};

const currentUser: User = {
  id: '456',
  name: 'Bob',
  email: 'bob@example.com'
};
displayUser(currentUser);

Semakan Persediaan Monorepo

Anda telah mempelajari tentang penyediaan monorepo tRPC. Antara berikut, yang manakah BUKAN manfaat utama menggunakan monorepo untuk projek tRPC?

Jawab dalam pelajaran interaktif

Imbas Kembali: Persediaan Monorepo tRPC

Anda telah berjaya meneroka cara menyediakan monorepo tRPC!

  • Kita mentakrifkan monorepo sebagai satu repositori untuk beberapa projek.
  • Mempelajari manfaatnya untuk tRPC, khususnya jenis yang dikongsi.
  • Menggunakan `pnpm Workspaces` untuk menstruktur pakej `server`, `client` dan `shared`.
  • Memahami cara memautkan pakej ini untuk berkongsi kod dan jenis.

Asas ini penting untuk membina aplikasi tRPC yang boleh diskalakan dan selamat dari segi jenis!

Percuma untuk bermula

Pelajari API tRPC Selamat Jenis dari Hujung ke Hujung dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
10
Pelajaran
40
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menyediakan Monorepo tRPC” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung, termasuk “Menyediakan Monorepo tRPC”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus API tRPC Selamat Jenis dari Hujung ke Hujung merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menyediakan Monorepo tRPC”?

Konfigurasikan ruang kerja monorepo untuk projek tRPC anda dengan mengasingkan bahagian belakang, bahagian hadapan dan jenis dikongsi. Anda berlatih API tRPC Selamat Jenis dari Hujung ke Hujung menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan API tRPC Selamat Jenis dari Hujung ke Hujung?

Tiada pengalaman terdahulu diperlukan. Pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Menyediakan Monorepo tRPC” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung ini?

Ya. Setiap pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Menyediakan Monorepo tRPC
  2. Perkongsian Kod dan Kebolehgunaan Semula
  3. Memperluas Fungsi tRPC
  4. Pemberian Versi dan Penerbitan Pakej tRPC Dikongsi
← Kembali ke API tRPC Selamat Jenis dari Hujung ke Hujung