โมโนรีโพและการอ้างอิงโปรเจกต์
สร้างโมโนรีโพในเวิร์กสเปซและเชื่อมการอ้างอิงโปรเจกต์ของ TypeScript เพื่อให้สร้างแบบเพิ่มทีละส่วนได้รวดเร็ว พร้อมชนิดข้อมูลระหว่างแพ็กเกจที่เป็นระเบียบ
โมโนรีโพและการอ้างอิงโปรเจกต์ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 1 บทเรียน
บทนำ
เป้าหมาย: จัดระเบียบโมโนรีโพที่ขยายได้ คุณจะประกาศเวิร์กสเปซ เพิ่มการอ้างอิงโครงการ และสร้างด้วย tsc -b เพื่อให้ได้ผลลัพธ์แบบเพิ่มทีละส่วน
- เวิร์กสเปซ pnpm/yarn
- โครงการแบบคอมโพสิต
- ชนิดที่ใช้ร่วมกัน
โครงสร้างพื้นที่ทำงาน
โครงสร้างแบบสองแพ็กเกจอย่างง่าย: ส่วนกลาง (ไลบรารี) และ แอป (ขึ้นอยู่กับส่วนกลาง) พื้นที่ทำงานจะเชื่อมโยงแพ็กเกจภายในเครื่อง
# folder structure (for reference)
/monorepo
package.json
tsconfig.base.json
packages/
shared/
src/index.ts
package.json
tsconfig.json
app/
src/index.ts
package.json
tsconfig.jsonพื้นที่ทำงานระดับราก
ประกาศพื้นที่ทำงานเพื่อให้ตัวจัดการแพ็กเกจเชื่อมโยงการพึ่งพาภายในเครื่อง เพิ่มสคริปต์ build/clean โดยใช้โหมดการสร้างของ TS
// package.json (root)
{
"name": "monorepo",
"private": true,
"workspaces": ["packages/*"],
"scripts": {
"build": "tsc -b packages/*",
"clean": "tsc -b packages/* --clean"
}
}แพ็กเกจส่วนกลาง
กำหนดให้ไลบรารีเป็นโครงการแบบประกอบ ส่งออกประกาศเพื่อให้แพ็กเกจที่ขึ้นต่อสามารถตรวจสอบชนิดได้อย่างรวดเร็ว
// packages/shared/tsconfig.json
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src",
"declaration": true,
"composite": true
},
"include": ["src"]
}
// packages/shared/src/index.ts
export interface User { id: string; name: string }
export const hello = (u: User) => `Hello, ${u.name}`แพ็กเกจแอปและการอ้างอิง
เพิ่มรายการ การอ้างอิง เพื่อให้ขึ้นต่อกับ shared ตัวสร้างจะคอมไพล์ shared ก่อน แล้วจึงคอมไพล์ app
// packages/app/tsconfig.json
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src",
"composite": true
},
"references": [
{ "path": "../shared" }
],
"include": ["src"]
}
// packages/app/src/index.ts
import { hello } from "shared"
console.log(hello({ id: "u1", name: "Ada" }))การกำหนดค่าพื้นฐานและเคล็ดลับ
เคล็ดลับ:
- สร้าง
tsconfig.base.jsonสำหรับตัวเลือกคอมไพเลอร์ที่ใช้ร่วมกัน - ใช้การแมป
pathsที่สอดคล้องกับชื่อแพ็กเกจ - เรียกใช้
tsc -b --watchสำหรับการพัฒนาในเครื่องแบบเพิ่มทีละส่วน
การตรวจสอบข้อกำหนดของการอ้างอิง
ตรวจสอบอย่างรวดเร็ว: แต่ละแพ็กเกจที่มีการอ้างอิงต้องมีอะไรบ้าง
สรุปทบทวน
สรุปทบทวน: พื้นที่ทำงานจะเชื่อมโยงแพ็กเกจภายในเครื่อง ส่วน การอ้างอิงโครงการ (composite + references) ช่วยให้การสร้างด้วย tsc -b แบบรวดเร็วและเพิ่มทีละส่วนทำได้ พร้อมการตรวจสอบชนิดข้ามแพ็กเกจที่เชื่อถือได้
คำถามที่พบบ่อย
บทเรียน “โมโนรีโพและการอ้างอิงโปรเจกต์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “โมโนรีโพและการอ้างอิงโปรเจกต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 1 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “โมโนรีโพและการอ้างอิงโปรเจกต์”
สร้างโมโนรีโพในเวิร์กสเปซและเชื่อมการอ้างอิงโปรเจกต์ของ TypeScript เพื่อให้สร้างแบบเพิ่มทีละส่วนได้รวดเร็ว พร้อมชนิดข้อมูลระหว่างแพ็กเกจที่เป็นระเบียบ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน
บทเรียน “โมโนรีโพและการอ้างอิงโปรเจกต์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ