ลองใช้งาน Fusebox module bundler
Fusebox เป็น javascript module bundler เช่นเดียวกันกับ Webpack ใช้ในการ build ไฟล์ javascript ที่เราเขียนเป็น module รวมถึง dependencies ต่างๆ ซึ่งมีความเร็วสูงและใช้งานง่ายกว่า Webpack มาก ไปดูวิธีใช้งานกันดีกว่า
ก่อนอื่นสร้างโฟลเดอร์ก่อน
mkdir play-fusebox && cd $_เริ่มแรกก็ download ตัว fusebox มาก่อน ใครใคร่ใช้ npm ก็ใช้ npm หรือใครใคร่ใช้ yarn ก็ ใช้ yarn
npm install fusebox --save-devเพื่อความง่ายวันนี้เราจะลอง build typescript กันก่อน
หลายคนคงงง แต่ typescript ง่ายกว่าจริงๆ เพราะ fuse-box มันรองรับการ bundle typescript โดย default อยู่แล้ว ทำให้แทบไม่ต้อง set อะไรมากเลย
ก็ไปโหลด typescript มาก่อน
npm install typescript --save-devเสร็จแล้วสร้างไฟล์ชื่อว่า fuse.js แล้วเขียนตามนี้
var fsbx = require('fuse-box');fsbx.FuseBox.init({
homeDir: './src',
outFile: './build/bundle.js'
}).devServer('>index.ts');
init เป็น function ของ Fusebox เราก็ส่งค่า configuration เป็น object เข้าไป มาดูค่า config แต่ละตัวว่าหมายถึงอะไร
homeDir กำหนดค่าโฟลเดอร์เริ่มต้นที่จะให้ fusebox ไปอ่าน หรือก็คือ entry นั่นแหละ แต่เป็น directory นะ ไม่ใช่ไฟล์
outFile ก็คือชื่อไฟล์ output
devServer เป็น function สำหรับการรัน server ขึ้นสำหรับการ development ตรงนี้ให้ใส่ชื่อไฟล์ที่เราจะให้เป็น entry หรือไฟล์ main นั่นแหละ ซึ่งไฟล์นี้ต้องอยู่ใน homeDir ที่กำหนดไว้ข้างบน และต้องนำหน้าด้วยเครื่องหมาย “>” ด้วย
ก็เหมือน webpack-dev-server แหละ แต่มันง่ายขนาดนี้เชียว ไม่น่าเชื่อ ต้องลอง
แล้วเราก็ต้องมีไฟล์ html สำหรับ serve web ซึ่งในไฟล์ html จะต้อง include ไฟล์ javascript ที่ได้จากการ build ที่เรา set ไว้ก่อนหน้านี้ ก็คือ bundle.js
สร้างไฟล์ index.html ให้อยู่ในโฟล์เดอร์ build เพราะ ค่า default ของ devServer จะ serve html ทีโฟลเดอร์ build
mkdir build && touch build/index.htmlเขียนในโฟล์ตามนี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>Hello</h1>
<script src="bundle.js"></script>
</body>
</html>เสร็จแล้วลอง build ดู รันคำสั่ง
node fuse.jsจะขึ้นผลลัพธ์แบบนี้ เร็วมาก
22:49:46 : Launching dev server on port 4444
└── default (0 files, 53 Bytes)
└── fusebox-hot-reload@0.0.0 (0 files) 1.8 kB
└── fusebox-websocket@0.0.0 (0 files) 2.8 kB
└── events@0.0.0 (0 files) 9.8 kBBundle
Size: 14.4 kB
Time: 34ms
ลองไปที่หน้าเว็บด้วย url http://localhost:4444
ก็จะขึ้นหน้าเว็บแบบนี้
แต่เรายังไม่ได้เขียน code typescript เลย มาเริ่มเขียนกันดีกว่า
สร้างไฟล์ index.ts ในโฟล์เดอร์ src
แล้วลองเขียน code ง่ายๆดูก่อน
alert("Hi");save ไฟล์แล้วไปที่หน้าเว็บ ก็จะขึ้น alert แบบนี้
ตอนนี้เราก็มั่นใจว่า code ใช้งานได้แน่นอน ลืมบอกไม่ต้องเขียน tsconfig ก็ได้ fusebox มี config default ในตัวอยู่แล้ว แต่ถ้า config อะไรเพิ่ม ก็ให้เขียน ไฟล์ tsconfig.json ไว้ที่ rootPath ที่เดียวกับที่ fuse.js อยู่
ลองไปเขียนอะไรที่ซับซ้อนกว่านี้ ลบ code ใน index.ts แล้วเขียนตามนี้
let count: number = 0;setInterval(() => {
count++;
document.getElementsByTagName("h1")[0].innerText = count.toString();
}, 1000);
เราจะเขียนโปรแกรมนับเลขไปเรื่อยๆ ทุกๆ 1 วินาที แล้วก็แสดงผลบนหน้าจอ
save File แล้วก็ไปดูที่หน้าเว็บ refresh ซัก 1 ที ก็จะมีเลขนับบวกขึ้นไปเรื่อยๆ
ก็เท่านี้สำหรับการ set up fusebox สำหรับการ build typescript application เราก็สามารถเริ่ม develop ได้แล้ว
สามารถไปหาอ่าน document ได้ที่ http://fuse-box.org/ ก็จะมีบอกวิธีการ set up และ configuration ต่างๆ plugin ของ javascript ซึ่งต้องใช้ babel และ plugin สำหรับ build css ด้วย จบ
