import * as vite from 'vite' import { resolve } from 'pathe' import type { Nuxt } from '@nuxt/schema' import type { InlineConfig, SSROptions } from 'vite' import { logger } from '@nuxt/kit' import type { Options } from '@vitejs/plugin-vue' import { sanitizeFilePath } from 'mlly' import { joinURL, withoutLeadingSlash } from 'ufo' import { getPort } from 'get-port-please' import { buildClient } from './client' import { buildServer } from './server' import virtual from './plugins/virtual' import { warmupViteServer } from './utils/warmup' import { resolveCSSOptions } from './css' export interface ViteOptions extends InlineConfig { vue?: Options ssr?: SSROptions } export interface ViteBuildContext { nuxt: Nuxt config: ViteOptions } export async function bundle (nuxt: Nuxt) { // TODO: After nitropack refactor, try if we can resuse the same server port as Nuxt const hmrPortDefault = 24678 // Vite's default HMR port const hmrPort = await getPort({ port: hmrPortDefault, ports: Array.from({ length: 20 }, (_, i) => hmrPortDefault + 1 + i) }) const ctx: ViteBuildContext = { nuxt, config: vite.mergeConfig( { root: nuxt.options.srcDir, mode: nuxt.options.dev ? 'development' : 'production', logLevel: 'warn', define: { 'process.dev': nuxt.options.dev }, resolve: { extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], alias: { ...nuxt.options.alias, '#app': nuxt.options.appDir, // We need this resolution to be present before the following entry, but it // will be filled in client/server configs '#build/plugins': '', '#build': nuxt.options.buildDir, '/entry.mjs': resolve(nuxt.options.appDir, nuxt.options.experimental.asyncEntry ? 'entry.async' : 'entry'), 'web-streams-polyfill/ponyfill/es2018': 'unenv/runtime/mock/empty', // Cannot destructure property 'AbortController' of .. 'abort-controller': 'unenv/runtime/mock/empty' } }, base: nuxt.options.dev ? joinURL(nuxt.options.app.baseURL, nuxt.options.app.buildAssetsDir) : '/__NUXT_BASE__/', publicDir: resolve(nuxt.options.srcDir, nuxt.options.dir.public), // TODO: move to kit schema when it exists vue: { isProduction: !nuxt.options.dev, template: { compilerOptions: nuxt.options.vue.compilerOptions } }, css: resolveCSSOptions(nuxt), optimizeDeps: { exclude: [ ...nuxt.options.build.transpile.filter(i => typeof i === 'string'), 'vue-demi' ], entries: [ resolve(nuxt.options.appDir, 'entry.ts') ] }, esbuild: { jsxFactory: 'h', jsxFragment: 'Fragment', tsconfigRaw: '{}' }, clearScreen: false, build: { assetsDir: nuxt.options.dev ? withoutLeadingSlash(nuxt.options.app.buildAssetsDir) : '.', emptyOutDir: false, rollupOptions: { input: resolve(nuxt.options.appDir, 'entry'), output: { sanitizeFileName: sanitizeFilePath } } }, plugins: [ virtual(nuxt.vfs) ], server: { hmr: { clientPort: hmrPort, port: hmrPort }, fs: { strict: false, allow: [ nuxt.options.buildDir, nuxt.options.appDir, nuxt.options.srcDir, nuxt.options.rootDir, ...nuxt.options.modulesDir ] } } } as ViteOptions, nuxt.options.vite as any || {} ) } await nuxt.callHook('vite:extend', ctx) nuxt.hook('vite:serverCreated', (server: vite.ViteDevServer) => { // Invalidate virtual modules when templates are re-generated ctx.nuxt.hook('app:templatesGenerated', () => { for (const [id, mod] of server.moduleGraph.idToModuleMap) { if (id.startsWith('\x00virtual:')) { server.moduleGraph.invalidateModule(mod) } } }) const start = Date.now() warmupViteServer(server, ['/entry.mjs']) .then(() => logger.info(`Vite warmed up in ${Date.now() - start}ms`)) .catch(logger.error) }) await buildClient(ctx) await buildServer(ctx) }