https://user-images.githubusercontent.com/19409/31321658-f6aed0f2-ac3d-11e7-8100-1587e676e0ec.png

VueJS with parcel

สวัสดีครับท่านผู้อ่าน วันนี้ก็จะมาเล่าประสบการณ์การสร้าง VueJS Project ด้วย Parcel ซึ่งทำให้ Developers เขียน VueJS ได้สนุกมากยิ่งขึ้นครับ ทั้งนี้ต้องขอบคุณ Thongchai Lim ที่แนะนำและช่วยเหลือจนผมพอเข้าใจและทำได้บ้าง ก็เลยนำมาแชร์ต่อ :)

ติดตั้ง parcel-bundler

npm install -g parcel-bundler

Note: เพื่อความสะดวกในการใช้งานแนะนำให้ติดตั้งแบบ global package ไปเลยยครับ

ทดสอบการติดตั้ง parcel ด้วย การ run parcel -V

Note: กรณีติดตั้ง nodeJS แบบ zip files(tar.gz .zip …etc) บน ubuntu หรือ mac OS อย่าลืมทำ link ไปที่ /usr/bin ด้วยนะครับ เดี๋ยวจะใช้ command execution ไม่ได้นะ สำหรับ ubuntu18.04 สามารถทำตามนี้ได้

sudo /your-path-nodeJS-dir/bin/parcel /usr/bin
Example: 
sudo ln -s npm install /opt/node-v8.11.3-linux-x64/bin/parcel /usr/bin/

Folders structure ของ Project

Folders structure

สร้าง package.json

npm init

Note: อย่าลืมเปลี่ยน author เป็นชื่อและอีเมล์ ของตัวเองนะครับ !

ติดตั้ง VueJS ผ่าน npm

npm install vue --save-dev
// --save-dev บอกให้ npm save package name ลงที่ package.json ด้วย

Note: หากไม่ได้ทำการสร้าง file: package.json ตัว options — save-dev จะไม่ทำการบันทึก package name ของท่านลง package.json(จริงๆควรสร้างทุกครั้ง)

Example source code

index.html

main.js

App.vue

HelloWorld.vue

สร้าง scripts สำหรับใช้งาน parcel ใน package.json file

Launch application ด้วย parcel

npm run dev

สรุป

ส่วนตัวมองว่า parcel ทำให้เราสามารถขึ้น project ด้วย VueJS ได้เร็วมากยิ่งขึ้นเพราะ parcel จะจัดการ packages ต่างๆ ที่เราใช้งานให้เองอัตโนมัติ แต่ไม่ได้บอกว่าดีกว่า webpack นะครับ แค่เป็นอีกตัวเลือกนึ่งเท่านั้น สุดท้ายแล้วก็เลือกใช้ให้เหมาะกับงานและทีมงานของท่านครับ บรั๊ย~~~

Reference:

Parcel

https://jonathanmh.com/using-vue-js-with-parcel-js-tutorial/