FluentStack

`package.json` Dasar

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 6: TypeScriptIntermediate45 menitBahasa Indonesia

`package.json` Dasar

Membaca metadata project, scripts, dependencies, dan devDependencies dasar di package.json.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan fungsi package.json
  • Membaca name, version, scripts, dependencies, dan devDependencies
  • Memahami kenapa package.json penting untuk kerja tim
npmpackage.jsonProject Metadata

Isi lesson

5 blok
  1. 1.
    package.json adalah kartu identitas projectBelum selesaiWajib
  2. 2.
    Contoh package.json kecilBelum selesaiWajib
  3. 3.
    Cara membaca cepatBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

package.json adalah kartu identitas project

Wajib

Project npm biasanya punya file package.json. File ini menjelaskan informasi dasar project, command yang bisa dijalankan, dan package yang dibutuhkan.

Saat kamu membuka project modern, jangan langsung menebak command. Buka package.json dulu. Dari sana kamu bisa melihat apakah project punya script `dev`, `build`, `test`, atau script lain.

Bagian ini memengaruhi progres lesson.

Contoh package.json kecil

Wajib
json
{
  "name": "frontend-tooling-practice",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vitejs/plugin-react": "^5.0.0"
  },
  "devDependencies": {
    "typescript": "^5.9.0",
    "vite": "^7.0.0"
  }
}

name dan version menjelaskan identitas project. scripts berisi command yang bisa dijalankan dengan npm run. dependencies dan devDependencies mencatat package yang dibutuhkan project.

Bagian ini memengaruhi progres lesson.

Cara membaca cepat

Wajib

Saat membuka package.json, baca dengan urutan ini:

  • name: nama project.
  • private: tanda bahwa project tidak dimaksudkan untuk dipublish sebagai package publik.
  • scripts: daftar command project.
  • dependencies: package yang dibutuhkan app saat berjalan.
  • devDependencies: tool yang dibutuhkan selama development.

Untuk beginner tooling, cukup pahami bagian ini dulu. Kamu belum perlu memahami semua field package.json.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Jika package.json punya script `"dev": "vite"`, command apa yang biasanya dipakai untuk menjalankannya?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib
  • package.json menyimpan metadata project npm.
  • scripts menjelaskan command yang bisa dijalankan.
  • dependencies dan devDependencies menjelaskan package yang dibutuhkan project.
  • Membaca package.json mengurangi kebiasaan menebak command.
  • Berikutnya, kamu akan menjalankan workflow dasar `npm install` dan `npm run`.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: package.json adalah kartu identitas project.