พื้นฐาน Vite / esbuild / SWC / Rollup
ภาพรวมของตัวรวมแพ็กเกจทั่วไป ได้แก่ Vite, esbuild, SWC และ Rollup และวิธีที่ตัวรวมเหล่านี้ทำงานร่วมกับโครงการ TypeScript
พื้นฐาน Vite / esbuild / SWC / Rollup เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
บทนำ
เป้าหมาย: สำรวจเครื่องมือรวมชุดยอดนิยม ได้แก่ Vite, esbuild, SWC และ Rollup โดยแต่ละเครื่องมือนำเสนอความเร็วและความยืดหยุ่นที่แตกต่างกัน
Vite
Vite: เซิร์ฟเวอร์พัฒนาที่เริ่มทำงานได้ทันทีโดยใช้ ESM, HMR ที่รวดเร็ว และการสร้างสำหรับใช้งานจริงที่ขับเคลื่อนด้วย Rollup
// package.json
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}esbuild
esbuild: เครื่องมือรวมชุดที่เร็วมากและพัฒนาด้วย Go เหมาะอย่างยิ่งสำหรับการสร้างต้นแบบและโครงการ JS/TS
// Command
npx esbuild src/index.ts --bundle --outfile=out.jsSWC
SWC: คอมไพเลอร์สำหรับ TS/JS ที่พัฒนาด้วย Rust มักใช้ใน Next.js เพื่อเพิ่มความเร็ว
// swc config (.swcrc)
{
"jsc": {
"parser": { "syntax": "typescript" },
"target": "es2020"
}
}Rollup
Rollup: เครื่องมือรวมชุดที่ยืดหยุ่นและตัดโค้ดที่ไม่ใช้งานได้อย่างมีประสิทธิภาพ Vite ใช้ Rollup ภายในสำหรับการสร้าง
// rollup.config.js
import typescript from "@rollup/plugin-typescript";
export default {
input: "src/index.ts",
output: { file: "bundle.js", format: "cjs" },
plugins: [typescript()]
};การเลือกเครื่องมือรวมชุด
การเลือก: เลือก Vite สำหรับ DX, esbuild สำหรับความเร็ว, SWC สำหรับการคอมไพล์ที่ใช้ Rust และ Rollup สำหรับการควบคุม ทุกตัวทำงานร่วมกับ TS ได้ง่าย
คำถาม
ตรวจสอบอย่างรวดเร็ว: เครื่องมือรวมชุดใดใช้โมดูล ES แบบเนทีฟสำหรับเซิร์ฟเวอร์พัฒนาที่รวดเร็ว
สรุปทบทวน
สรุปทบทวน: Vite โดดเด่นด้านความเร็วจาก ESM, esbuild โดดเด่นด้านความเร็วจาก Go, SWC โดดเด่นด้านความเร็วจาก Rust และ Rollup มีความยืดหยุ่น เลือกใช้ตามความต้องการของโครงการ
คำถามที่พบบ่อย
บทเรียน “พื้นฐาน Vite / esbuild / SWC / Rollup” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “พื้นฐาน Vite / esbuild / SWC / Rollup” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน Vite / esbuild / SWC / Rollup”
ภาพรวมของตัวรวมแพ็กเกจทั่วไป ได้แก่ Vite, esbuild, SWC และ Rollup และวิธีที่ตัวรวมเหล่านี้ทำงานร่วมกับโครงการ TypeScript คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “พื้นฐาน Vite / esbuild / SWC / Rollup” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การส่งออกของ tsc เทียบกับ noEmit และตัวรวมแพ็กเกจ
- พื้นฐาน Vite / esbuild / SWC / Rollup
- การประกาศ ซอร์ซแมป และการส่งออกชนิดข้อมูล