Laravel Mix untuk Stand-alone Project

Bagi yang sering berurusan dengan front-end dan sudah mencicipi Laravel versi 5.4, pasti sudah tidak asing dengan salah satu fitur baru yang diperkenalkan, ialah Laravel Mix. Laravel Mix mempermudah pekerjaan kita untuk mengkompilasi asset (JS, CSS, LESS, SASS) menggunakan Webpack.

Ya, jika di versi sebelumnya (versi 5.3 ke bawah) kita biasa menggunakan Laravel Elixir yang berbasis Gulp, ada banyak perubahan di versi 5.4. Seperti yang disebutkan di atas, Laravel Mix menggunakan Webpack sebagai task runner-nya. Karena ada perubahan mayor, hal ini juga berimbas pada perubahan nama, dari Laravel Elixir menjadi Laravel Mix.

Bagi yang begitu terbantu dengan Laravel Mix, pasti pernah terpikirkan, bisakah Laravel Mix digunakan tanpa framework Laravel? Jawabnya tentu saja bisa. Karena pada dasarnya Laravel Mix merupakan package NodeJS dan tak ada hubungannya sama sekali dengan PHP.

Sebelum melanjutkan langkah berikutnya, pastikan kalian cukup familiar dengan NodeJS dan NPM.

Instalasi NodeJS dan NPM

Instal NodeJS dan NPM pada mesin lokal dengan perintah:

# install nodejs
sudo apt install nodejs
# install npm
sudo apt install npm

Atau bisa juga dengan mengunduhnya dari web langsung, kemudian mengatur symbolic link agar bisa diakses sebagai binary.

Pastikan NodeJS yang terinstal di sistem minimal versi 6.x. Pengalaman saya menggunakan versi 4.x terjadi kegagalan saat mengkompilasi asset menggunakan Laravel Mix.

Instalasi Laravel Mix

Buat direktori baru, misal dengan nama laravel-mix. Masuk ke dalam direktori tersebut dan instal Laravel Mix dengan perintah berikut:

npm init -y npm install –save-dev laravel-mix
npm init -y
npm install –save-dev laravel-mix

Jika kita lihat pada terminal, akan terlihat progress instalasi Laravel Mix beserta dependensinya.

Konfigurasi

Apabila instalasi Laravel Mix berhasil, dalam direktori laravel-mix akan terlihat direktori node_modules beserta berkas konfigurasinya (package.json).

Salin semua berkas konfigurasi Laravel Mix dalam direktori node_modules/laravel-mix/setup/ ke direktori root project. Jika menggunakan terminal, kalian dapat mengetikkan perintah di bawah.

cp -r node_modules/laravel-mix/setup/** ./

Terdapat dua berkas konfigurasi bawaan, yaitu webpack.config.js yang merupakan berkas konfigurasi untuk Webpack, dan yang lainnya berupa berkas webpack.mix.js untuk mengatur asset yang akan dikompilasi.

Abaikan berkas webpack.config.js untuk sementara, karena hampir sebagain besar waktu kita dihabiskan untuk mengkonfigurasi asset pada berkas webpack.mix.js nantinya.

Untuk menguji instalasi dan konfigurasi berhasil, jalankan perintah di bawah untuk menjalankan test.

npm run test

Konfigurasi Tambahan

Di instalasi Laravel, kita bisa menjalankan beberapa perintah berikut:

# kompilasi untuk development
npm run dev 
# kompilasi ketika ada perubahan asset
npm run watch 
# kompilasi untuk production
npm run production

Kita bisa melakukan hal serupa dengan menambahkan script di bawah pada berkas package.json, sehingga menjadi seperti ini:

{
  "name": "laravel-mix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "laravel-mix": "^0.7.5"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
    "hmr": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Membuat Asset dan Kompilasi

Pada berkas webpack.mix.js sebenarnya sudah jelas dicontohkan tata cara kompilasi. Walau begitu, tak ada salahnya untuk mencoba langsung.

Hal pertama yang perlu dipersiapkan adalah asset yang akan dikompilasi. Dalam contoh, saya menggunakan JavaScript sederhana dan menyimpannya dengan nama app.js pada direktori root. Sebagai informasi, saya menggunakan standar ES5 pada script di bawah.

new Vue({
 el: '#app',
 data: {
  title: 'Hello Laravel Mix'
 },
mounted(e) {
  if (this.title == '') {
   this.title = 'Hello Laravel Mix';
  }
 },
methods: {
clear(e) {
   console.info('Title has been cleared.');
  }
}
})

Langkah selanjutnya mengkonfigurasi asset untuk dikompilasi. Tambahkan path berkas app.js pada webpack.mix.js.

Jika dirasa semua sudah benar, jalankan perintah npm run dev untuk mengkompilasi pada direktori yang telah ditentukan (dist/).

Nah, sekarang bandingkan script yang kita buat dengan script hasil kompilasi. Jauh berbeda bukan?

Apabila script siap digunakan untuk production, jalankan perintah npm run production untuk mengkompilasi ulang. Bandingkan lagi dengan script hasil kompilasi dengan yang sebelumnya kita buat.

Lebih lanjut, kalian bisa menggunakan method lain seperti less(), sass(), copy(), combine(), sampai dengan minify() untuk memanipulasi asset. Fungsinya bermacam-macam, mulai dengan menjaga kompatibilitas script pada berbagai versi browser, menggabungkan beberapa asset, sampai dengan minify asset agar ukurannya menjadi lebih ramping dan cepat ketika dimuat.

Laravel Mix tak hanya bisa digunakan bersamaan dengan framework Laravel, namun juga dapat pada framework lainnya. Bahkan, kalian bisa menggunakannya pada stand-alone project.

Ada banyak alasan pengembang menggunakan Laravel Mix pada stand-alone project, selain mudah digunakan, saya sendiri biasanya untuk menggunakannya untuk manajemen asset pada CDN.