Using Plugins

Available Plugins

Official Plugins

ปลั๊กอิน	คําอธิบาย
@vitejs/plugin-vue	สําหรับ Vue 3 Single File Components
@vitejs/plugin-vue-jsx	สําหรับ Vue 3 JSX
@vitejs/plugin-vue2-jsx	สําหรับ Vue 2 JSX
@vitejs/plugin-react	สําหรับ React
@vitejs/plugin-react-swc	สําหรับ React ด้วย SWC
@vitejs/plugin-legacy	สําหรับรองรับ Legacy Browsers

Community Plugins

• awesome-vite
• search "vite" in npm registry
• tag "vite" in GitHub
• Unplugins

Recommended Plugins

Vite Plugins ทั่วไป

Plugins	รายละเอียด
unplugin-unused	ตรวจจับและรายงานไฟล์ที่ไม่ได้ใช้งานในโปรเจกต์
unocss	CSS Engine แบบ Atomic ที่รวดเร็วและยืดหยุ่น คล้าย Tailwind แต่ไม่ต้อง PostCSS
unplugin-unused	บีบอัดรูปภาพให้มีขนาดเล็กลงโดยอัตโนมัติ
vite-plugin-checker	ตรวจสอบ Type และ Lint ในขณะ development โดยใช้ worker thread
unplugin-utc	ช่วยแปลง UTC เป็น local time โดยอัตโนมัติในระหว่าง build time
vite-tsconfig-paths	รองรับการใช้งาน path aliases ที่กำหนดใน tsconfig.json
vite-plugin-image-optimizer	บีบอัดรูปภาพอัตโนมัติระหว่างการ build เพื่อเพิ่มประสิทธิภาพของเว็บไซต์

Vue Plugins

Plugins	รายละเอียด
vite-plugin-vue-devtools	เครื่องมือพัฒนา Vue ที่เพิ่มประสิทธิภาพในการ debug และวิเคราะห์แอพ Vue
unplugin-vue-cssvars	ช่วยจัดการตัวแปร CSS ใน Vue components โดยสร้าง CSS variables จาก script setup

Creating Plugins

ดูที่ Vite Plugin API Documentation

plugins/
├── dist/index.js         # ไฟล์ผลลัพธ์ที่ถูก compile แล้ว
├── src/
│   └── index.ts         # Source code ของ plugin
├── package.json         # ไฟล์กำหนดค่า package
└── tsconfig.json       # ตั้งค่า TypeScript
├── src/                  # โค้ดต้นฉบับ
│   └── my-plugin.ts
└── vite.config.ts        # ไฟล์กำหนดค่า plugin

my-plugin.ts

import type { Plugin } from "vite";

interface MyPluginOptions {
  message?: string;
  debug?: boolean;
}

export default function myPlugin(options: MyPluginOptions = {}): Plugin {
  return {
    name: "my-plugin",
    enforce: "pre",
    configResolved(config) {
      if (options.debug) {
        console.log("Config resolved:", config.mode);
      }
    },
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        next();
      });
    },
    transform(code, id) {
      if (id.endsWith(".js")) {
        return {
          code: `/* ${options.message || "Processed by my-plugin"} */\n${code}`,
          map: null,
        };
      }
    },
    closeBundle() {
      console.log("Build completed!");
    },
  };
}

vite.config.ts

import myPlugin from "./plugins/src/my-plugin";

export default {
  plugins: [myPlugin({ message: "Hello", debug: true })],
};