มาเขียน Vue Component ให้คนอื่นใช้กันเถอะ
เขียนใช้เองมันก็ดี แต่จะดีกว่ามั้ย ถ้าใครๆก็เอาไปใช้ได้เหมือนกัน แถมอาจจะยังช่วยแก้บัคให้เราอีกด้วย
Vue Component คืออะไร?
มันก็คือ File .vue ทั่วๆไปในโปรเจคของเรา แต่จุดประสงค์ที่เราเขียนไว้ก็เพื่อใช้ซ้ำๆ หรือทำเป็น share component เพื่อให้ module อื่นเอาไปใช้งานได้โดยที่ไม่ต้องเขียนขึ้นมาอีกครั้งนั่นเอง
เราจะเริ่มยังไงดีนะ?
เราสามารถเริ่มด้วยการขึ้นโปรเจคแบบเดิมๆได้เลย เช่น vue init webpack my-component หรือจะ vue crete my-component ด้วย vue-cli3 ก็ได้เหมือนกัน
แต่สิ่งที่ต้องทำคือ เราต้อง config การ build project ให้ออกมาในรูปของ library ไม่ใช่ในรูปของ web app โดยจะแบ่งวิธีทำได้เป็น 2 แบบ คือ สำหรับของ vue แบบเก่า vue init กับ vue ที่ขึ้นด้วย vue-cli3 กันนะครับ
1. แบบเก่า build ด้วย bili
สิ่งที่ต้องทำถ้าเราใช้ bili เราก็ต้องติดตั้งมันก่อน ซึ่งต้องติดตั้ง 2 ตัว คือ bili แล้ว rollup-plugin-vue
npm install --save-dev bili rollup-plugin-vueจากนั้นก็ config นิดหน่อยที่ไฟล์ bili.config.js เอาไว้ที่ root ของ project เลย
จากนั้น ลอง build ด้วยคำสั่งง่ายๆของมันเลย
./node_modules/.bin/bili src/components/VueGithubStars.vueซึ่งคำสั่งตรงนี้สามารถเอาไปใส่ เป็น script ไว้ใน package.json ได้เลย และสามารถตัด ./node_modules/.bin/ ออกไปได้ทันที
ซึ่งแบบนี้จะสามารถใช้ได้ทั้งการขึ้นโปรเจคด้วย vue init และ vue create
2. แบบใหม่ build ด้วย vue-cli3
ตัวนี้ง่ายเลย ไม่ต้องลงอะไรเพิ่ม แต่แค่มีการ config อะไรซักนิดนึง ที่ไฟล์ vue.config.js ที่อยู่ที่ root ของ project เช่นกัน ซึ่งดูการ config ได้ที่ https://cli.vuejs.org/config/#vue-config-js
จากนั้นมาลอง build กันเลย ด้วยคำสั่ง
./node_modules/.bin/vue-cli-service build --target lib --name vue-github-stars src/components/VueGithubStars.vueเอาคำสั่งไปใส่ไว้ใน package.json ได้เหมือนกัน
โดยตัว vue-cli3 นี้นั้นสามารถ build ออกมาได้หลายแบบ เช่น Web app (default), Library และ web component โดยดูได้ที่นี่ https://cli.vuejs.org/guide/build-targets.html
เสร็จแล้วครับการ build ทั้ง 2 แบบ แล้วถ้าเราจะเอาไปใช้ ต้องทำอะไรอีกบ้างล่ะ?
Config อีกนิด ก่อนขึ้น git(hub) หรือ npm
ใกล้ใช้ได้แล้ว เหลือแค่เพิ่ม config ที่ไฟล์ package.json เพื่อบอกว่า file main ที่จะให้เรียกใช้ หลังจาก npm install คือ ไฟล์อะไร โดยการเพิ่ม
"main": "public/vue-github-stars.min.js","files": [ "public"],
ตรง public คือ output directory ที่เราตั้งค่าเอาไว้ตอนก่อน build นะครับ
ถ้ามี “private”: true อยู่ใน package.json ก็เอาออกไปด้วยนะครับ ไม่งั้นเดี๋ยวเอาขึ้น npm ไม่ได้
เอาขึ้น Github กันเลย
พอเอาขึ้น github ทั้งๆที่มี ไฟล์ ที่ build แล้วของเรา เราจะสามารถ npm install <github-username>/<repository> ได้เลย
แต่แบบนี้มันไม่คูล เราต้องเอาขึ้น npm สิ
Publish To NPM And Share To The World
ก่อนอื่นเราต้อง สมัครตัว https://npmjs.com กันก่อน จากนั้นเรามา login ที่ตัว shell เราเลยด้วยคำสั่ง npm login
ไป publish กันเถอะ
ให้เราเข้าไปที่ path ของตัว project แล้วก็ใช้คำสั่ง
npm publish
แค่นี้ vue component เราก็ขึ้น npm แล้ว เย้
ปล. ชื่อของ npm ขึ้นอยู่กับ ชื่อใน package.json นะครับ หากซ้ำก็แก้ตรงนั้นได้เลย
ปล2. ถ้าเราแก้แล้วจะเอาขึ้น npm ใหม่ เราจะต้อง เปลี่ยน version ทุกครั้ง โดยใช้ คำสั่ง npm version (major, minor, patch) ได้เลย
