Shared Config ใน Vite (สำหรับมือใหม่)

Shared Config คืออะไร?

"Shared config" คือการตั้งค่ากลางที่ใช้ได้ทั้งตอนพัฒนา (dev server), ตอน build, และตอน preview ใน Vite เช่น การตั้งค่า root, base, alias, plugins, publicDir ฯลฯ

สรุป: shared config = กฎกลางที่กำหนดพฤติกรรมหลักของโปรเจกต์ Vite

---

ตัวอย่าง config ที่ใช้บ่อย

import vue from "@vitejs/plugin-vue";
import path from "path";
import { defineConfig } from "vite";

export default defineConfig({
  root: "src", // โฟลเดอร์ root ของโปรเจกต์
  base: "/my-app/", // public path ตอน deploy
  publicDir: "static", // โฟลเดอร์เก็บไฟล์ static
  plugins: [vue()], // เพิ่มปลั๊กอิน (เช่น Vue)
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), // import '@/foo'
    },
  },
});

---

อธิบายตัวเลือกสำคัญ (แบบมือใหม่)

• root: โฟลเดอร์หลักของโปรเจกต์ (เช่น 'src')
• base: path ที่เว็บจะถูก deploy เช่น '/my-app/'
• publicDir: โฟลเดอร์สำหรับไฟล์ static (รูป, favicon ฯลฯ)
• plugins: ใส่ปลั๊กอินเสริม (เช่น Vue, React, AutoImport)
• resolve.alias: กำหนด alias ให้ import path สั้นลง (import '@/foo')
• define: กำหนดค่าคงที่ไว้ใช้ในโค้ด (เช่น DEV)
• envDir/envPrefix: ตั้งค่าการอ่านไฟล์ .env

---

Q&A สำหรับมือใหม่

Q: shared config ต่างจาก server/build/preview ยังไง? A: shared config ใช้ได้ทุกโหมด ส่วน server/build/preview จะมีเฉพาะในแต่ละโหมดเท่านั้น

Q: ต้องตั้ง root/base/publicDir ทุกโปรเจกต์ไหม? A: ไม่จำเป็น ถ้าไม่ตั้ง Vite จะใช้ค่า default ให้ (root = โฟลเดอร์โปรเจกต์, base = '/', publicDir = 'public')

Q: plugins ใส่หลายตัวได้ไหม? A: ได้ ใส่เป็น array เช่น [vue(), react()]

---

สรุปอ็อปชันที่ใช้ได้ทั้งใน Dev Server, Preview Server และ Build Process:

• root (string)
  โฟลเดอร์ root ของโปรเจกต์ (default: process.cwd())

• base (string)
  กำหนด public path สำหรับไฟล์ assets (default: /)

• mode (string)
  โหมดการทำงาน (development หรือ production)

• define (Record<string, any>)
  แทนที่ค่าคงที่ในโค้ดก่อนบันเดิล (เช่น __DEV__)

• envDir (string)
  โฟลเดอร์สำหรับไฟล์ .env (default: root)

• envPrefix (string | string[])
  คำนำหน้าในการอ่านตัวแปร environment (default: VITE_)

• publicDir (string)
  โฟลเดอร์เก็บไฟล์ static (default: public)

• cacheDir (string)
  โฟลเดอร์เก็บ cache ของ Vite (default: node_modules/.vite)

• plugins (Plugin[])
  อาร์เรย์ของ Vite plugin

• resolve.alias (Record<string, string> / Alias[])
  กำหนด path alias สำหรับ import

• resolve.dedupe (string[])
  บังคับ dedupe dependencies ที่ระบุ

• resolve.conditions (string[])
  เงื่อนไขสำหรับเลือก entry point ใน package.json (default: ['import'])

• resolve.mainFields (string[])
  กำหนดลำดับของ fields ใน package.json สำหรับการ resolve (default: ['module', 'jsnext:main', 'jsnext'])

• resolve.extensions (string[])
  รายการนามสกุลไฟล์ที่ Vite จะพยายาม resolve (default: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'])

• resolve.preserveSymlinks (boolean)
  ไม่ resolve symlink ไปยัง real path (default: false)

• logLevel ('silent' | 'error' | 'warn' | 'info' | 'debug')
  ระบุระดับ log (default: info)

• clearScreen (boolean)
  ล้าง console เมื่อเริ่มต้น (default: true)

• html.cspNonce (string)
  nonce สำหรับ Content Security Policy ในไฟล์ HTML

• css (CssOptions)
  ตั้งค่า CSS preprocess, modules, postcss

• css.modules (ModulesOptions)
  ตั้งค่า CSS Modules เช่น scope name pattern

• css.postcss (PostCSS.Options)
  กำหนดการใช้งาน PostCSS (เช่นไฟล์ config)

• css.preprocessorOptions (Record<string, any>)
  ส่ง options ให้ CSS preprocessor (เช่น { scss: { additionalData } })

• css.preprocessorMaxWorkers (number)
  จำนวน worker สูงสุดสำหรับ preprocess (default: os.cpus().length - 1)

• css.devSourcemap (boolean)
  เปิด source map สำหรับ CSS ในโหมด development (default: false)

• css.transformer (string)
  เลือก CSS transformer (เช่น 'esbuild' หรือ 'lightningcss')

• css.lightningcss (LightningCssOptions)
  ตั้งค่า Lightning CSS transformer

• json (JsonOptions)
  ปรับการ import .json

• json.namedExports (boolean)
  เปิดใช้งาน named exports เมื่อนำเข้า .json (default: true)

• json.stringify (boolean)
  นำเข้าไฟล์ .json เป็น string แทน object (default: false)

• esbuild (EsbuildOptions)
  ปรับการแปลงด้วย esbuild สำหรับ deps pre-bundling

• esbuild.target (string | string[])
  ระบุ target version สำหรับการ pre-bundling (เช่น 'es2015')

• customLogger (Logger)
  กำหนด Logger interface เพื่อแสดง log ของ Vite

• appType ('spa' | 'mpa')
  กำหนดประเภทของแอป ('spa' หรือ 'mpa', default: 'spa')

• future (Record<string, boolean>)
  ฟีเจอร์ทดลองที่จะเปิดใช้งานใน Vite (experimental)

• assetsInclude (string | RegExp | (string | RegExp)[])
  กำหนดไฟล์นามสกุลพิเศษให้จัดการเป็น static asset

• optimizeDeps (DepOptimizationOptions)
  พารามิเตอร์สำหรับ pre-bundling dependencies

• ssr, server, preview, build
  อ็อปชันเฉพาะแต่ละโหมด (ดูไฟล์แยก)