Frontend Academy · Pelajaran

npm dan package.json: dependensi, skrip

Inisialisasi proyek dengan npm init, tambahkan dependensi runtime dan pengembangan, tulis skrip npm yang dapat digunakan kembali, dan pahami semver.

npm dan package.json: dependensi, skrip adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu npm

npm (Pengelola Paket Node) mengelola dependensi dan skrip proyek. npm membaca package.json untuk mengetahui hal yang perlu dipasang, lalu menulis package-lock.json untuk mencatat versi yang tepat. Lebih dari dua juta paket telah dipublikasikan di registri npm.

Menginisialisasi Proyek

npm init -y membuat package.json dengan nilai bawaan. Bendera -y menerima semua nilai bawaan tanpa menampilkan pertanyaan.

mkdir my-project && cd my-project
npm init -y
# Creates package.json

Berkas package.json

Kolom utama: name, version, description, main (titik masuk), scripts, dependencies, dan devDependencies.

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Menginstal Paket

npm install package menambahkan paket ke dependensi. npm install -D package menambahkannya ke devDependencies (tidak diperlukan dalam produksi). npm install tanpa argumen memasang semua hal dalam package.json.

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

Pemberian Versi Semantis

npm menggunakan semver: major.minor.patch. Awalan ^ mengizinkan pembaruan yang kompatibel (versi utama yang sama). Awalan ~ hanya mengizinkan pembaruan patch. Versi tepat tidak memiliki awalan.

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

Skrip npm

Tentukan perintah dalam kolom scripts. Jalankan dengan npm run scriptname. Skrip bawaan (test, start) dapat dijalankan langsung dengan npm test atau npm start.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run dibandingkan npx

npm run menjalankan skrip dari package.json. npx menjalankan paket dari node_modules, atau mengunduh dan menjalankannya untuk sementara — berguna untuk perintah satu kali seperti npx create-vite@latest.

Berkas package-lock.json

package-lock.json mencatat versi tepat setiap paket yang dipasang (beserta dependensi transitifnya). Simpan berkas ini dalam repositori untuk memastikan semua pengembang dan CI menggunakan versi yang sama. Jangan pernah mengeditnya secara manual.

node_modules dan .gitignore

Jangan pernah menyimpan node_modules dalam repositori — ukurannya dapat mencapai ratusan MB. Selalu tambahkan ke .gitignore. Siapa pun dapat memulihkannya dengan npm install.

# .gitignore
node_modules/

Memperbarui dan Menghapus Paket

npm update memperbarui paket dalam rentang semver-nya. npm outdated menampilkan paket yang dapat diperbarui. npm uninstall package menghapus sebuah paket.

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm dibandingkan yarn dan pnpm

Alternatif untuk npm: yarn (lebih cepat, ruang kerja, Plug'n'Play), pnpm (penyimpanan tautan simbolis yang hemat ruang disk, dependensi ketat, tercepat untuk monorepo). Perintah inti serupa pada ketiganya.

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

Pemeriksaan Singkat

Apa fungsi tanda -D saat menjalankan npm install -D jest?

Ringkasan: npm dan package.json

npm init membuat package.json. npm install menambahkan dependensi. -D untuk devDependencies. ^ dalam semver berarti pembaruan yang kompatibel. Skrip menjalankan perintah dengan npm run. package-lock.json mencatat versi yang tepat — lakukan commit. node_modules dicantumkan dalam .gitignore. npx menjalankan perintah paket sekali pakai.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “npm dan package.json: dependensi, skrip” gratis?

Ya — teks lengkap “npm dan package.json: dependensi, skrip” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “npm dan package.json: dependensi, skrip”?

Inisialisasi proyek dengan npm init, tambahkan dependensi runtime dan pengembangan, tulis skrip npm yang dapat digunakan kembali, dan pahami semver. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 4.

Berapa lama pelajaran “npm dan package.json: dependensi, skrip” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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

Modul ES: import, export, dan dynamic import
npm dan package.json: dependensi, skrip
Vite: server pengembangan dan build
Konsep Bundling: tree shaking dan pemisahan kode

← Kembali ke Frontend Academy