Vue Academy · บทเรียน

การเผยแพร่และกำหนดชนิดปลั๊กอิน Vue

โครงสร้างแพ็กเกจ การเพิ่มชนิด TypeScript ให้ ComponentCustomProperties และการเผยแพร่ผ่าน npm

การเผยแพร่และกำหนดชนิดปลั๊กอิน Vue เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

การจัดแพ็กเกจปลั๊กอินสำหรับ npm

หากต้องการแบ่งปันปลั๊กอิน Vue ให้เผยแพร่เป็นแพ็กเกจ npm แพ็กเกจต้องประกาศการพึ่งพาที่ถูกต้อง มีการสร้างที่เหมาะสม รวมชนิดข้อมูล TypeScript และเผยแพร่อย่างถูกต้อง บทเรียนนี้ครอบคลุมแต่ละขั้นตอน

peerDependencies สำหรับ Vue

ระบุ Vue เป็น peerDependency ไม่ใช่การพึ่งพาปกติ วิธีนี้ทำให้ app เจ้าภาพเป็นผู้จัดหา Vue เอง และป้องกันไม่ให้มี Vue สองชุดอยู่ในบันเดิลเดียวกัน ซึ่งจะทำให้การตอบสนองเสียหาย

{
  "name": "vue-toast-kit",
  "peerDependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vue": "^3.4.0"
  }
}

โหมดไลบรารีของ Vite

สร้างแพ็กเกจด้วย โหมดไลบรารี ของ Vite กำหนดค่า build.lib ด้วยจุดเริ่มต้น ชื่อ และรูปแบบเอาต์พุต (ES + UMD) พร้อมระบุให้ Vue เป็นสิ่งภายนอกเพื่อไม่ให้ถูกบันเดิลรวม

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'VueToastKit',
      fileName: 'index',
      formats: ['es', 'umd']
    }
  }
})

การแยก Vue ออกจากบันเดิลใน rollupOptions

กำหนดให้ vue เป็นสิ่งภายนอกและแมปไปยังตัวแปรส่วนกลางสำหรับการสร้างแบบ UMD เพื่อให้ใช้ Vue ของผู้ใช้แพ็กเกจ

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ['vue'],
    output: {
      globals: { vue: 'Vue' }
    }
  }
}

การสร้างคำประกาศชนิดข้อมูล

ส่งไฟล์ .d.ts ไปพร้อมแพ็กเกจ เพื่อให้ผู้ใช้ได้รับการเติมโค้ดอัตโนมัติและการตรวจสอบชนิดข้อมูล ใช้ vite-plugin-dts เพื่อสร้างคำประกาศระหว่างการสร้างไลบรารี

import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    vue(),
    dts({ insertTypesEntry: true })
  ]
})

แผนผัง exports ใน package.json

ชี้ผู้ใช้ไปยังไฟล์ที่ถูกต้องด้วยฟิลด์ exports โดยเปิดเผยบิลด์ ESM และคำประกาศชนิดข้อมูล กำหนด type: module สำหรับแพ็กเกจที่ให้ความสำคัญกับ ESM เป็นหลัก

{
  "type": "module",
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    }
  }
}

การส่งส่วนขยายชนิดข้อมูลไปพร้อมแพ็กเกจ

หากปลั๊กอินเพิ่มคุณสมบัติส่วนกลาง เช่น this.$toast ให้รวมส่วนขยาย ComponentCustomProperties ไว้ในชนิดข้อมูลที่เผยแพร่ เพื่อให้เครื่องมือแก้ไขของผู้ใช้รู้จักสิ่งนี้โดยอัตโนมัติ

// src/types.d.ts (included in the build)
import type { ToastService } from './toast'

declare module 'vue' {
  interface ComponentCustomProperties {
    $toast: ToastService
  }
}

export {}

จุดเริ่มต้นสาธารณะ

จุดเริ่มต้น src/index.ts ควรส่งออกปลั๊กอินเป็นค่าเริ่มต้น พร้อมฟังก์ชันแบบใช้ซ้ำ คีย์ และชนิดข้อมูลอื่น ๆ ที่ผู้ใช้จำเป็นต้องใช้

import ToastPlugin from './plugin'
export default ToastPlugin

export { useToast } from './composable'
export { toastKey } from './toast'
export type { ToastService, Toast } from './toast'

ฟิลด์ files

ใช้ฟิลด์ files เพื่อเผยแพร่เฉพาะเอาต์พุตจากการสร้าง ทำให้แพ็กเกจมีขนาดเล็กและไม่รวมซอร์สโค้ดกับการตั้งค่า

{
  "files": ["dist"],
  "sideEffects": false
}

การเผยแพร่พร้อมแหล่งที่มาที่ตรวจสอบได้

เผยแพร่ไปยัง npm พร้อมแหล่งที่มาที่ตรวจสอบได้ ซึ่งเชื่อมโยงแพ็กเกจกับบิลด์จาก CI และคอมมิตซอร์สด้วยการเข้ารหัส ใช้จาก CI ที่เชื่อถือได้ เช่น GitHub Actions พร้อมสิทธิ์ที่ถูกต้อง

# in CI (GitHub Actions)
npm publish --provenance --access public

# package.json can also set:
# "publishConfig": { "provenance": true }

รายการตรวจสอบก่อนเผยแพร่

ก่อนเผยแพร่ ให้ตรวจสอบว่า Vue เป็นการพึ่งพาแบบ peer, dist มี ESM และชนิดข้อมูล, exports แก้ไขเส้นทางได้ถูกต้อง, ปรับเพิ่มเวอร์ชันแล้ว และการทดลองเผยแพร่ให้ผลลัพธ์ถูกต้อง

# inspect what will be published
npm publish --dry-run

# verify the tarball contents
npm pack

ตรวจความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับการเผยแพร่ปลั๊กอิน Vue

ทบทวน

คุณได้เรียนรู้การเผยแพร่และการกำหนดชนิดข้อมูลให้ปลั๊กอิน:

ระบุ Vue เป็น peerDependency เพื่อหลีกเลี่ยง Vue หลายชุดซ้ำกัน
สร้างด้วย โหมดไลบรารี ของ Vite โดยแยก Vue ออกเป็นสิ่งภายนอก
สร้าง .d.ts (vite-plugin-dts) และส่งส่วนขยายชนิดข้อมูลไปพร้อมแพ็กเกจ
กำหนดค่า exports, files และ type: module
เผยแพร่ด้วย --provenance จาก CI ที่เชื่อถือได้

คำถามที่พบบ่อย

บทเรียน “การเผยแพร่และกำหนดชนิดปลั๊กอิน Vue” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเผยแพร่และกำหนดชนิดปลั๊กอิน Vue” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเผยแพร่และกำหนดชนิดปลั๊กอิน Vue”

โครงสร้างแพ็กเกจ การเพิ่มชนิด TypeScript ให้ ComponentCustomProperties และการเผยแพร่ผ่าน npm คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การเผยแพร่และกำหนดชนิดปลั๊กอิน Vue” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

สถาปัตยกรรมปลั๊กอินและ app.use()
คุณสมบัติทั่วทั้งแอปและ provide/inject ในปลั๊กอิน
ตัวอย่างปลั๊กอินการแจ้งเตือนและ Toast
การเผยแพร่และกำหนดชนิดปลั๊กอิน Vue

← กลับไปที่ Vue Academy