Plopjs: Boost Your Development Process🚀
Pernah gak kamu bosan menulis boilerplate code javascript/typescript yang sama berulang kali? atau sering merasa kesulitan saat membuat komponen atau kode yang konsisten? Kalau saya pribadi sih sering dan masih sering sekali menulis kode yang gak konsisten apalagi jika ngerjainnya sama teman. Nah, masalah terebut ssebenarnya udah banyak solusinya bahkan yang paling simpel adalah dengan menggunakan extention yang ada di VScode. Tapi, kali ini saya baru saja nyobain library yang cocok untuk permasalahan tersebut, yaitu plop.js.
Plop bisa dibilang sebagai “micro-generator framework”. Mengapa mini? Karena Plop adalah tool kecil yang menawarkan cara simpel untuk membuat kode atau file teks datar lainnya secara konsisten.
Gimana maksudnya? Kita semua pasti pernah membuat struktur dan pola tertentu dalam kode kita (misalnya route, controller, component, helper, dll). Pola-pola ini bisa berubah dan berkembang seiring berjalannya waktu. Nah, saat kamu butuh membuat pola baru, nggak selalu gampang untuk mencari file di codebase yang mewakili “praktik terbaik” terbaru.
Disinilah Plop datang menyelamatkan! Dengan Plop, kita bisa menyimpan metode “best practice” untuk membuat pola tertentu. Kode ini bisa langsung dijalankan dari terminal dengan mengetik plop.
Dengan Plop, kamu nggak perlu lagi pusing mencari file yang tepat untuk di-copy di codebase. Selain itu, Plop juga membuat proses pembuatan file baru menjadi jauh lebih mudah dan efisien. Intinya, Plop membuat “the right way” menjadi “the easiest way” untuk membuat file baru.
Nah, setelah saya baca-baca mengenai plop.js ternyata plop.js ini bisa bisa digunakan untuk kode Typescript juga. Plop.js juga memungkinkan kita untuk membuat custom template sesuai dengan standar atau convention yang kita miliki. Selain itu, plop.js juga dapat diintegrasikan dengan berbagai alat pengembangan lainnya, seperti linters, formatters, dan task runners.
Instalasi
- Tambahkan Plop ke project kamu
pnpm install --save-dev plop2. Buatlah plopfile.js di root directory
Setelah Plop terpasang dan kamu sudah membuat generator, saatnya menggunakan Plop dari terminal. Menjalankan plop tanpa parameter apapun akan menampilkan daftar generator yang bisa kamu pilih. Kamu juga bisa langsung menjalankan generator tertentu dengan mengetikkan plop [namaGenerator].
Catatan: Jika kamu tidak menginstall Plop secara global, kamu perlu membuat script npm untuk menjalankan Plop.
Praktek di Project
Nah disini saya coba mengimplementasikan plop.js pada project Next.JS 14, dimana untuk memudahkan proses development, dokumentasi, dan testing saya memanfaatkan plop.js untuk men-generate-kan template komponen yang saya ingin bangun. Btw, di project ini saya menggunakan Strorybook untuk dokumentasi UI dan Vitest untuk testing.Nah disini, saya bakal mencoba membuat template komponen menggunakan plopjs.
- Setup template kamu
Di sini saya meyimpan template plop saya di root directory, dan di sini saya buat yang sederhana dulu.
2. Sesuaikan Plopfile
3. Mencoba generator
Setelah semuanya ter-setup, untuk membuat komponen kita bisa menggunakan command pnpm plop , lalu silahkan mengisi nama komponen contohnya Paragraf. Setelah itu, plop akan men-generate template yang sudah kita setup sebelumnya.
Karena saya ingin menyesuaikan isi dari komponen Paragraf, maka saya akan menyesuaikan kembali komponen, beserta stories dan testing componentnya. Ini adalah hasil akhir dari komponen, stories, dan component testing dari Paragraf.
Nah, sekarang waktunya untuk melihat hasil testing dan UI pada komponen Paragraf.
Kesimpulan
Ketika harus menuliskan template code yang sama berkali-kali terkadang sangat membosankan dan memakan banyak waktu, nah plopjs merupakan library yang sangat membantu developer saat menghadapi masalah tersebut. Developer cukup membuat template code, misalnya template membuat controller, komponen, route, helpers dan lain-lain. Lalu, ketika ingin membuat code dengan template yang sudah dibagun tadi, cukup dengan menggunakan CLI. Hal ini menurut saya sangat membantu, saya tidak perlu men-setup kode-kode tersebut secara manual yang memakan waktu yang lumayan lama.
