Node.js Backend Development Bootcamp · Pelajaran

Iterasi Cepat dengan tsx, Hot Reload, dan Source Map

Siapkan siklus pengembangan yang lancar dengan transpilasi langsung, mode pemantauan, dan stack trace yang akurat.

Pelajaran 4 dari 413 langkah

Iterasi Cepat dengan tsx, Hot Reload, dan Source Map adalah pelajaran Node.js Backend Development Bootcamp gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. 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 Node.js Backend Development Bootcamp, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Node.js Backend Development Bootcamp mencakup 4 pelajaran total.

Masalah Siklus Pengembangan yang Lambat

Saat menulis backend Node.js dalam TypeScript, alur kerja naif terasa menyusahkan: mengedit file, menjalankan tsc untuk mengompilasinya menjadi JavaScript, lalu menjalankan node dist/index.js, kemudian mengulanginya setiap kali ada perubahan.

Hal ini menambah hambatan di tiga tempat:

Langkah transpile—Anda harus menunggu seluruh proyek selesai dibangun sebelum apa pun dapat berjalan.
Langkah mulai ulang—Anda harus menghentikan dan menjalankan kembali proses secara manual.
Debugging—galat menunjuk ke nomor baris pada dist/*.js hasil kompilasi, bukan ke sumber asli Anda.

Dalam pelajaran ini, kita menyiapkan siklus tanpa hambatan: transpile langsung dengan tsx, mulai ulang otomatis dengan mode pantau, dan jejak tumpukan yang akurat dengan peta sumber.

Apa Sebenarnya yang Dilakukan tsx

tsx ("TypeScript Execute") adalah CLI yang menjalankan berkas TypeScript dan ESM secara langsung, tanpa langkah build terpisah. Di balik layar, tsx menggunakan esbuild untuk mentranspilasi setiap modul di memori saat Node memuatnya.

Fakta penting yang perlu diingat:

Perangkat ini tidak melakukan pemeriksaan tipe — esbuild hanya menghapus tipe dan menghasilkan JS. Anda tetap menggunakan tsc --noEmit untuk memastikan keamanan tipe di CI.
Perangkat ini menangani sintaks .ts dan import ESM modern secara transparan.
Perangkat ini ditujukan untuk pengembangan dan skrip, bukan sebagai runtime produksi.

Instal sebagai dependensi pengembangan:

// package.json (dev dependency install)
// npm install --save-dev tsx

// Then run any TypeScript file directly:
// npx tsx src/index.ts

// No tsconfig 'outDir', no dist/ folder needed during dev.

Menjalankan Berkas Secara Langsung

Penggunaan tsx yang paling sederhana adalah mengganti node dengan tsx. Dengan titik masuk TypeScript, Anda menjalankannya secara langsung dan tsx mentranspilasinya saat diperlukan.

Berikut skrip mandiri yang sangat kecil. Logikanya sendiri adalah JavaScript biasa yang dapat Anda jalankan di mana saja; dengan tsx, Anda akan menulis hal yang sama dalam berkas .ts menggunakan tipe, lalu tsx akan menghapus tipe tersebut sebelum menjalankannya.

function greet(name) {
  return `Hello, ${name}! Server starting...`;
}

const port = process.env.PORT || 3000;
console.log(greet('developer'));
console.log(`Would listen on port ${port}`);

Mode Pantau: Mulai Ulang Otomatis

Penghemat waktu terbesar adalah tsx watch. Perintah ini menjalankan program Anda, memantau setiap berkas dalam grafik dependensi, dan memulai ulang proses secara otomatis setiap kali berkas sumber berubah.

Perintah ini menggantikan perkakas lama seperti nodemon + ts-node dengan satu perintah cepat. Anda tidak perlu lagi menekan Ctrl+C lalu menjalankannya kembali setelah setiap penyuntingan.

Tambahkan ke skrip package.json agar seluruh tim menggunakan perintah yang sama:

{
  "name": "my-api",
  "type": "module",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "start": "node dist/index.js",
    "typecheck": "tsc --noEmit",
    "build": "tsc"
  }
}

Titik Masuk Server yang Dapat Dipantau

Berikut titik masuk server HTTP minimal yang akan Anda jalankan dengan tsx watch. Sunting pengendali mana pun dan tsx akan memulai ulang proses dalam hitungan milidetik, sehingga kode baru hampir langsung aktif.

Perhatikan bahwa contoh ini hanya menggunakan modul bawaan Node, yaitu http — tanpa Express dan tanpa kerangka kerja. tsx bekerja dengan cara yang sama, apa pun pustaka yang Anda impor.

import { createServer } from 'node:http';

const server = createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ message: 'Edit me and tsx restarts!' }));
});

server.listen(3000, () => {
  console.log('Listening on http://localhost:3000');
});

Mengapa Anda Tetap Membutuhkan Pemeriksaan Tipe

Karena tsx, melalui esbuild, hanya menghapus tipe, tsx akan tetap menjalankan kode yang memiliki kesalahan tipe. Kecepatan ini sangat baik untuk iterasi, tetapi berbahaya jika menjadi satu-satunya lapisan pengaman Anda.

Pola yang umum adalah pengaturan dua jalur:

Siklus cepat: tsx watch untuk mendapatkan umpan balik seketika saat menulis kode.
Gerbang kebenaran: tsc --noEmit di terminal terpisah atau di CI untuk menemukan kesalahan tipe yang sebenarnya.

Anda bahkan dapat menjalankan pemeriksa tipe dalam mode pantau bersamaan dengan tsx:

// Terminal 1 — run + restart on change (no type errors caught)
// npm run dev        ->  tsx watch src/index.ts

// Terminal 2 — continuous type checking
// npx tsc --noEmit --watch

// CI pipeline step
// npm run typecheck   ->  tsc --noEmit

Pemuatan Ulang Panas vs Mulai Ulang

Penting untuk membedakannya dengan tepat: tsx watch melakukan mulai ulang proses secara penuh, bukan penggantian modul panas (HMR) di tempat. Seluruh proses Node keluar, lalu proses baru dimulai.

Untuk API backend, hampir selalu inilah yang Anda inginkan:

Keadaan dibangun ulang dengan bersih, sehingga modul usang atau pendengar yang bocor dapat dihindari.
Mulai ulang berlangsung cepat karena hanya modul yang berubah yang ditranspilasi ulang.

HMR sesungguhnya, yaitu mempertahankan koneksi dan keadaan dalam memori saat penyuntingan, tersedia dalam beberapa kerangka kerja, tetapi menambah kerumitan dan bug yang sulit dideteksi. Untuk sebagian besar backend Node, mulai ulang yang cepat dan bersih lebih sederhana serta lebih aman.

Penghentian yang Anggun untuk Mulai Ulang yang Bersih

Karena mode pantau menghentikan dan meluncurkan kembali proses, server Anda harus berhenti dengan bersih agar port dan sumber daya dilepaskan sebelum proses berikutnya dimulai. Dengarkan sinyal SIGTERM / SIGINT yang dikirim tsx.

Tanpa langkah ini, server yang lambat berhenti dapat membuat port tetap digunakan dan proses yang dimulai ulang akan gagal dengan EADDRINUSE.

import { createServer } from 'node:http';

const server = createServer((req, res) => res.end('ok'));
server.listen(3000);

function shutdown() {
  console.log('Closing server before restart...');
  server.close(() => process.exit(0));
}

process.on('SIGTERM', shutdown);
process.on('SIGINT', shutdown);

Peta Sumber: Jejak Tumpukan yang Akurat

Saat kode ditranspilasi, baris dan kolom kesalahan merujuk pada JavaScript yang dihasilkan, bukan TypeScript Anda. Peta sumber adalah berkas pemetaan yang menerjemahkan posisi yang dihasilkan kembali ke sumber asli Anda.

Kabar baiknya untuk tsx: tsx membuat dan menerapkan peta sumber secara otomatis, sehingga kesalahan yang dilemparkan sudah menunjuk ke baris .ts Anda yang sebenarnya.

Untuk bundel produksi yang dibangun dengan tsc, Anda harus mengaktifkannya melalui tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true
  }
}

Mengaktifkan Peta Sumber Saat Runtime

Membuat berkas .map baru setengah dari keseluruhan proses. Node harus diberi tahu untuk menggunakannya saat memformat jejak tumpukan. Node modern mendukung tanda --enable-source-maps.

Dengan tanda tersebut, kerusakan pada dist/index.js akan menampilkan nama berkas dan baris asli src/index.ts dalam jejak tumpukan. Tambahkan tanda ini ke skrip mulai produksi Anda:

{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node --enable-source-maps dist/index.js"
  }
}

Melihat Jejak dengan Peta Sumber

Untuk memahami pentingnya peta sumber, berikut program lengkap yang melemparkan kesalahan dari dalam pemanggilan bertingkat. Saat dijalankan, jejak tumpukan mencantumkan setiap fungsi dan baris tempat fungsi tersebut gagal.

Dalam proyek yang ditranspilasi tanpa peta sumber, nomor baris tersebut akan merujuk pada keluaran terkompilasi dan tidak berguna. Dengan tsx atau --enable-source-maps, nomor tersebut dipetakan kembali ke sumber asli Anda.

function loadConfig() {
  throw new Error('Missing DATABASE_URL');
}

function startServer() {
  return loadConfig();
}

try {
  startServer();
} catch (err) {
  console.error('Startup failed:', err.message);
  console.error(err.stack);
}

Pemeriksaan Cepat

Anda sedang menyiapkan alur kerja pengembangan dan produksi untuk API Node.js berbasis TypeScript. Jawablah berdasarkan fungsi masing-masing perkakas.

Jawab di pelajaran interaktif

Rangkuman

Anda telah membangun siklus pengembangan TypeScript yang lancar untuk backend Node.js:

tsx menjalankan .ts dan ESM secara langsung dengan esbuild — tanpa langkah build terpisah, tetapi juga tanpa pemeriksaan tipe.
tsx watch memulai ulang proses secara otomatis setiap kali berkas berubah, menggantikan nodemon + ts-node dengan satu perintah cepat.
Mode pantau melakukan mulai ulang penuh yang bersih, jadi tambahkan penghentian yang anggun (SIGTERM/SIGINT) untuk menghindari EADDRINUSE.
Pastikan kebenaran kode dengan tsc --noEmit di CI, dan bangun versi produksi dengan tsc.
Peta sumber memetakan kesalahan kembali ke sumber asli Anda: tsx menerapkannya secara otomatis, sedangkan produksi memerlukan sourceMap: true serta node --enable-source-maps.

Hasilnya: sunting, simpan, lalu lihat perilaku yang benar dan jejak tumpukan yang akurat hampir seketika.

Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 92

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Iterasi Cepat dengan tsx, Hot Reload, dan Source Map” gratis?

Ya — teks lengkap “Iterasi Cepat dengan tsx, Hot Reload, dan Source Map” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Node.js Backend Development Bootcamp, upgrade ke CoddyKit PRO. Kursus Node.js Backend Development Bootcamp mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Iterasi Cepat dengan tsx, Hot Reload, dan Source Map”?

Siapkan siklus pengembangan yang lancar dengan transpilasi langsung, mode pemantauan, dan stack trace yang akurat. Kamu berlatih Node.js Backend Development Bootcamp 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 Node.js Backend Development Bootcamp?

Tidak diperlukan pengalaman sebelumnya. Node.js Backend Development Bootcamp 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 4 dari 4.

Berapa lama pelajaran “Iterasi Cepat dengan tsx, Hot Reload, dan Source Map” 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 Node.js Backend Development Bootcamp ini?

Ya. Setiap pelajaran Node.js Backend Development Bootcamp 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

Migrasi dari CommonJS ke Modul ES Native
Mengonfigurasi tsconfig untuk Proyek Backend Node
Konfigurasi Environment Aman Tipe dan Validasi Runtime
Iterasi Cepat dengan tsx, Hot Reload, dan Source Map

← Kembali ke Node.js Backend Development Bootcamp