DEV Community

Cover image for เริ่มต้น Quarkus 3 part 2.2 web bundler
Pramoth Suwanpech
Pramoth Suwanpech

Posted on

เริ่มต้น 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>
Enter fullscreen mode Exit fullscreen mode

จากนั้นเราก็ไปหา 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>
Enter fullscreen mode Exit fullscreen mode

แน่นอนว่าไม่ต้อง 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()
Enter fullscreen mode Exit fullscreen mode

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

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

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

Image description

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

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

    <span x-text="count"></span>
</div>
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)