Bundle และ Publish คอมโพเนนต์ Vue ดั่งมืออาชีพด้วย Poi

แปลมาจาก “Bundle and publish your Vue component like a pro”
— โดย EGOIST

เวลาที่คุณจะสร้างคอมโพเนนต์ .vue เจ๋งๆสักอันเพื่อให้คนอื่นสามารถนำไปใช้ได้ สิ่งที่คุณต้องทำคือ bundle มันซะ ให้ออกมาในรูปแบบ Common JS หรือ ES Module

ก่อนอื่น สร้างคอมโพเนนต์ของคุณกันเลย MyComponent.vue :

<template>
  <div>{{ msg }}</div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'hello'
    }
  }
}
</script>

และเรามาเริ่มต้นกันเลย ด้วย Poi

poi build MyComponent.vue --format cjs

และในตอนนี้ คุณก็จะได้คอมโพเนนต์ของคุณในรูปแบบของ Common JS ในโฟลเดอร์ dist:

แต่ว่าในบางครั้ง คุณอาจไม่ต้องการ source map กับไฟล์ HTML
คุณอาจไม่อยากได้ไฟล์ชื่อ client.js ในโฟลเดอร์ dist แต่คุณอาจจะต้องการไฟล์ชื่อ index.js หรือเป็นชื่อคอมโพเนนต์เลยก็ย่อมได้ครับด้วยวิธีนี้

หรือถ้าขี้เกียจเขียนคำสั่งยาวๆ ก็ใช้คำสั่ง poi build กับไฟล์ config ของ Poi แทนได้ครับ

poi.config.js:

module.exports = {
  entry: './MyComponent.vue',
  filename: {
    js: 'MyComponent.js'
  }
  sourceMap: false,
  html: false,
  format: 'cjs'
}

Publish

เมื่อต้องการ publish คอมโพเนนต์ สิ่งที่คุณต้องทำคือ

• ใส่ค่าฟิลด์ main ใน package.json เป็น dist/MyComponent.js
• เพิ่มโฟลเดอร์ dist เข้าไปในฟิลด์ files ใน package.json

คุณก็จะได้ไฟล์ package.json หน้าตาประมาณนี้

{
  "name": "vue-component",
  "version": "1.0.0",
  "author": "User <Email>",
  "license": "MIT",
  "main": "dist/MyComponent.js",
  "files": ["dist"]
}

และในที่สุด ทุกท่านก็จะสามารถนำคอมโพเนนต์สุดเจ๋งของคุณไปใช้ได้แล้ว

import Component from 'vue-component'
// Use the component