ใช้ Plugins

Official Plugins

ปลั๊กอินที่พัฒนาและดูแลโดยทีม Vite อย่างเป็นทางการ ซึ่งมีการรับประกันความเข้ากันได้และการสนับสนุนอย่างต่อเนื่อง

ปลั๊กอิน	คําอธิบาย
@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
• npm
• GitHub

Rollup Plugins

ปลั๊กอินที่ใช้งานร่วมกับ Rollup ซึ่ง Vite รองรับการใช้งานได้ส่วนใหญ่ ช่วยในการจัดการและแปลงไฟล์ตอนการ build

TIP

• Compatibility: Vite จะใช้ @rollup/plugin-commonjs โดยอัตโนมัติสําหรับการ build
• Plugin Order: ลําดับของ plugins มีความสําคัญ ควรใส่ Vite plugins ก่อน Rollup plugins
• Development vs Build: บาง Rollup plugins อาจทํางานเฉพาะตอน build เท่านั้น
• Vite Specific Options: สามารถกําหนด apply: 'build' เพื่อให้ plugin ทํางานเฉพาะตอน build:

export default {
  plugins: [
    {
      ...rollupPlugin(),
      apply: "build", // 'serve' สําหรับ dev server หรือ 'build' สําหรับ build
    },
  ],
};

ตัวอย่างการใช้งาน Rollup Plugins ที่นิยม

ปลั๊กอิน	คําอธิบาย	การติดตั้ง
@rollup/plugin-commonjs	แปลง CommonJS modules เป็น ES modules	npm i -D @rollup/plugin-commonjs
@rollup/plugin-node-resolve	ช่วยหา dependencies ใน node_modules	npm i -D @rollup/plugin-node-resolve
@rollup/plugin-json	นําเข้าไฟล์ JSON เป็น ES modules	npm i -D @rollup/plugin-json
@rollup/plugin-babel	แปลง JavaScript ด้วย Babel	npm i -D @rollup/plugin-babel
@rollup/plugin-alias	กําหนด aliases สําหรับ import paths	npm i -D @rollup/plugin-alias

ตัวอย่างการใช้งานหลายๆ plugins พร้อมกัน:

import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    commonjs(),
    resolve(),
    json(),
  ],
});

สร้าง Plugins

ดูที่ Vite Plugin API Documentation