Vue Academy · บทเรียน

ระบบนิเวศ Vite: ปลั๊กอินและเครื่องมือ

ระบบนิเวศ unplugin, vite-plugin-vue, vite-plugin-inspect และ vite-bundle-visualizer

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

ระบบนิเวศปลั๊กอินของ Vite

ระบบปลั๊กอินของ Vite ซึ่งสร้างบนอินเทอร์เฟซของ Rollup และฮุกเฉพาะของ Vite ช่วยขับเคลื่อนระบบนิเวศที่หลากหลาย สำหรับโครงการ Vue มีปลั๊กอินไม่กี่ตัวที่ช่วยยกระดับประสบการณ์นักพัฒนาได้อย่างมาก ได้แก่ การนำเข้าอัตโนมัติ การลงทะเบียนคอมโพเนนต์อัตโนมัติ การตรวจสอบการแปลง และการวิเคราะห์บันเดิล

unplugin-auto-import

unplugin-auto-import จะนำเข้า API ที่ใช้บ่อยโดยอัตโนมัติ เช่น ref และ computed ของ Vue ตัวช่วยของ Router และ Pinia รวมถึงคอมโพสิเบิลของคุณเอง ทำให้คุณใช้งานสิ่งเหล่านี้ได้โดยไม่ต้องเขียนคำสั่งนำเข้า

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

นำเข้าคอมโพสิเบิลของคุณโดยอัตโนมัติ

กำหนดไดเรกทอรีคอมโพสิเบิลของคุณให้ปลั๊กอิน แล้วฟังก์ชันเหล่านั้นจะพร้อมใช้งานทั่วทั้งแอปด้วย ปลั๊กอินจะสร้างไฟล์ .d.ts เพื่อให้ TypeScript และโปรแกรมแก้ไขโค้ดยังคงเข้าใจฟังก์ชันเหล่านั้น

AutoImport({
  imports: ['vue'],
  dirs: ['src/composables'], // auto-import useFoo, useBar
  dts: 'src/auto-imports.d.ts'
})

// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()

unplugin-vue-components

unplugin-vue-components จะนำเข้าและลงทะเบียนคอมโพเนนต์ตามต้องการโดยอัตโนมัติ — เพียงใส่ <MyButton /> ในแม่แบบ แล้วปลั๊กอินจะนำเข้าให้โดยอัตโนมัติ นอกจากนี้ยังตัดคอมโพเนนต์ที่ไม่ได้ใช้ออกจากบันเดิลได้ด้วย

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts'
    })
  ]
})

ตัวแก้การเชื่อมโยงสำหรับไลบรารีส่วนติดต่อผู้ใช้

ปลั๊กอินคอมโพเนนต์รองรับตัวแก้การเชื่อมโยงสำหรับไลบรารีส่วนติดต่อผู้ใช้ยอดนิยม เช่น Element Plus, Vuetify และ Naive UI โดยจะนำเข้าคอมโพเนนต์และรูปแบบการแสดงผลของไลบรารีเหล่านั้นเมื่อใช้งาน โดยไม่ต้องลงทะเบียนด้วยตนเอง

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no import

vite-plugin-inspect

vite-plugin-inspect แสดงส่วนติดต่อผู้ใช้สำหรับดูว่าปลั๊กอินแต่ละตัวแปลงโค้ดของคุณผ่านกระบวนการแปลงอย่างไร เครื่องมือนี้มีประโยชน์อย่างมากสำหรับแก้ไขข้อผิดพลาดที่ทำให้ไฟล์มีผลลัพธ์ออกมาไม่ตรงตามที่คาด

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in dev

อ่านกระบวนการแปลง

ในส่วนติดต่อผู้ใช้ของ Inspect คุณสามารถเลือกโมดูลและไล่ดูการแปลงของปลั๊กอินแต่ละตัวได้ ตัวอย่างเช่น คุณจะเห็นว่า SFC ของ Vue ถูกแยกเป็นส่วนเรนเดอร์และส่วนสคริปต์อย่างไร และการนำเข้าอัตโนมัติแทรกโค้ดอย่างไร ทำให้ระบุปลั๊กอินที่ทำงานผิดปกติได้

เครื่องมือแสดงภาพบันเดิล

หากต้องการทำความเข้าใจขนาดบันเดิลสำหรับระบบจริง ให้ใช้ปลั๊กอินแสดงภาพ เช่น rollup-plugin-visualizer ปลั๊กอินจะสร้างแผนผังต้นไม้แบบโต้ตอบได้ ซึ่งแสดงสิ่งที่อยู่ในส่วนย่อยแต่ละส่วนหลังการสร้าง

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({ open: true, filename: 'stats.html' })
  ]
})

นำข้อมูลเชิงลึกจากเครื่องมือแสดงภาพไปใช้

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

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

การใช้ปลั๊กอินร่วมกัน

ปลั๊กอินเหล่านี้ทำงานร่วมกันได้ดี การกำหนดค่า Vue ทั่วไปจะประกอบด้วยการนำเข้าอัตโนมัติ คอมโพเนนต์ การตรวจสอบเฉพาะตอนพัฒนา และเครื่องมือแสดงภาพเฉพาะตอนสร้าง เพื่อให้กระบวนการทำงานราบรื่นที่สุด

plugins: [
  vue(),
  AutoImport({ imports: ['vue', 'vue-router'] }),
  Components({ dirs: ['src/components'] }),
  Inspect(),
  visualizer({ filename: 'stats.html' })
]

ทำความเข้าใจไฟล์ d.ts และการไม่รวมไว้ใน Git

ปลั๊กอินนำเข้าอัตโนมัติและปลั๊กอินคอมโพเนนต์จะสร้างไฟล์ .d.ts ให้ตัดสินใจว่าจะส่งไฟล์เหล่านี้เข้าคลังหรือไม่ การส่งเข้าคลังช่วยให้ระบบผสานรวมต่อเนื่องตรวจสอบชนิดข้อมูลได้โดยไม่ต้องสร้างก่อน ส่วนการไม่รวมไว้ใน Git จะทำให้สร้างไฟล์ใหม่เมื่อเริ่มพัฒนา เก็บไฟล์เหล่านี้ไว้ในรายการ include ของ tsconfig ไม่ว่าจะเลือกวิธีใด

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจของคุณเกี่ยวกับระบบเครื่องมือของ Vite

สรุป

คุณได้เรียนรู้เกี่ยวกับระบบเครื่องมือของ Vite:

unplugin-auto-import — นำเข้า API และคอมโพสิเบิลของ Vue โดยอัตโนมัติ
unplugin-vue-components — นำเข้าและลงทะเบียนคอมโพเนนต์อัตโนมัติ พร้อมตัวแก้การเชื่อมโยงสำหรับส่วนติดต่อผู้ใช้
vite-plugin-inspect — ดูว่าปลั๊กอินแปลงแต่ละโมดูลอย่างไร
เครื่องมือแสดงภาพบันเดิล — แสดงเนื้อหาของส่วนย่อยด้วยแผนผังต้นไม้ เพื่อช่วยชี้แนวทางการปรับปรุง
ปลั๊กอินเหล่านี้ทำงานร่วมกันเป็นกระบวนการพัฒนาและสร้าง Vue ที่ราบรื่น

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

บทเรียน “ระบบนิเวศ Vite: ปลั๊กอินและเครื่องมือ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ระบบนิเวศ Vite: ปลั๊กอินและเครื่องมือ”

ระบบนิเวศ unplugin, vite-plugin-vue, vite-plugin-inspect และ vite-bundle-visualizer คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “ระบบนิเวศ Vite: ปลั๊กอินและเครื่องมือ” ใช้เวลานานแค่ไหน

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

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

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

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

โหมด Vue Vapor: การเพิ่มประสิทธิภาพระหว่างคอมไพล์
ระบบนิเวศ Vite: ปลั๊กอินและเครื่องมือ
Vue Macros และข้อเสนอจากชุมชน
การเลือกสแตก Vue ที่เหมาะสมสำหรับปี 2025+

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