vite.config.js

import path from 'path'
import { defineConfig, loadEnv } from 'vite'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

// If a backend is needed, see https://vitejs.dev/guide/backend-integration.html

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    root: path.join(__dirname, 'src'),
    publicDir: path.join(__dirname, 'public'),
    envDir: path.join(__dirname),
    base: env.BASE || '/',
    build: {
      outDir: path.join(__dirname, 'build'),
      commonjsOptions: { include: [/shared/, /node_modules/] }
    },

    define: {
      __NAME__: JSON.stringify(process.env.npm_package_name),
      __VERSION__: JSON.stringify(process.env.npm_package_version)
    },

    resolve: {
      alias: { '/shared': path.join(__dirname, 'shared') }
    },

    plugins: [
      viteCommonjs(),
      { // Replace index.jsx by test/test.jsx as entry in test mode
        name: 'html-inject-test',
        transformIndexHtml: html => mode === 'test' ? html.replace('/index.jsx', '/test/test.jsx') : html,
        config: () => ({
          resolve: {
            alias: { '/test': path.join(__dirname, 'test') }
          }
        })
      },
      { // Replace %SEMVER% in HTML
        name: 'html-inject-version',
        transformIndexHtml: html =>
          html.replace('%SEMVER%', process.env.npm_package_version + (mode !== 'production' ? `@${mode}` : ''))
      }
    ],

    server: {
      port: 8080,
      host: true
    },

    css: {
      devSourcemap: true,
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use '/style/_helpers' as *;
            @use '/style/_devices' as *;
            $env: ${mode};
          `
        }
      }
    },

    esbuild: {
      jsxInject: "import h from '/utils/jsx/h'",
      jsxFactory: 'h'
    }
  }
})