@ukrit.fb/vue-plugin-npm-example v0.0.8

@ukrit.fb/vue-plugin-npm-example

เป็นตัวอย่างการเขียน Package ของ Javascript โดยในตัวอย่างจะเป็นการเขียน Vuejs UI Component เพื่อใช้งานโดยจะสร้าง UI Component เป็น Vue Plugin หลังจากนั้นจะ Build Package และ Publish ขึ้น

👉 ขั้นตอน

• Create Vuejs Project
• Create UI Component in Project
• Config Plugin
• Config Build Package
• Build Package
• Push Package to NPM
• Update Package
• Used Package from NPM

📎 Reference

• Create & Publish you first Vue.JS Plugin on NPM (The Right Way)
• How to Create and Publish an NPM Package – a Step-by-Step Guide
• Creating a package.json file
• Creating and publishing scoped public packages
• Getting 404 when attempting to publish new package to NPM
• Vuejs Plugins

📌 Getting started

1. Create Vuejs Project

เป็นขั้นตอนในการ Create Vuejs Project ด้วย Vue Cli

vue create <project-name>

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

2. Create UI Component in Project

สร้างไฟล์ ComponentA.vue ให้อยู่ในตำแหน่ง ./src/components/ComponentA.vue โดยในไฟล์จะมีข้อมูลดังนี้

<template>
  <div>ComponentA</div>
</template>
<script>
export default {
  setup () {
    return {}
  }
}
</script>
<style lang="scss" scoped></style>

3. Config Plugin

สร้างไฟล์​ install.js เพื่อใช้ในการ Export UI Component เป็น Vue Plugin โดยให้ไฟล์อยู่ใน src/install.js โดยในไฟล์จะมีข้อมูลดังนี้

import ComponentA from './components/ComponentA.vue'
const HelloWorldSimple = {
  install(Vue, options) {
    Vue.component('ComponentA', ComponentA)
  },
}
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(HelloWorldSimple)
}
export default HelloWorldSimple

4. Config Build Package

แก้ไข package.json โดยมีการเพิ่ม

{
  . . .
  "private": false,
  "main": "./dist/@ukrit.fb/vue-plugin-npm-example.common.js",
  "files": ["dist"],
  "publishConfig": {
    "access": "public"
  },
  . . .
}

และเพิ่ม Script ในการ Build Package

{
  . . .
  "scripts":{
    . . .
    "build-library": "vue-cli-service build --target lib --name @ukrit.fb/vue-plugin-npm-example ./src/install.js",
    . . .
  }
  . . .
}

5. Build Package

Run คำสั่งที่ใช้ในการ Build Package

npm run build-library

6. Push Package to NPM

สำหรับการ Publish นั้นจะต้องมี Account ของ NPM เสียก่อนสามารถสมัครได้ ที่นี้ หลังจากที่สมัครและยืนยัง Email ที่ใช้สมัครแล้ว ให้ทำการเปิด Terminal แล้วทำการ

npm login

จะเป็นการเปิดหน้าเว็บ Browser เพื่อ login หลังจาก ที่ Login เป็นที่เรียบร้อยแล้วเราก็สามารถ Publish Package ได้โดยใช้คำสั่ง

npm publish

หากว่าต้องการยกเลิกการ Publish Version ได้ Version หนึ่งของ Package นั้นสามารถทำได้โดย

npm unpublish @ukrit.fb/vue-plugin-npm-example@<version name> 

7. Update Package

สำหรับการ Update Package หลังจากที่ Publish จะตั้งทำขั้นตอนดังนี้

• เมื่อเเก้ไข Package เรียบร้อยแล้วจะต้องเปลี่ยน version ใน package.json
• ทำขั้นตอนที่ 5 และ 6

8. Used Package from NPM

หลังจากที่เรานั้นเตรียม Package และ Publish ไปยัง NPM Registry เรียบร้อยแล้วเราสามารถเข้าไป install Project ที่เราต้องการได้ด้วยคำสั่ง

npm i @ukrit.fb/vue-plugin-npm-example --legacy-peer-deps

โดยหลังจากที่เรา install package เสร็จแล้วเราสามารถเรียกใช้ Plugin ได้โดยไปทำการ Registry plugin ในไฟล์​ main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import componentA from '@ukrit.fb/vue-plugin-npm-example' // import 

Vue.config.productionTip = false
Vue.use(componentA) // เรียกใช้งาน plugin
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

หากว่า Package มีการ Update Version สามารถ Update Version ได้โดยการใช้คำสั่ง

npm install @ukrit.fb/vue-plugin-npm-example@latest --legacy-peer-deps 

🎉 เสร็จสิ้น

เพียงเท่านี้เราก็จะสามารถสร้าง UI Component เป็น Plugin ไว้ใช้งานได้แล้ว