ลองเล่น vbuild อีกทางเลือกที่เร็วกว่า vue-cli

vbuild: Install once, Build everywhere

vbuild เป็นอีกหนึ่ง build tool ที่น่าสนใจมาก เพราะใช้งานได้ง่ายๆ ด้วยคอนเซ็ป “no config just build” ทำให้เราไม่ต้องไปยุ่งอะไรกับ webpack ให้ยุ่งยากเลย แถมไม่ต้องรอติดตั้ง dependency สำหรับการ build ให้เสียเวลาเหมือน vue-cli อีกด้วย มันจึงเหมาะมากๆที่จะเอามาขึ้น prototype เร็วๆ โดยไม่ต้องไปสนใจอะไรมาก

“no config just build”

การติดตั้ง vbuild

สามารถติดตั้งผ่าน npm ได้เลย

npm i -g vbuild

หรือใครอยากจะใช้ yarn ก็ได้เหมือนกัน

yarn global add vbuild

การใช้งาน vbuild

วิธีใช้งาน vbuild ก็มีอยู่ด้วยกัน 2 แบบใหญ่ๆ คือ

1. ใช้ขึ้น Project ตั้งแต่ต้นด้วยคำสั่ง vbuild inti

วิธีนี้จะคล้ายๆกับการใช้ vue-cli เพราะจะสร้าง template มาให้เราพร้อมเข้าไปเขียน code ต่อได้เลย โดย code จะอยู่ใน /src

vbuild init my-project
cd my-project
npm install
npm run dev

หลังจากรันคำสั่ง npm run dev จะได้ผลลัพท์แบบนี้ออกมา

สิ่งที่อยากให้ลองสังเกตดูก็คือไฟล์ package.json เพราะในนี้จะมี dependency อยู่แค่อันเดียวคือ vue ส่วนตัวอื่นๆที่ใช้สำหรับ build จะถูกติดตั้งไปกับ vbuild ไปแล้ว ทำให้ประหยัดเวลา npm install ไปได้เยอะเลย

ตัวอย่างไฟล์ package.json ที่ถูกสร้างจาก vbuild init my-project

{
  "private": true,
  "name": "try-vbuild",
  "scripts": {
    "dev": "vbuild --dev",
    "build": "vbuild"
  },
  "dependencies": {
    "vue": "^2.0.0"
  }
}

2. ใช้คำสั่ง vbuild เองเลย

ถ้าเรารันคำสั่ง vbuild โดยไม่มี option อะไรเลยมันจะไปโหลดไฟล์ default entry point ให้เราที่ไฟล์ /src/index.js

หรือถ้าเรามีไฟล์ vue.config.js หรือ vue.config.json อยู่ที่ / มันก็จะไปดึงค่า config มาใช้เลยทันที

แต่ถ้าเราต้องการใช้ไฟล์ config อื่นก็สามารถใช้ option — config ได้ ตามตัวอย่าง

vbuild --config my-config.js

ถ้าใครอยางลองวิธีนี้ดู ก็ไปทำตามตัวอย่างได้ที่หน้าหลักของ vbuild ได้เลย

vbuild: Install once, Build everywhere

สรุป

• หลังจากเราติดตั้ง vbuild ไปแล้ว พวก dependency ต่างๆสำหรับการ build ก็จะถูกติดตั้งไปด้วยทำให้เราไม่ต้องมาติดตั้งใหม่ทุกครั้งที่รันคำสั่ง npm install ทำให้เราประหยัดเวลาไปได้เยอะเลย
• ถ้าเมื่อไหร่อยากจะเริ่มจริงจังก็ย้ายไปใช้ vue-cli ได้ทันที แค่ copy /src ไปใส่ก็เรียบร้อย
• อีกไม่นาน vbuild อาจจะได้เป็นส่วนหนึ่งของ vue-cli ก็ได้ เพราะคนทำถูกชวนเข้าไปเป็น core team ของ vuejs เรียบร้อยแล้ว
  ที่มา
  * https://github.com/egoist/vbuild/issues/9
  * https://github.com/vuejs/vue-cli/issues/173
• สุดท้าย vbuild ก็ไปได้แรงบรรดาลใจมาจาก create-react-app อีกเช่นเคย 😘

ก่อนจะจบอยากจะฝากให้ไปอ่าน Document กันบ่อยๆครับ เพราะมัน Update ตลอด และมีอะไรมากกว่าที่จะเอามาเขียนลงในนี้ได้เยอะเลยครับ

Introduction · GitBook