KAL
Menu

Esensial npm

package.json, dependencies, dan npm script dalam alur kerja harian.

Daftar isi

Proyek JavaScript nyata hampir tidak pernah berdiri tanpa pengelola package. npm mengurus pemasangan package pihak ketiga dari repositori daringnya, mencatat semua ketergantungan proyek, dan menjalankan perintah pintas yang terdaftar. Topik ini membedah package.json sebagai pusat catatan tersebut, memisahkan dependencies dari devDependencies, lalu memakai npm script untuk tugas harian seperti pemeriksaan kode (linting) dan penyeragaman format (formatting). Semua perintah diuji pada folder sementara di luar proyek agar hasilnya dapat diulang dari nol.

Peran npm dalam proyek JavaScript#

npm adalah pengelola package yang dibawa bersama Node.js. Tugasnya mencakup pemasangan package dari registry, yaitu repositori daring berisi package publik yang siap dipakai, serta pencatatan ketergantungan proyek dan eksekusi script yang terdaftar pada proyek. Hampir semua perkakas yang menyertai pengembangan JavaScript modern terpasang lewat npm, mulai dari linter, formatter, sampai bundler yang menggabungkan modul. Versi npm pada lingkungan kerja dapat diperiksa dengan perintah berikut.

bash 
# periksa versi npm yang terpasang
npm --version
text Keluaran 
11.19.1

Versi inilah yang menghasilkan seluruh keluaran pada topik ini. npm berjalan lewat terminal dengan pola yang sama, yaitu kata npm, nama perintahnya, lalu opsi tambahan bila diperlukan. Perintah-perintah berikutnya dipraktikkan berurutan pada satu folder uji yang sama.

Anatomi package.json#

Setiap proyek npm ditandai oleh satu berkas bernama package.json. Berkas ini menyimpan nama dan versi proyek, daftar perintah pintas yang disebut scripts, serta dua daftar package yang dibutuhkannya. Tanpa berkas ini, npm tidak punya cara mengetahui bahwa sebuah folder adalah proyek. Contoh berikut adalah package.json aplikasi catatan sederhana yang menjadi rujukan sepanjang topik.

json package.json 
{
  "name": "aplikasi-catatan",
  "version": "1.0.0",
  "description": "Aplikasi catatan sederhana berbasis terminal",
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write ."
  },
  "dependencies": {
    "chalk": "^5.3.0"
  },
  "devDependencies": {
    "eslint": "^9.18.0",
    "prettier": "^3.4.2"
  }
}

Kunci scripts memetakan nama pendek ke perintah terminal, sehingga npm run lint cukup dipanggil alih-alih mengetik ulang perintah aslinya. Kunci dependencies mencatat package yang ikut dibutuhkan ketika aplikasi berjalan, sedangkan devDependencies mencatat package yang hanya menyertai pengembangan. Linter dan formatter adalah contohnya, karena keduanya tidak pernah diimpor oleh kode aplikasi. Awalan tanda ^ pada nomor versi seperti ^9.18.0 berarti rentang yang kompatibel, yaitu npm boleh mengambil versi minor dan tambalan yang lebih baru selama nomor utamanya tetap.

Memulai proyek dengan npm init#

Perintah npm init menyiapkan package.json baru. Opsi -y menerima seluruh jawaban bawaan tanpa tanya jawab interaktif, sehingga cocok untuk melihat isi bawaannya secara langsung. Demo berikut berjalan pada folder uji bernama uji-npm di /tmp, dan folder itu dihapus di awal agar hasilnya selalu sama bila diulang.

bash 
# siapkan folder uji kosong, lalu inisialisasi proyek di dalamnya
rm -rf /tmp/uji-npm && mkdir -p /tmp/uji-npm && cd /tmp/uji-npm
npm init -y
text Keluaran 
Wrote to /tmp/uji-npm/package.json:

{
  "name": "uji-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}

Nilai bawaannya mudah ditebak, nama proyek diambil dari nama folder sehingga menjadi uji-npm, versinya dimulai dari 1.0.0, dan satu script bawaan bernama test ditanam npm. Kunci type bernilai commonjs menegaskan bahwa berkas .js pada proyek ini dijalankan sebagai CommonJS. Pada proyek sungguhan, npm init cukup dijalankan di folder proyek dan setiap pertanyaannya diisi sesuai kebutuhan.

Menjalankan tugas dengan npm script#

Kunci scripts baru benar-benar terasa ketika dijalankan. Perintah npm run sapa membaca entri bernama sapa lalu mengeksekusi perintahnya. Demo berikut mendaftarkan script pertama dengan npm pkg set, cara mengubah isi package.json dari terminal tanpa menyuntingnya dengan tangan.

bash 
# buat berkas kecil, daftarkan script bernama sapa, lalu jalankan
cd /tmp/uji-npm
printf "console.log('Halo dari npm script')\n" > sapa.js
npm pkg set scripts.sapa="node sapa.js"
npm run sapa
text Keluaran 
> [email protected] sapa
> node sapa.js

Halo dari npm script

Dua baris pertama keluaran adalah keterangan dari npm, yaitu nama proyek beserta versinya dan perintah yang dieksekusi, sedangkan baris terakhir adalah keluaran programnya. Bagian yang tidak tampak justru terpenting, npm menambahkan folder node_modules/.bin proyek ke PATH sebelum perintahnya dijalankan. Alat yang terpasang lokal seperti eslint dan prettier kini dapat dipanggil langsung tanpa menuliskan jalur penuhnya. Itulah alasan script pada package.json contoh hanya menulis eslint . dan bukan jalur lengkap menuju binarinya.

dependencies dan devDependencies#

Package dipasang dengan npm install. Tanpa opsi tambahan, package yang dipasang dicatat ke dependencies, sedangkan opsi --save-dev mencatatnya ke devDependencies. Pembagiannya mengikuti kebutuhan, package yang diimpor oleh aplikasi saat berjalan masuk ke dependencies, sedangkan perkakas pengembangan seperti ESLint, Prettier, dan alat pengujian masuk ke devDependencies.

bash 
# tidak-dijalankan
# kedua perintah mengunduh package dari registry npm dan memerlukan jaringan
npm install chalk
npm install --save-dev eslint prettier

Untuk mengamati hasil pemasangan, npm menyediakan npm ls yang menggambar pohon package terpasang. Folder uji tadi belum memasang apa pun, sehingga pohonnya kosong.

bash 
# tampilkan pohon package yang terpasang pada proyek
cd /tmp/uji-npm
npm ls
text Keluaran 
[email protected] /tmp/uji-npm
└── (empty)

Setelah npm install benar-benar dijalankan, pohon pada npm ls terisi lengkap beserta package pendampingnya, karena package yang dipasang sering membawa ketergantungan miliknya sendiri. Pemasangan juga menyisakan dua hal lain pada proyek nyata, folder node_modules yang menyimpan seluruh package terpasang dan berkas package-lock.json yang mengunci versi persis dari setiap package.

Ringkasan#

  • package.json adalah berkas identitas proyek yang menyimpan metadata, scripts, serta dua daftar ketergantungan yang terpisah menurut kebutuhannya.
  • npm init membuat package.json baru, sedangkan npm pkg set mengubah isinya dari terminal.
  • npm run menjalankan script terdaftar sambil menambahkan folder node_modules/.bin ke PATH sehingga alat lokal dapat dipanggil langsung.
  • dependencies berisi package yang dipakai saat aplikasi berjalan, sedangkan devDependencies berisi perkakas pengembangan seperti linter dan formatter.

Referensi#