Create Project with Vite

Features

• Build tool ที่เร็วมาก ใช้ ES modules แทน bundling ใน development
  • ไม่ต้องรอ bundling ทั้งโปรเจคเมื่อเริ่มพัฒนา
  • โหลดไฟล์เฉพาะที่ต้องการใช้เท่านั้น
  • ใช้ Native ES Modules ของ browser โดยตรง
• Hot Module Replacement (HMR) ที่ทำงานได้ทันที
  • อัพเดทโค้ดโดยไม่ต้องรีโหลดหน้าเว็บ
  • รักษาสถานะของแอปพลิเคชันระหว่างการพัฒนา
• Supports Vue, React, Svelte และ frameworks อื่นๆ
  • มี template สำเร็จรูปสำหรับ framework ต่างๆ
  • ติดตั้งง่ายด้วยคำสั่งเดียว เช่น npm create vite@latest my-vue-app --template vue

Plugins

• ระบบ plugin ที่ง่ายต่อการใช้งาน
  • เพิ่ม plugin ในไฟล์ vite.config.js

  import vue from '@vitejs/plugin-vue'
  export default {
    plugins: [vue()]
  }

• มี plugin สำเร็จรูปสำหรับงานต่างๆ เช่น Vue, React, CSS preprocessors
  • @vitejs/plugin-vue สำหรับ Vue
  • @vitejs/plugin-react สำหรับ React
  • vite-plugin-sass สำหรับ Sass/SCSS
• สามารถเขียน plugin ของตัวเองได้ง่าย

  const myPlugin = {
    name: 'my-plugin',
    transform(code, id) {
      // เปลี่ยนโค้ดที่นี่
    }
  }

ENV and Modes

• แยก environment variables สำหรับ development และ production
• ใช้ไฟล์ .env สำหรับกำหนดค่า environment
• สามารถสร้าง mode เพิ่มเติมได้ตามต้องการ

Building for Production

• ใช้ Rollup สำหรับ production build
• มี tree-shaking และ code splitting
• สามารถ optimize assets ได้อัตโนมัติ

Server-Side Rendering (SSR)

• มี built-in support สำหรับ SSR
• สามารถ pre-render pages ได้
• ทำงานร่วมกับ frameworks ต่างๆ ได้ดี

Static Assets Handling

• จัดการ static assets ได้อัตโนมัติ
• สามารถ import assets เป็น URL ได้
• มีระบบ cache busting สำหรับ production

APIs

Server Options

ตัวเลือก	ประเภท	ค่าเริ่มต้น	คำอธิบาย
host	string	'localhost'	กำหนด host ที่เซิร์ฟเวอร์จะฟัง
port	number	5173	กำหนดพอร์ตเซิร์ฟเวอร์
strictPort	boolean	false	ออกจากระบบหากพอร์ตถูกใช้งานแล้ว
https	boolean/object	false	เปิดใช้งาน HTTPS
proxy	object	-	กำหนดกฎ proxy
cors	boolean/object	-	กำหนดนโยบาย CORS
headers	object	-	กำหนด HTTP headers เพิ่มเติม
hmr	boolean/object	-	กำหนด Hot Module Replacement
fs.strict	boolean	true	จำกัดการเข้าถึงไฟล์นอก workspace
fs.allow	array	-	ระบุ path ที่อนุญาตให้เข้าถึง
fs.deny	array	-	ระบุ path ที่ไม่อนุญาตให้เข้าถึง

Build Options

ตัวเลือก	ประเภท	ค่าเริ่มต้น	คำอธิบาย
target	string/array	'baseline-widely-available'	กำหนดความเข้ากันได้ของเบราว์เซอร์
outDir	string	'dist'	กำหนดโฟลเดอร์สำหรับไฟล์ที่ build
assetsDir	string	'assets'	กำหนดโฟลเดอร์ย่อยสำหรับ assets
assetsInlineLimit	number	4096	กำหนดขนาดไฟล์ที่ควรแปลงเป็น base64
cssCodeSplit	boolean	true	แยก CSS ออกเป็นไฟล์ต่างหาก
sourcemap	boolean	false	สร้าง source map สำหรับดีบัก
minify	boolean	true	ย่อขนาดไฟล์ JavaScript และ CSS
reportCompressedSize	boolean	true	แสดงขนาดไฟล์หลังบีบอัด
chunkSizeWarningLimit	number	500	ขนาดไฟล์ที่เตือนเมื่อใหญ่เกินไป (KB)

Preview Options

ตัวเลือก	ประเภท	ค่าเริ่มต้น	คำอธิบาย
host	string	-	กำหนด host สำหรับโหมดพรีวิว
port	number	4173	กำหนดพอร์ตสำหรับโหมดพรีวิว
strictPort	boolean	false	ออกจากระบบหากพอร์ตถูกใช้งานแล้ว
https	object	-	เปิดใช้งาน HTTPS
proxy	object	-	กำหนดกฎ proxy สำหรับพรีวิว
cors	boolean/object	-	กำหนดนโยบาย CORS
headers	object	-	กำหนด HTTP headers เพิ่มเติม

Dep Optimization

ตัวเลือก	ประเภท	คำอธิบาย
entries	string/array	กำหนด entry points สำหรับ pre-bundling
exclude	string[]	ระบุ dependencies ที่ไม่ต้องการ optimize
include	string[]	ระบุ dependencies ที่ต้องการ optimize
esbuildOptions	object	กำหนด options สำหรับ esbuild
force	boolean	บังคับให้ทำ dependency optimization ใหม่
noDiscovery	boolean	ปิดการค้นหา dependencies อัตโนมัติ
disabled	boolean	ปิดใช้งาน dependency optimization
needsInterop	boolean	ระบุว่าต้องการ interop สำหรับ dependency นั้นๆ

Shared Options

root base mode define plugins publicDir cacheDir resolve.alias resolve.dedupe resolve.conditions resolve.mainFields resolve.extensions resolve.preserveSymlinks html.cspNonce css.modules css.postcss css.preprocessorOptions css.preprocessorOptions[extension].additionalData css.preprocessorMaxWorkers css.devSourcemap css.transformer css.lightningcss json.namedExports json.stringify esbuild assetsInclude logLevel customLogger clearScreen envDir envPrefix appType future

SSR Options

ตัวเลือก	ประเภท	ค่าเริ่มต้น	คำอธิบาย
external	string[]	-	ระบุ dependencies ที่ควรเป็น external
noExternal	string[]	-	ระบุ dependencies ที่ไม่ควรเป็น external
target	string	'node'	กำหนดสภาพแวดล้อมสำหรับ SSR
resolve.conditions	string[]	-	กำหนดเงื่อนไขการ resolve
resolve.externalConditions	string[]	-	เงื่อนไขสำหรับ external modules
resolve.mainFields	string[]	-	กำหนดลำดับ field ใน package.json

Worker Options

ตัวเลือก	ประเภท	คำอธิบาย
format	string	กำหนดรูปแบบ output (es, cjs, iife)
plugins	array	ระบุ plugins ที่ใช้กับ worker
rollupOptions	object	กำหนด options สำหรับ Rollup

CLI Options

คำสั่ง	คำอธิบาย
vite dev	เริ่ม development server
vite build	build สำหรับ production
vite preview	preview production build