Setup projek Vue dengan berbagai Module Bundler tanpa Vue-CLI

Langkah-langkah setup sebuah projek Vue dengan berbagai Module Bundler terkini dan tanpa bantuan Vue-CLI.

Vue pada dasarnya sudah memiliki tools yang secara keren bisa memudahkan kita untuk men-generate struktur folder beserta semua konfigurasi yang dibutuhkan baik untuk lingkungan development di lokal maupun untuk lingkungan production yakni Vue-CLI yang belum lama ini mengeluarkan hasil iterasi major-nya pada 3. Ada banyak perubahan dan peningkatan pada versi 3 yang dikeluarkan Vue-CLI dibandingkan versi 2 sebelumnya, seperti salah satunya mereka memperkenalkan Plugin System pada Vue-CLI sehingga tidak perlu lagi mengekspos keseluruhan konfigurasi yang ada namun kita sebagai pengguna cukup bermain pada file vue.config.js dan kita sudah bisa mengubah berbagai  konfigurasi bawaan.

Seperti kata orang-orang, “ada banyak jalan menuju Roma”. Pun begitu ketika kita ingin menggunakan Vue, kita tidak harus selalu menggunakan Vue-CLI untuk men-generate konfigurasi untuk projek Vue. Kita bisa saja menulis konfigurasi sendiri dari dasar sesuai dengan kebutuhan yang ada di projek kita.

Nah, di artikel ini kita akan mengeksplorasi beberapa konfigurasi yang bisa kita gunakan untuk projek Vue kita. Sengaja pada artikel ini pula saya berikan beberapa alternatif Module Bundler selain webpack, agar kita bisa sama-sama belajar. Silahkan disimak, jangan lupa baca bagian disclaimer ya…

Disclaimer: penulis hanya menyajikan berbagai module bundler sesuai dengan pengetahuan yang saat ini dimiliki. Tulisan ini tidak ditujukan sebagai artikel komparasi module bundler melainkan sebagai sarana belajar.  Segala persepsi, kesimpulan dan pendapat silahkan diambil  dengan resiko yang ditanggung masing-masing pula.

Webpack

Webpack Logo

Webpack menjadi salah satu module bundler terpopuler saat ini bukan tanpa alasan, kemampuannya untuk di custom sesuai kebutuhan dari yang sederhana sampai yang kompleks membuat banyak sekali developer yang memilih menggunakannya pada projek-projeknya. Meskipun bagi beberapa developer terutama yang baru dengan dunia JavaScript seringkali merasa sangat susah untuk memahami cara kerja serta berbagai konfigurasi yang harus disetel ketika menggunakan webpack, namun hal ini tidak menyiutkan kekerenan webpack sendiri.

Berikut adalah langkah-langkah setup Vue menggunakan webpack tanpa Vue-CLI: 

Pertama kita mesti tau urutan hal yang akan kita lakukan di webpack, secara sederhana bis saya jelaskan beberapa hal yang akan kita lakukan adalah: membaca file entry dengan ekstensi .js, membaca file stylesheet yang ada di dalam file .vue, mentranspile file .vue, mentranspile file .js dengan Babel, mengekstrak file CSS dari JS, meng-inject hasil build ke dalam HTML, mengompress file HTML, dan memindahkan semua static file. Banyak ya??? Sabaaar, webpack memang jahat (:-D)…

Setelah kita tau, kita akan mulai setup beberapa konfigurasi kebutuhan untuk projek Vue kita dengan urutan sebagai berikut:

Setup Babel

Pada projek kali ini saya menggunakan Babel versi 7, berikut yang saya lakukan:

Tambahkan beberapa dependency berikut pada devDependencies file package.json untuk menggunakn Babel pada projek kita:

@babel/core”: “^7.1.2”,
“@babel/preset-env”: “^7.1.0”,
“babel-core”: “7.0.0-bridge.0”,
“babel-loader”: “^8.0.4”,

Bisa juga dengan menggunakan command: yarn add @babel/core @babel/preset-env babel-core@7.0.0-bridge.0 babel-loader -D

Tambahkan file .babelrc dengan isi sebagai berikut:

Setup Webpack Runner

Setidaknya kita harus menambahkan dependency  webpack dan  webpack-cli untuk bisa menggunakan webpack, namun karena kita juga harus membutuhkan fitur semacam Hot Module Replacement maka kita perlu menambahkan  webpack-dev-server sebagai dependency tambahan agar bisa berjalan pada lingkungan lokal. Berikut cara menambahkan webpack kedalam projek kita, cukup dengan menambahkan daftar berikut kedalam  devDependencies:

“webpack”: “^4.20.2”,
“webpack-cli”: “^3.1.2”,
“webpack-dev-server”: “^3.1.9”

Bisa juga dengan menggunakan command: yarn add webpack webpack-cli webpack-dev-server -D

Setup entry dan output file

Webpack membutuhkan paling tidak konfigurasi untuk entry atau script terdepan yang akan menjadi pintu bagi kesemua bundle dan juga kita akan menambahkan output yang menjadi konfigurasi untuk hasil keluaran yang akan dibuat oleh webpack. Kita akan menyetel agar webpack memberikan nama sesuai dengan entry yang kita berikan serta menambahkan postfix sebuah hash pada setiap file keluaran untuk lingkungan production. Konfigurasi ini akan kita letakan pada file webpack.config.js yang merupakan file konfigurasi webpack default. Berikut contoh konfigurasi entry dan output untuk webpack kita: 

Membaca file stylesheet

Kita berasumsi bahwa akan menggunakan CSS pada projek kita, dan karena saya pecinta SASS Pre-processor maka saya akan menambahkan konfigurasi untuk membaca file jenis ini. 

“css-loader”: “^1.0.0”,
“node-sass”: “^4.9.3”,
“sass-loader”: “^7.1.0”,
“vue-style-loader”: “^4.1.2”,

Bisa juga dengan menggunakan command: yarn add css-loader node-sass sass-loader vue-style-loader -D.

Dan berikut adalah konfigurasi sederhana untuk membaca file stylesheet tersebut:

Transpile file .vue

Single File Component (SFC) yang diusung Vue ini mengharuskan kita melakukan transpile menjadi file-file yang bisa dibaca browser. Kita perlu menambahkan vue-loader dan vue-template-compiler untuk melakukan transpile ini, berikut contoh kodenya:

Compile file .js dengan Babel

Loader paling penting untuk bisa menulis kode JavaScript dengan berbagai fitur terkini adalah babel-loader yang disetel untuk melakukan kompilasi terhadap semua file berekstensi .js  yang ada. Berikut contoh sederhana untuk setelan konfigurasi babel-loader :

Inject file build dan kompress HTML

Untuk melakukan inject hasil build kedalam HTML kita menggunakan bantuan dari html-webpack-plugin, plugin ini juga bisa membantu kita dalam proses minify file HTML yang jadi keluaran webpack, pun kita bisa melakukan minify untuk semua inline CSS dan JS yang ada di HTML dengan mudah. Berikut contoh konfigurasinya:

Ekstrak file CSS

Kita melakukan ekstaksi file CSS menggunakan mini-css-extract-plugin yang dapat kita install dengan command yarn add mini-css-extract-plugin -D lantas kita akan mengubah sedikit konfigurasi webpack kita, yakni:

Memindahkan file static

Kita melakukan memindahkan folder static ke dalam folder hasil build kita menggunakan copy-webpack-plugin yang dapat kita install dengan command yarn add copy-webpack-plugin -D lantas kita akan mengubah sedikit konfigurasi webpack kita, yakni:

Menjalankan build

Untuk menjalankan build dari webpack ini saya memisahkan antara development di lokal dengan ketika untuk lingkungan production. Berikut script yang saya gunakan untuk menjalankan build proses:

“dev”: “webpack-dev-server –hot –color –open”,
“build”: “webpack –progress –hide-modules –color”,

Poi.js

Poi.js merupakan wrapper bagi webpack yang dibuat oleh Egoist yang juga merupakan salah satu core team member dari Vue. Bila kita senang dengan berbagai kehebatan webpack namun kesulitan dengan konfigurasi yang terlalu njelimet, maka Poi.js adalah jawaban bagi kegelisahan kalian. Poi.js hadir dengan konfigurasi yang sangat sederhana (bisa dibilang tanpa konfigurasi sih) bahkan untuk pendatang baru sekalipun. Mari kita ikuti langkah-langkah berikut agar terasa bagaimana mudahnya menggunakan Poi.js.

Berikut adalah langkah-langkah setup Vue menggunakan Poi.js tanpa Vue-CLI: 

Kita hanya perlu memasang library poi dan vue-template-compiler untuk bisa menggunakan Vue dengan Poi.js, namun karena kita akan menggunakan pre-processor SASS maka kita akan menambahkan beberapa library tambahan seperti css-loader, node-sass dan sass-loader.

Seperti saya tulis sebelumnya Poi.js ini tidak membutuhkan konfigurasi macam-macam, kita cukup tambahkan library-nya dan jalankan build nya seperti berikut, dan woowwww semua bisa jalan dengan baik:

Rollup.js

Rollup.js Logo

Rollup.js ini salah satu alternatif lain kalau kita tidak mau menggunakan webpack pada projek kita, Konfigurasinya sendiri susah-susah gampang bagi saya pribadi, tapi masih lebih sederhana lah dibanding webpack meskipun untuk beberapa hal akan lebih susah ketika memilih Rollup. Tapi tidak apalah kita coba-coba melakukan setup projek Vue dengan module bundler yang satu ini, silahkan disimak.

Berikut adalah langkah-langkah setup Vue menggunakan rollup.js tanpa Vue-CLI: 

Karena Rollup menggunakan Plugin System maka kita akan banyak bermain dengan plugin untuk mengerjakan suatu task di Rollup, berikut paling tidak dependencies yang akan kita butuhkan untuk setup projek Vue kita:

“node-sass”: “^4.9.4”,
“rollup”: “^0.66.6”,
“rollup-plugin-buble”: “^0.19.4”,
“rollup-plugin-css-only”: “^0.4.0”,
“rollup-plugin-eslint”: “^5.0.0”,
“rollup-plugin-filesize”: “^5.0.1”,
“rollup-plugin-node-resolve”: “^3.4.0”,
“rollup-plugin-postcss”: “^1.6.2”,
“rollup-plugin-vue”: “^4.3.2”,
“vue-loader”: “^15.4.2”,
“vue-template-compiler”: “^2.5.17”

Rollup meletakkan konfigurasinya pada file rollup.config.js, berikut contoh konfigurasi untuk projek Vue kita ini:

Untuk menjalankan proses build kita bisa menggunakan perintah berikut:

Parcel

Parcel Logo

Parcel menjadi alternatif lain bila kita bosan dengan webpack, terkenal dengan zero configuration-nya (memang zero sih, karena kita tidak akan membuat file konfigurasi seperti yang Poi.js lakukan).

Berikut adalah langkah-langkah setup Vue menggunakan parcel tanpa Vue-CLI: 

Kita membutuhkan beberapa dependencies di dalam devDependencies untuk bisa menjalankan projek Vue menggunakan Parcel:

“@vue/component-compiler-utils”: “2.3.0”,
“css-loader”: “^1.0.0”,
“node-sass”: “^4.9.4”,
“parcel-bundler”: “1.10.3”,
“sass-loader”: “^7.1.0”,
“vue-template-compiler”: “^2.5.17”

Selain itu kita harus menambahkan dependencies dibawah kedalam dependencies package.json kita:

“vue-hot-reload-api”: “^2.3.1”

Untuk menjalankan proses build di parcel, kita bisa menggunakan perintah berikut:


Demikian tulisan sederhana pada artikel ini, semoga dengan memberikan alternatif module bundler lain kita jadi punya pandangan berbeda soal Vue. Vue bisa dijalankan bahkan bila kita tidak begitu senang dengan webpack ataupun ingin menggunakan webpack namun dengan konfigurasi manual sendiri, silahkan. Kesemuanya mungkin sekali dikerjakan bila kita mau belajar.

Semoga bermanfaat tulisannya…


Semua kode dalam artikel ini bisa diikuti di: bit.ly/setup-vue´╗┐

 

Irfan Maulana

Seorang pengembang web antar muka dengan pengalaman lebih dari 5 tahun di beberapa perusahaan. Pengetahuan saya meliputi HTML, CSS, dan JavaScript. Saya juga memiliki beberapa projek open source yang bisa kalian lihat di Github saya @mazipan. Selalu senang hati bisa berbagi pengetahuan dan pengalaman dengan teman-teman.