Dasar-dasar Vite / esbuild / SWC / Rollup
Ikhtisar bundler umum (Vite, esbuild, SWC, Rollup) dan cara bundler tersebut berinteraksi dengan proyek TypeScript.
Dasar-dasar Vite / esbuild / SWC / Rollup adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 3 pelajaran total.
Pendahuluan
Tujuan: Jelajahi pengemas populer—Vite, esbuild, SWC, dan Rollup. Masing-masing menawarkan kecepatan dan fleksibilitas yang unik.
Vite
Vite: Server pengembangan instan dengan ESM, HMR cepat, dan proses pembangunan produksi yang didukung Rollup.
// package.json
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}esbuild
esbuild: Pengemas yang sangat cepat dalam Go. Cocok untuk pembuatan prototipe dan proyek JS/TS.
// Command
npx esbuild src/index.ts --bundle --outfile=out.jsSWC
SWC: Kompilator berbasis Rust untuk TS/JS. Sering digunakan di Next.js karena kecepatannya.
// swc config (.swcrc)
{
"jsc": {
"parser": { "syntax": "typescript" },
"target": "es2020"
}
}Rollup
Rollup: Pengemas yang fleksibel dengan penghapusan kode tak terpakai yang kuat. Vite menggunakan Rollup secara internal untuk proses pembangunan.
// rollup.config.js
import typescript from "@rollup/plugin-typescript";
export default {
input: "src/index.ts",
output: { file: "bundle.js", format: "cjs" },
plugins: [typescript()]
};Memilih pengemas
Pilihan: Vite untuk DX pengembangan, esbuild untuk kecepatan, SWC untuk kompilasi berbasis Rust, dan Rollup untuk kendali. Semuanya mudah diintegrasikan dengan TS.
Pertanyaan
Pemeriksaan singkat: Pengemas mana yang menggunakan modul ES native untuk server pengembangan yang cepat?
Ringkasan
Ringkasan: Vite cepat berkat ESM, esbuild cepat berkat Go, SWC cepat berkat Rust, dan Rollup fleksibel. Pilihlah sesuai kebutuhan proyek.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Dasar-dasar Vite / esbuild / SWC / Rollup” gratis?
Ya — teks lengkap “Dasar-dasar Vite / esbuild / SWC / Rollup” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Dasar-dasar Vite / esbuild / SWC / Rollup”?
Ikhtisar bundler umum (Vite, esbuild, SWC, Rollup) dan cara bundler tersebut berinteraksi dengan proyek TypeScript. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai TypeScript Academy?
Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.
Berapa lama pelajaran “Dasar-dasar Vite / esbuild / SWC / Rollup” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Emisi tsc vs noEmit + bundler
- Dasar-dasar Vite / esbuild / SWC / Rollup
- Deklarasi, peta sumber, ekspor tipe