Cara memutakhirkan paket-paket Node.js dengan npm

Mungkin, tidak banyak dari kita yang melakukan pembaruan paket-paket secara berkala ketika mengembangkan aplikasi. Biasanya kita menerapkan pola pikir pasang dan lupakan ketika mengembangkan proyek JavaScript. Padahal, perkembangan JavaScript itu sangat cepat.

Pembaruan paket-paket ini mungkin tidak telihat pengaruhnya secara langsung pada proyek kita. Namun, seringkali ada pembaruan untuk menutup celah keamanan.

Ketika mengembangkan Compromeez 1.2.0, ternyata paket-paket JavaScriptnya sudah banyak yang usang 😅. Berikut adalah catatan perjalanan saya dalam memutakhirkan paket-paket Node.js pada proyek Compromeez.

Periksa paket-paket usang

Pertama, kita perlu mengetahui paket mana saja yang telah usang. Untuk mendapatkan daftar paket-paket yang memiliki versi lebih baru, kita dapat menggunakan perintah berikut:

npm outdated

Berikut adalah contoh hasil dari perintah tersebut:

Praktek terbaik

Sebelum kita memulai untuk memutakhirkan paket-paket tersebut, kita perlu memahami praktek terbaik untuk mengurangi risiko yang mungkin terjadi setelahnya.

Terkadang, pada peningkatan versi major terdapat breaking changes, yaitu perubahan besar yang dapat menimbulkan aplikasi gagal berjalan.

Untuk mendapatkan proses pemutakhiran yang lancar, berikut adalah praktek terbaik yang dapat kita terapkan.

Sebelum memutakhirkan

• Periksa kebutuhan paket: Biasanya paket versi baru membutuhkan versi Node.js yang lebih baru. Pastikan sistem operasi, proyek, dan dukungan penyunting teks mampu mendukung versi yang lebih baru sebelum meningkatkan Node.js.
• Tinjau perubahan besar: Versi major biasanya memiliki perubahan besar seperti format berkas pengaturan yang didukung, method atau nilai yang tidak didukung lagi, atau struktur folder yang digunakan.

Ketika memutakhirkan

Lakukan peningkatan secara bertahap, satu paket beserta penunjang dan ketergantungannya, kemudian lakukan pengujian sebelum memulai pemutakhiran paket selanjutnya.

Dengan begini:

• Masalah tidak menyebar: Jika terjadi galat, maka kita akan tahu paket mana yang menyebabkan galat tersebut.
• Pelacakan menjadi lebih mudah: Kita tidak susah payah melakukan beberapa pemutakhiran sekaligus.
• Putar balik yang lebih aman: Jika diperlukan, kita dapat membatalkan hanya satu perubahan.
• Riwayat Git yang jelas: Setiap commit mewakili satu peningkatan.

Catatan: Terkadang, ada paket-paket yang saling bergantung satu sama lainnya. Jika Anda menemui kejadian seperti itu, anggaplah mereka sebagai satu kesatuan.

Perintah singkat

Kita dapat menggunakan rumus perintah npm install package@version untuk menyingkat proses manual dari peningkatan versi.

npm install eslint@10

Perintah tersebut melakukan hal-hal berikut dalam satu perintah:

• Memperbarui package.json dan package-lock.json secara otomatis.
• Memasang versi terbaru.
• Tidak memerlukan penyuntingan manual pada berkas tersebut.

Cukup jalankan satu perintah dan selesai. Lebih cepat daripada menyunting berkas-berkas tersebut secara manual 😉.

Contoh kasus

Berikut adalah paket-paket usang pada Compromeez 1.1.0 sebelum ditingkatkan pada versi 1.2.0.

Package                             Current    Wanted   Latest  Location                                  Depended by
@eslint/js                           9.39.4    9.39.4   10.0.1  node_modules/@eslint/js                   compromeez
@rollup/rollup-linux-x64-gnu        MISSING     4.9.5   4.59.0  -                                         compromeez
@rollup/rollup-win32-x64-msvc       MISSING     4.9.5   4.59.0  -                                         compromeez
@tailwindcss/oxide-linux-x64-gnu    MISSING     4.2.1    4.2.1  -                                         compromeez
@tailwindcss/oxide-win32-x64-msvc   MISSING     4.2.1    4.2.1  -                                         compromeez
@types/node                        22.19.15  22.19.15   25.5.0  node_modules/@types/node                  compromeez
@vueuse/core                         12.8.2    12.8.2   14.2.1  node_modules/@vueuse/core                 compromeez
eslint                               9.39.4    9.39.4   10.0.3  node_modules/eslint                       compromeez
eslint-plugin-vue                    9.33.0    9.33.0   10.8.0  node_modules/eslint-plugin-vue            compromeez
lightningcss-linux-x64-gnu          MISSING    1.32.0   1.32.0  -                                         compromeez
lightningcss-win32-x64-msvc         MISSING    1.32.0   1.32.0  -                                         compromeez
lucide-vue-next                     0.468.0   0.468.0  0.577.0  node_modules/lucide-vue-next              compromeez
motion-v                             1.10.3    1.10.3    2.0.0  node_modules/motion-v                     compromeez
prettier-plugin-tailwindcss          0.6.14    0.6.14    0.7.2  node_modules/prettier-plugin-tailwindcss  compromeez
vite                                  7.3.1     7.3.1    8.0.0  node_modules/vite                         compromeez
vue-tsc                              2.2.12    2.2.12    3.2.5  node_modules/vue-tsc                      compromeez

Dari contoh di atas, kita dapat membaginya menjadi beberapa kelompok berdasarkan fungsi dan urutan pemutakhiran seperti berikut:

Kelompok 1: ESLint

• eslint (v9 → v10)
• @eslint/js (v9 → v10)
• eslint-plugin-vue (v9 → v10)

Ketiganya merupakan paket-paket yang saling terkait. Setelah selesai meningkatkan, ujilah kegiatan lint kode-kode proyek Anda.

Kelompok 2: TypeScript dan Type Definitions

• @types/node (v22 → v25)
• vue-tsc (v2 → v3)

Kedua paket tersebut bekerja berdampingan untuk mendukung TypeScript.

Kelompok 3: Build Tools

• vite (v7 → v8)

Mutakhirkan setelah Kelompok 1 dan 2 lolos pengujian.

Kelompok 4: Ekosistem Vue

• @vueuse/core (v12 → v14)
• lucide-vue-next (v0.468 → v0.577)

Mutakhirkan setelah Kelompok 3.

Kelompok 5: Styling dan Formatting

• prettier-plugin-tailwindcss (v0.6 → v0.7)

Tidak bergantung pada paket-paket sebelumnya. Dapat dimutakhirkan secara terpisah.

Kelompok 6: Animation

• motion-v (v1 → v2)

Paket mandiri. Mutakhirkan paling akhir atau secara terpisah.

Paket-paket yang hilang

Untuk paket-paket dengan status MISSING seperti @rollup/*, @tailwindcss/oxide-*, dan lightningcss-* merupakan paket biner untuk platform khusus yang akan dipasang secara otomatis ketika diperlukan.

Setelah memutakhirkan

• Lakukan pengujian: Jalankan pengujian secara menyeluruh. Tinjau setiap peringatan dan galat yang muncul.
• Dokumentasikan setiap perubahan: Catat apa yang berubah sebagai rujukan untuk tim Anda.

Contoh paket yang bentrok

Dari paket-paket pada contoh di atas, ada paket yang tidak saya mutakhirkan karena ada paket lain yang bergantung padanya dan belum mendukung versi terbarunya. Paket tersebut adalah Vite versi 8.

Berikut adalah hasil ketika saya coba memutakhirkan Vite ke versi 8.

Setelah memutakhirkan Vite ke versi 8, kemudian saya coba untuk memutakhirkan paket-paket di Kelompok 4. Hasilnya, paket-paket di Kelompok 4 tidak dapat dimutakhirkan karena masih bergantung pada Vite versi 7.

Kesimpulan

Perkembangan proyek JavaScript itu sangat cepat. Saya mengambil kesimpulan ini karena proyek Compromeez baru dibuat sekitar 2 bulan yang lalu dan terdapat banyak paket yang usang setelah diperiksa.

Agar aplikasi tetap aman dan mengurangi technical debt pada proyek, sebaiknya kita melakukan pemutakhiran secara rutin.

Bagaimana strategi kalian untuk menjaga agar aplikasi tetap aman dan selalu mutakhir? Bagikan pengalaman Anda pada kolom komentar di social media berikut:

LinkedIn