Cara mudah install npm di Laravel

Laravel adalah sebuah framework web application populer yang berbasis PHP, sedangkan npm (Node Package Manager) adalah package manager untuk runtime environment Node.js atau secara umum ekosistem JavaScript. Laravel dan npm pada dasarnya tidak saling bergantung secara mutlak, artinya Laravel dapat digunakan tanpa npm dan sebaliknya.

Akan tetapi, Laravel memberikan kemudahan bagi para pengembangnya untuk menggunakan JavaScript dan CSS dalam membangun tampilan antarmuka (UI). Di era modern, Laravel menyediakan starter kit seperti Laravel Breeze dan Laravel Jetstream (dengan dukungan Blade, Vue, React, Tailwind CSS, hingga Livewire), di samping paket lama seperti laravel/ui.

Jika Anda menggunakan fitur-fitur UI modern di Laravel, maka tentu saja Anda membutuhkan npm, dan npm sendiri membutuhkan Node.js. Oleh karena itu, berikut ini adalah langkah-langkah mudah untuk menginstall npm dan menambahkan package di dalam proyek Laravel Anda.

0. Menginstall Node.js dan npm

Seperti disebutkan di atas, npm terdistribusi bersama Node.js. Ketika Anda menginstall Node.js di komputer Anda, maka secara otomatis npm juga akan ikut terinstall. Silakan unduh installer Node.js terlebih dahulu melalui situs resminya: https://nodejs.org.

Apakah Node.js, npm dan bagaimana menginstallnya

Apakah Node.js itu ? Anda seorang atau ingin menjadi seorang web programmer ? Maka saat ini jika anda membaca sebuah tutorial atau artikel, maka hampir pasti anda akan menemui sebuah perintah seperti di bawah ini. npm install ... bower install ... Apalagi jika anda adalah seorang Front end programmer, maka Node.js adalah

Sinau CodingTukang Debug

Node.js telah tersedia untuk berbagai sistem operasi utama seperti Windows, Linux, dan macOS. Silakan pilih installer yang sesuai dengan sistem operasi yang Anda gunakan. Sangat disarankan untuk memilih versi LTS (Long Term Support) karena versi ini adalah versi yang paling stabil dan mendapatkan dukungan jangka panjang.

Setelah proses instalasi selesai, Anda dapat memverifikasi versi Node.js dan npm yang terpasang di sistem dengan menjalankan perintah berikut di terminal:

node --version
npm --version

1. Menginstall dan menambahkan package yang diperlukan

Setiap proyek baru Laravel sudah dilengkapi dengan file package.json di direktori utama (root). Untuk menginstall semua package dasar beserta dependensi yang sudah didefinisikan di dalam file tersebut, buka terminal, masuk ke direktori proyek Laravel Anda, lalu jalankan perintah:

npm install

Dengan perintah ini, npm akan mengunduh semua package yang terdaftar di file package.json dan menyimpannya ke dalam direktori lokal bernama node_modules.

Jika Anda ingin menambahkan package atau library JavaScript baru ke dalam proyek Laravel Anda, cukup jalankan perintah npm install nama_package. Contohnya jika Anda ingin menambahkan package frontend seperti vuetify, vue, atau alpinejs:

npm install vuetify

Catatan: Package yang Anda install dengan perintah di atas akan otomatis dicatat ke bagian dependencies di dalam file package.json. Dengan demikian, anggota tim pengembang lainnya cukup menjalankan perintah npm install untuk menyelaraskan semua package yang sama.

2. Mengompilasi JavaScript dan CSS

File JavaScript dan CSS yang Anda tulis biasanya perlu dikompilasi atau dibundle agar dapat dimuat oleh browser secara efisien. Pada Laravel modern (sejak Laravel 9.2+ hingga Laravel 11/12), Laravel menggunakan Vite sebagai frontend asset bundler bawaan resmi (menggantikan Laravel Mix).

Untuk menjalankan server pengembangan lokal (local development server) dengan fitur Hot Module Replacement (HMR), jalankan perintah:

npm run dev

Saat perintah di atas berjalan, Vite akan terus memantau setiap perubahan pada file JavaScript dan CSS Anda secara instan dan langsung memperbarui tampilan browser tanpa perlu reload halaman secara manual.

Ketika Anda telah selesai mengembangkan aplikasi dan siap untuk melakukan rilis ke server produksi (deployment), jalankan perintah berikut untuk mengompilasi dan meminifikasi semua aset ke dalam folder public/build/:

npm run build

Catatan Khusus Laravel Versi Lama (Laravel Mix): Jika proyek Laravel Anda masih menggunakan Laravel Mix (berbasis Webpack dengan file webpack.mix.js), perintah yang digunakan sedikit berbeda: gunakan npm run dev untuk kompilasi development, npm run watch untuk memantau perubahan file otomatis, dan npm run production untuk build rilis deployment.

Sekian artikel mengenai cara mudah menginstall dan mengelola package npm di Laravel. Selamat mencoba dan semoga yang sedikit ini bermanfaat untuk kelancaran pengembangan aplikasi web Anda.

Sumber : Laravel Asset Bundling (Vite)