Membuat Vue.js Plugin untuk pemula

Belajar membuat Vue.js Plugin yang ditujukan untuk para pemula dari awal sampai publish ke npm registry.

Setelah di artikel ini kita sedikit membahas soal apa itu Vue.js Plugin maka kali ini kita akan langsung belajar membuat Vue.js Plugin dari awal sampai bisa publish ke npm registry. Langsung saja, silahkan disimak beberapa langkah-langkahnya.

Pertama adalah siapkan environment untuk development Vue.js project sederhana, untuk hal ini saya menggunakan beberapa dependency berikut yang mungkin saja ada beberapa yang tidak dibutuhkan namun tidak sempat lagi inspeksi mana yang tidak digunakan, berikut contoh snippet dari dependency yang saya gunakan di package.json :

Setelah menambahkan dependency dan menginstall semuanya maka dalam rangka menyiapkan environment ini, kita akan buat webpack.config.js, beberapa loader yang kita gunakan adalah babel, vue-loader dan sass-loader, berikut contoh konfigurasi webpack yang kita buat untuk kebutuhan development kita :

Untuk menjalankan webpack ini di development kita bisa menambahkan script di package.json kita dengan key apapun, seperti “dev” sehingga kita bisa menggunakan shortcut untuk menjalankan script ini lewat npm run nama_key. Berikut sedikit contoh script untuk menjalankan webpack tersebut dalam mode development :

Bila anda memutuskan untuk mengganti nama file dari konfigurasi ini, maka anda perlu menambahkan — config nama_file di dalam script tersebut.

Setelah environment siap, maka kita akan masuk pada fase development kita.
Seperti terlihat dari konfigurasi webpack, bahwa kita menggunakan file main.js sebagai entry dari aplikasi kita. Maka file tersebut adalah file pertama yang harus kita buat agar webpack bisa berjalan tanpa error. File main.js ini akan berisi instance dari Vue.js kita. berikut contoh file main.js tersebut :

File main.js tersebut akan menarik dependency dari file App.vue sebagai root dari aplikasi Vue.js kita, maka kita bisa membuat file .vue kosong terlebih dahulu untuk mengakomodir hal ini. Berikut contoh file App.vue kosong yang kita buat :

Untuk memastikan aplikasi vue kita berjalan dan semua setup environment kita bisa berjalan maka kita perlu buat index.html sebagai halaman awal, berikut adalah contoh index.html buatan kita :

 

 

Seharusnya sampai sini, aplikasi kita paling tidak sudah bisa di running dan akan menampilkan index.html hasil buatan kita yang kemudian div dengan id app akan di-inject dengan kode yang ada di file App.vue kita.

Langkah selanjutnya, kita bisa fokus membuat Vue.js Plugin kita. Anggap saja kita akan membuat Plugin yang berupa Filter untuk mem-format sebuah angka menjadi sebuah currency atau format mata uang. Kita harus membuat file tersendiri untuk ini, karena nantinya file ini akan kita jadikan library yang independen dan bisa digunakan oleh orang lain juga.

Kita akan membuat file baru dengan nama VueCurrencyFilter.js, file ini merupakan Plugin kita. Ada beberapa dasar untuk bisa membuat Plugin di Vue.js, berikut adalah kode utama untuk membuat Plugin :

Seperti bisa kita lihat bahwa dasar dari membuat Plugin adalah menambahkan install dengan parameter Vue Instance dan bisa juga ditambahkan parameter object konfigurasi lainnya.
Karena kita akan membuat sebuah Filter sebagai Plugin maka akan kita tambahkan sintaks dasar untuk membuat Filter di Vue.js, seperti berikut :

Kita bisa menambahkan sendiri logic untuk men-format/transform data inputan menjadi balikan yang sudah dalam bentuk format mata uang di tanda komentar yang sudah saya buat. Tentu ada banyak alternatif solusi di luar sana, kita akan coba cari di stackoverflow.com saja. Berikut adalah link dari stackoverflow yang saya temukan : https://stackoverflow.com/a/14428340/2856792

Berikut adalah setelah kita meng-implementasikan logika yang kita temukan di stackoverflow.com tersebut :

Sampai disini harusnya kode tersebut sudah bisa digunakan, namun saya akan mencontohkan bila symbol dari currency yang di kode tersebut masih hardcode maka akan kita jadikan parameter yang bisa di set tergantung kebutuhan. Berikut contoh kodenya :

Selesai sudah Plugin sederhana kita, berikutnya kita akan mencoba menjalankan Plugin Filter kita dengan memanggil di main.js kita. Berikut adalah contoh kode main.js yang sudah menggunakan Plugin Filter kita :

Setelah menambahkan kode diatas maka kita bebas menggunakan Filter yang telah kita buat dimanapun di dalam aplikasi Vue.js kita tanpa harus membuat ulang di setiap komponen. Berikut contoh App.vue yang menggunakan Plugin Filter kita tadi :

 

 

Bagian terakhir dari artikel ini adalah membuat Vue.js Plugin yang telah kita buat menjadi library yang bisa digunakan ulang oleh orang lain dengan cara di bundle kemudian kita publish ke npm registry. Kita akan memanfaatkan ilmu hitam dari webpack untuk membuat output dengan target umd (Universal Module Definition) yang lebih universal terhadap berbagai macam penggunaan.

Untuk membuat output umd ini file config webpack akan saya pisah dengan membuat file baru. Berikut adalah contoh file konfigurasi webpack untuk membuat library umd tersebut :

Webpack konfigurasi ini bisa dijalankan dengan script :

Dengan menjalankan script ini kita akan membuat file baru dengan nama VueCurrencyFilter.bundle.js di dalam folder dist/

Setelah berhasil membuat file bundle dari Plugin kita, maka kita akan memulai persiapan untuk publish ke registry npm. Sebelumnya perlu kita ketahui bahwa secara default npm akan mengunggah semua kode yang ada di repository kita ke npm registry ketika kita memberikan perintah npm publish. Makin banyak file yang kita unggah juga akan berakibat makin lama ketika seseorang berusaha mendownload dan menggunakan library kita lewat npm. Maka dari itu kita perlu pilih-pilih terlebih dahulu file mana yang akan kita unggah dan file mana yang tidak perlu. Hal ini bisa dilakukan dengan mudah dengan menambahkan files di package.json, seperti contoh berikut :

Setelah menambahkan files, kita juga perlu menambahkan main script kita di package.json, gunanya agar ketika orang melakukan import tidak perlu mencari folder tertentu namun bisa langsung ke library kita saja. Kita akan ambil file hasil build webpack sebagai main script kita seperti berikut :

Dan silahkan berikan perintah kepada npm untuk publish dengan
npm publish 😅 !!!

Semua kode yang saya share sudah tersedia di Github dan sudah di publish di npm: https://github.com/mazipan/vue-currency-filter

Ada beberapa repository lain dari saya juga yang mungkin bisa menjadi referensi untuk anda belajar bagaimana membuat Vue.js Plugin ini, berikut daftarnya silahkan di cek dan jangan lupa 🌟 di repository githubnya :

  1. vue2-simplert-plugin (Vue2-Simplert as Vue.js Plugins)
  2. vue-complexify (Vuejs porting library from jquery.complexify.js)

Demikian tulisan singkat dari saya, semoga bermanfaat.

Tulisan ini juga telah dipublikasikan di medium: https://medium.com/vuejs-id/membuat-vue-js-plugin-untuk-pemula-3ae9921ade02

 

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.