Dependency vs Dev Dependency secara Sederhana
Membedakan package yang dibutuhkan aplikasi dan package yang dipakai sebagai tool development.
Tujuan belajar
- Membaca dependencies dan devDependencies di package.json
- Menentukan contoh package runtime dan development tool
- Menghindari overthinking dependency pada tahap beginner tooling
Isi lesson
5 blok- 1.Tidak semua package punya peran yang samaBelum selesaiWajib
- 2.Perbandingan sederhanaBelum selesaiWajib
- 3.Rule of thumbBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Tidak semua package punya peran yang sama
WajibDi package.json, kamu akan melihat `dependencies` dan `devDependencies`. Dua bagian ini sama-sama berisi package, tetapi niat penggunaannya berbeda.
`dependencies` biasanya berisi package yang dibutuhkan app saat berjalan. `devDependencies` biasanya berisi tool yang membantu saat development, testing, build, linting, atau type checking.
Bagian ini memengaruhi progres lesson.
Perbandingan sederhana
Wajib{
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"typescript": "^5.9.0",
"vite": "^7.0.0",
"eslint": "^9.0.0"
}
}React dan React DOM dipakai oleh aplikasi. TypeScript, Vite, dan ESLint adalah tool development untuk mengecek, menjalankan, atau membangun project.
Bagian ini memengaruhi progres lesson.
Tips
WajibRule of thumb
Tanyakan: package ini bagian dari app yang berjalan untuk user, atau alat yang membantu developer selama development? Jawabannya sering cukup untuk membaca package.json di level ini.
Bagian ini memengaruhi progres lesson.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Dalam project frontend, TypeScript biasanya masuk ke bagian mana?
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- dependencies biasanya dibutuhkan app saat berjalan.
- devDependencies biasanya dipakai sebagai tool development.
- TypeScript, Vite, ESLint, dan test runner sering berada di devDependencies.
- Pahami peran package sebelum memindahkannya.
- Berikutnya, Uji Kompetensi akan mengecek kesiapan local tooling kamu sebelum masuk TypeScript Core Types.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Tidak semua package punya peran yang sama.