มีอะไรใหม่ใน Vue CLI 3.0

เวลานี้ Vue CLI 3.0 ยังไม่ stable ถ้าใครจะใช้บน production ก็ระวังหน่อยนะครับ แต่ถ้าใครอยากจะลอง ก็สามารถลงได้ผ่าน ‘npm install -g @vue/cli’ เลยนะครับ

Vue CLI กำลังจะออกเวอร์ชั่นใหม่แล้วซึ่งจริงๆก็ทดสอบมาซักพักแล้วแต่ว่ายังไม่ได้มีใครพูดถึงมาก แต่ที่ผมอยากเอามาพูดถึงเพราะว่ามันเปลี่ยนไปเยอะมากๆและมันน่าจะกระทบคนที่ใช้ vue.js อยู่ทุกๆคน มาดูกันดีกว่าครับว่า Vue CLI เปลี่ยนอะไรไปบ้าง

ใช้ Vue Binary เต็มตัว

จากเดิมเวลาเรา build project เราจะใช้ command ของ npm หรือ yarn เป็นหลัก แต่ใน vue cli เวอร์ชั่นใหม่ เรามาใช้ binary ของ vue cli เองเลย ก็คือ vue-cli-service ซึ่งจะลงเป็น local module ของแต่ละ project ใน Docs พูดเอาไว้ชัดเจนว่า ถ้าใครชินกับ create react app จะใช้งานได้ง่ายเลย แต่สุดท้ายแล้ว ตอน create vue ก็ยังเอา npm wrap ไว้อยู่ดี

ใช้ Plugin แทน template

จริงๆต้องบอกว่าเรื่องนี้เป็นเรื่องใหญ่สุดเลยของ Vue-cli 3.0 เพราะว่า จากเดิมที่เราจะเริ่ม project ด้วยการ pull template คนอื่นมาใช้งาน ก็จะเปลี่ยนเป็นการเลือกว่าเราจะต้องการใช้ feature ไหนบ้าง สาเหตุหลักๆที่ต้องเปลี่ยนจาก template มาเป็น plugin เพราะว่าหลายๆครั้ง เราต้องการ feature บางอย่างใน template นึง แต่ดันไม่ใน template ที่เราใช้ ตัวอย่างเช่นใน Template webpack ใช้ webpack 3.6.0 แต่ template PWA ใช้ webpack 3.7 ถ้าอยากจะเลือกตัวที่ webpack ใหม่กว่าทางเลือกก็มีแค่
1. ใช้ template PWA ทีจะมีของที่ไม่ต้องการติดมา
2. อัพเอง ซึ่งถ้าแต่ 3.6 -> 3.7 คงไม่มีปัญหา แต่ถ้า เป็น 3.6 -> 4.0 ก็พังทันที

ด้วยสาเหตุนี้ตัว vue-cli จึงเปลี่ยนเป็นระบบ plugin ที่ใครอยากใช้ plugin อะไรก็เลือกเอาเอง หรือ ถ้าต้องการทำ plugin ใหม่อะไรก็ใส่ไปได้เลย หรือจะเพิ่มเข้าไปทีหลังก็ยังทำได้ ด้วยการ invoke แต่ถ้าใครยังอยากใช้ template อยู่ก็สามารถใช้ vue init แบบเดิมได้เหมือนกัน

ตัวอย่าง plugin ที่มีมาให้

Vue.config.js

vue พยายามจะทำให้ config ทุกอย่างดูง่ายขึ้น ไม่กระจัดกระจาย ซึ่งวิธีที่ vue เลือกใช้คือ การรวมทุกอย่างเข้าไปไว้ใน ไฟล์ ชื่อว่า vue.config.js ซึ่งที่จะเปลี่ยนเยอะๆเลยก็คือ webpack config ที่ปกติเราสามารถเข้าไปแก้ไขได้เลยแต่ตอนนี้หากเราต้องการเพิ่ม plugin อะไร เราต้องเข้าไปแก้ ใน vue.config.js ซึ่งสิ่งที่เราเพิ่มลงไปจะไป merge กับ config default ของ vue

// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}

ถ้าเราอยากรู้ว่าตอนนี้ webpack config เราหน้าตาเป็นยังไงใน project เรา ก็พิมพ์ vue inspectใน project ได้เลย ตรงนี้ vue cliam ไว้ว่าอยากแก้อะไรไม่ต้อง eject ออกมา ถ้าอยากแก้อะไรเพิ่มไปใน config ได้เลย

Upgrade dependency ใหม่ทั้งหมด

Dependency ใน vue เดินจะใช้ Webpack หรือ Babel เวอร์ชั่นเก่าๆ ทั้งนั้น แม้กระทั่ง ตัว Template PWA เองก็ไม่ได้ใช้ Workbox แต่ใน Vue-cli ใช้ของใหม่ทั้งหมด ตั้งแต่ Webpack 4, Babel 7.0, Workbox 3.0 ซึ่งด้วยระบบ plugin ของพวกนี้จะ upgrade ง่ายขึ้นมากๆ

มี UI แล้ว

หลังจากที่ต้องพิมพ์ด้วย CLI มาตั้งนาน ตอนนี้ Vue cli มี UI ให้สร้าง project หรือ แก้ไข หรือแม้กระทั้ง สั่ง Build project ก็ได้ บอกเลยครับ น้ำตาจะไหล….

จริงๆหลายๆคนตอนนี้ก็คงใช้ Vue-cli 3.0 กันแล้ว อาจจะมีบั๊กบ้างแต่บอกได้เลยว่าถ้าเสร็จเมื่อไหร่ น่าจะเจ๋งสุดๆไปเลย