เริ่มต้น Quarkus 3 part 2.2 web bundler

หลังจากที่เราได้ serverside rendering Qute แล้วจากบทความก่อนหน้านี้ https://dev.to/pramoth/erimtn-quarkus-3-part-2-web-4bkm ในบทความนี้เราจะเอา javascript dependencies (npm) เข้ามาใช้ใน Qute template โดยใช้ตัวช่วยที่ชื่อว่า Web Bundler ซึ่งเจ้าตัวนี้จะใช้ mvnpm(ก็เหมือน webjar แต่ว่ามันสร้าง jar auto ฉนั้นมันจึงมี version ใหม่ๆมาเร็วเท่ากับใน npm registry เลยทีเดียว

ในบทความนี้เราจะลองทำ Hello world ด้วย AlpineJS กันครับ
เริ่มต้นเพิ่ม Web Bundler dependency ใน pom.xml ตามนี้

<dependency>
    <groupId>io.quarkiverse.web-bundler</groupId>
    <artifactId>quarkus-web-bundler</artifactId>
    <version>1.5.2</version>
</dependency>

จากนั้นเราก็ไปหา npm ที่เราจะใช้งาน แต่ว่าไปหาจากเวบ https://mvnpm.org/ นะครับ ก็ค้นหาชื่อตาม npm registry นั้นแหละ
จากนั้นก็เอามาใส่ใน pom.xml

<dependency>
    <groupId>org.mvnpm</groupId>
    <artifactId>alpinejs</artifactId>
    <version>3.14.0</version>
    <scope>provided</scope>
</dependency>

แน่นอนว่าไม่ต้อง restart quarkus เหมือนเดิม มันจะ load dependencies แล้ว reload ให้เลย
เจ้า Web Bundler จะไปหา js ที่เป็น entry point โดยจะหาจากไฟล์ใน src/main/resources/web/app/**
ให้เราสร้างไฟล์ index.js ขึ้นมาโดยมี content โดย import Alpinejs มาใช้งานตามเอกสารของเขา ดังนี้

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

จากนั้นให้เอา {#bundler /} ไปใส่ใน hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    {#bundle /}
</head>
....

เมื่อเรา refresh /hello เราจะพบว่า js ของเราถูก import เข้าไปที่หน้า index พร้อมกับ dependencies!! ง่ายสุดๆ

ทดลองใส่ alpinejs ไปใน body

<div x-data="{ count: 0 }">
    <button x-on:click="count++">Increment</button>

    <span x-text="count"></span>
</div>

refresh แล้วดูผลลัพธืได้ทันที ว้าววว

ปล. สำหรับใครที่หา dependencies mvnpm ไม่เจอให้ไปเพิ่ม repo ตามเอกสารจากเวบนี้นะครับ
https://docs.quarkiverse.io/quarkus-web-bundler/dev/advanced-guides.html

Blog

เริ่มต้น Quarkus 3 part 2.2 web bundler

Pramoth Suwanpech

Join Our Newsletter. No Spam, Only the good stuff.

Related