Vite in WordPress Theme nutzen

Setup – ohne HMR.
Beim installieren immer mit –include=dev
Warum? Wenn die environment variable in NODE_ENV auf production gesetzt ist, installiert es weder sass noch vite. Öhm, ja – ist ja klar? Ja. Und trotzdem habe ich sinnlos 10x alles deinstalliert und wieder installiert, ohne ein bizzeli zu überlegen. Deshalb, einfach –include=dev 😉

JavaScript
// package.json
{
  "name": "Projektname",
  "version": "1.0.0",
  "description": "Projektbeschreibung",
  "scripts": {
    "dev": "vite build --watch",
    "build": "vite build"
  },
  "devDependencies": {
    "sass": "^1.86.0",
    "vite": "^6.2.2"
  }
}
JavaScript
// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';

const JS_FILE = resolve('src/scripts/main.js')

const BUILD_DIR = resolve(__dirname, 'dist');

export default defineConfig({
  build: {
    assetsDir: '',
    manifest: true,
    emptyOutDir: true,
    outDir: BUILD_DIR,
    rollupOptions: {
      input: JS_FILE,
    },
  },
});
JavaScript
// src/scripts/main.js
import '../styles/main.scss'

// Build the main JS file
import './components/nav.js'; 
import './components/accordion.js';
Bash
npm install --include=dev