format: apply repo prettier (3.8.1) to the folded skills tree
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
This commit is contained in:
fargo
@@ -3,7 +3,7 @@ name: vite
|
||||
description: Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
|
||||
metadata:
|
||||
author: Anthony Fu
|
||||
version: "2026.1.31"
|
||||
version: '2026.1.31'
|
||||
source: Generated from https://github.com/vitejs/vite, scripts at https://github.com/antfu/skills
|
||||
---
|
||||
|
||||
@@ -20,23 +20,23 @@ Vite is a next-generation frontend build tool with fast dev server (native ESM +
|
||||
|
||||
## Core
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Configuration | `vite.config.ts`, `defineConfig`, conditional configs, `loadEnv` | [core-config](references/core-config.md) |
|
||||
| Features | `import.meta.glob`, asset queries (`?raw`, `?url`), `import.meta.env`, HMR API | [core-features](references/core-features.md) |
|
||||
| Plugin API | Vite-specific hooks, virtual modules, plugin ordering | [core-plugin-api](references/core-plugin-api.md) |
|
||||
| Topic | Description | Reference |
|
||||
| ------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ |
|
||||
| Configuration | `vite.config.ts`, `defineConfig`, conditional configs, `loadEnv` | [core-config](references/core-config.md) |
|
||||
| Features | `import.meta.glob`, asset queries (`?raw`, `?url`), `import.meta.env`, HMR API | [core-features](references/core-features.md) |
|
||||
| Plugin API | Vite-specific hooks, virtual modules, plugin ordering | [core-plugin-api](references/core-plugin-api.md) |
|
||||
|
||||
## Build & SSR
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Topic | Description | Reference |
|
||||
| ----------- | ------------------------------------------------------------------ | -------------------------------------------- |
|
||||
| Build & SSR | Library mode, SSR middleware mode, `ssrLoadModule`, JavaScript API | [build-and-ssr](references/build-and-ssr.md) |
|
||||
|
||||
## Advanced
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Environment API | Vite 6+ multi-environment support, custom runtimes | [environment-api](references/environment-api.md) |
|
||||
| Topic | Description | Reference |
|
||||
| ------------------ | ------------------------------------------------------------------- | ------------------------------------------------------ |
|
||||
| Environment API | Vite 6+ multi-environment support, custom runtimes | [environment-api](references/environment-api.md) |
|
||||
| Rolldown Migration | Vite 8 changes: Rolldown bundler, Oxc transformer, config migration | [rolldown-migration](references/rolldown-migration.md) |
|
||||
|
||||
## Quick Reference
|
||||
@@ -53,14 +53,14 @@ vite build --ssr # SSR build
|
||||
### Common Config
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vite'
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [],
|
||||
resolve: { alias: { '@': '/src' } },
|
||||
server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
|
||||
build: { target: 'esnext', outDir: 'dist' },
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Official Plugins
|
||||
|
||||
@@ -11,8 +11,8 @@ Build a library for distribution:
|
||||
|
||||
```ts
|
||||
// vite.config.ts
|
||||
import { resolve } from 'node:path'
|
||||
import { defineConfig } from 'vite'
|
||||
import { resolve } from 'node:path';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
@@ -31,7 +31,7 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Multiple Entries
|
||||
@@ -84,7 +84,7 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## SSR Development
|
||||
@@ -94,38 +94,38 @@ export default defineConfig({
|
||||
Use Vite as middleware in a custom server:
|
||||
|
||||
```ts
|
||||
import express from 'express'
|
||||
import { createServer as createViteServer } from 'vite'
|
||||
import express from 'express';
|
||||
import { createServer as createViteServer } from 'vite';
|
||||
|
||||
const app = express()
|
||||
const app = express();
|
||||
|
||||
const vite = await createViteServer({
|
||||
server: { middlewareMode: true },
|
||||
appType: 'custom',
|
||||
})
|
||||
});
|
||||
|
||||
app.use(vite.middlewares)
|
||||
app.use(vite.middlewares);
|
||||
|
||||
app.use('*all', async (req, res, next) => {
|
||||
const url = req.originalUrl
|
||||
const url = req.originalUrl;
|
||||
|
||||
// 1. Read and transform index.html
|
||||
let template = await fs.readFile('index.html', 'utf-8')
|
||||
template = await vite.transformIndexHtml(url, template)
|
||||
let template = await fs.readFile('index.html', 'utf-8');
|
||||
template = await vite.transformIndexHtml(url, template);
|
||||
|
||||
// 2. Load server entry
|
||||
const { render } = await vite.ssrLoadModule('/src/entry-server.ts')
|
||||
const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
|
||||
|
||||
// 3. Render app
|
||||
const appHtml = await render(url)
|
||||
const appHtml = await render(url);
|
||||
|
||||
// 4. Inject into template
|
||||
const html = template.replace('<!--ssr-outlet-->', appHtml)
|
||||
const html = template.replace('<!--ssr-outlet-->', appHtml);
|
||||
|
||||
res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
|
||||
})
|
||||
res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
|
||||
});
|
||||
|
||||
app.listen(5173)
|
||||
app.listen(5173);
|
||||
```
|
||||
|
||||
### SSR Build
|
||||
@@ -140,6 +140,7 @@ app.listen(5173)
|
||||
```
|
||||
|
||||
The `--ssr` flag:
|
||||
|
||||
- Externalizes dependencies by default
|
||||
- Outputs for Node.js consumption
|
||||
|
||||
@@ -160,10 +161,10 @@ Control which deps get bundled vs externalized:
|
||||
```ts
|
||||
export default defineConfig({
|
||||
ssr: {
|
||||
noExternal: ['some-package'], // Bundle this dep
|
||||
noExternal: ['some-package'], // Bundle this dep
|
||||
external: ['another-package'], // Externalize this dep
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Conditional Logic
|
||||
@@ -179,54 +180,54 @@ if (import.meta.env.SSR) {
|
||||
### createServer
|
||||
|
||||
```ts
|
||||
import { createServer } from 'vite'
|
||||
import { createServer } from 'vite';
|
||||
|
||||
const server = await createServer({
|
||||
configFile: false,
|
||||
root: import.meta.dirname,
|
||||
server: { port: 1337 },
|
||||
})
|
||||
});
|
||||
|
||||
await server.listen()
|
||||
server.printUrls()
|
||||
await server.listen();
|
||||
server.printUrls();
|
||||
```
|
||||
|
||||
### build
|
||||
|
||||
```ts
|
||||
import { build } from 'vite'
|
||||
import { build } from 'vite';
|
||||
|
||||
await build({
|
||||
root: './project',
|
||||
build: { outDir: 'dist' },
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### preview
|
||||
|
||||
```ts
|
||||
import { preview } from 'vite'
|
||||
import { preview } from 'vite';
|
||||
|
||||
const previewServer = await preview({
|
||||
preview: { port: 8080, open: true },
|
||||
})
|
||||
previewServer.printUrls()
|
||||
});
|
||||
previewServer.printUrls();
|
||||
```
|
||||
|
||||
### resolveConfig
|
||||
|
||||
```ts
|
||||
import { resolveConfig } from 'vite'
|
||||
import { resolveConfig } from 'vite';
|
||||
|
||||
const config = await resolveConfig({}, 'build')
|
||||
const config = await resolveConfig({}, 'build');
|
||||
```
|
||||
|
||||
### loadEnv
|
||||
|
||||
```ts
|
||||
import { loadEnv } from 'vite'
|
||||
import { loadEnv } from 'vite';
|
||||
|
||||
const env = loadEnv('development', process.cwd(), '')
|
||||
const env = loadEnv('development', process.cwd(), '');
|
||||
// Loads all env vars (empty prefix = no filtering)
|
||||
```
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ description: Vite configuration patterns using vite.config.ts
|
||||
|
||||
```ts
|
||||
// vite.config.ts
|
||||
import { defineConfig } from 'vite'
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
// config options
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Vite auto-resolves `vite.config.ts` from project root. Supports ES modules syntax regardless of `package.json` type.
|
||||
@@ -25,11 +25,15 @@ Export a function to access command and mode:
|
||||
```ts
|
||||
export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
|
||||
if (command === 'serve') {
|
||||
return { /* dev config */ }
|
||||
return {
|
||||
/* dev config */
|
||||
};
|
||||
} else {
|
||||
return { /* build config */ }
|
||||
return {
|
||||
/* build config */
|
||||
};
|
||||
}
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
- `command`: `'serve'` during dev, `'build'` for production
|
||||
@@ -39,9 +43,11 @@ export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
|
||||
|
||||
```ts
|
||||
export default defineConfig(async ({ command, mode }) => {
|
||||
const data = await fetchSomething()
|
||||
return { /* config */ }
|
||||
})
|
||||
const data = await fetchSomething();
|
||||
return {
|
||||
/* config */
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
## Using Environment Variables in Config
|
||||
@@ -49,12 +55,12 @@ export default defineConfig(async ({ command, mode }) => {
|
||||
`.env` files are loaded **after** config resolution. Use `loadEnv` to access them in config:
|
||||
|
||||
```ts
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
// Load env files from cwd, include all vars (empty prefix)
|
||||
const env = loadEnv(mode, process.cwd(), '')
|
||||
|
||||
const env = loadEnv(mode, process.cwd(), '');
|
||||
|
||||
return {
|
||||
define: {
|
||||
__APP_ENV__: JSON.stringify(env.APP_ENV),
|
||||
@@ -62,8 +68,8 @@ export default defineConfig(({ mode }) => {
|
||||
server: {
|
||||
port: env.APP_PORT ? Number(env.APP_PORT) : 5173,
|
||||
},
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
## Key Config Options
|
||||
@@ -78,7 +84,7 @@ export default defineConfig({
|
||||
'~': '/src',
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### define (Global Constants)
|
||||
@@ -89,7 +95,7 @@ export default defineConfig({
|
||||
__APP_VERSION__: JSON.stringify('1.0.0'),
|
||||
__API_URL__: 'window.__backend_api_url',
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Values must be JSON-serializable or single identifiers. Non-strings auto-wrapped with `JSON.stringify`.
|
||||
@@ -97,11 +103,11 @@ Values must be JSON-serializable or single identifiers. Non-strings auto-wrapped
|
||||
### plugins
|
||||
|
||||
```ts
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Plugins array is flattened; falsy values ignored.
|
||||
@@ -119,7 +125,7 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### build.target
|
||||
@@ -131,7 +137,7 @@ export default defineConfig({
|
||||
build: {
|
||||
target: 'esnext', // or 'es2020', ['chrome90', 'firefox88']
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## TypeScript Intellisense
|
||||
@@ -142,17 +148,17 @@ For plain JS config files:
|
||||
/** @type {import('vite').UserConfig} */
|
||||
export default {
|
||||
// ...
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Or use `satisfies`:
|
||||
|
||||
```ts
|
||||
import type { UserConfig } from 'vite'
|
||||
import type { UserConfig } from 'vite';
|
||||
|
||||
export default {
|
||||
// ...
|
||||
} satisfies UserConfig
|
||||
} satisfies UserConfig;
|
||||
```
|
||||
|
||||
<!--
|
||||
|
||||
@@ -10,49 +10,49 @@ description: Vite-specific import patterns and runtime features
|
||||
Import multiple modules matching a pattern:
|
||||
|
||||
```ts
|
||||
const modules = import.meta.glob('./dir/*.ts')
|
||||
const modules = import.meta.glob('./dir/*.ts');
|
||||
// { './dir/foo.ts': () => import('./dir/foo.ts'), ... }
|
||||
|
||||
for (const path in modules) {
|
||||
modules[path]().then((mod) => {
|
||||
console.log(path, mod)
|
||||
})
|
||||
console.log(path, mod);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Eager Loading
|
||||
|
||||
```ts
|
||||
const modules = import.meta.glob('./dir/*.ts', { eager: true })
|
||||
const modules = import.meta.glob('./dir/*.ts', { eager: true });
|
||||
// Modules loaded immediately, no dynamic import
|
||||
```
|
||||
|
||||
### Named Imports
|
||||
|
||||
```ts
|
||||
const modules = import.meta.glob('./dir/*.ts', { import: 'setup' })
|
||||
const modules = import.meta.glob('./dir/*.ts', { import: 'setup' });
|
||||
// Only imports the 'setup' export from each module
|
||||
|
||||
const defaults = import.meta.glob('./dir/*.ts', { import: 'default', eager: true })
|
||||
const defaults = import.meta.glob('./dir/*.ts', { import: 'default', eager: true });
|
||||
```
|
||||
|
||||
### Multiple Patterns
|
||||
|
||||
```ts
|
||||
const modules = import.meta.glob(['./dir/*.ts', './another/*.ts'])
|
||||
const modules = import.meta.glob(['./dir/*.ts', './another/*.ts']);
|
||||
```
|
||||
|
||||
### Negative Patterns
|
||||
|
||||
```ts
|
||||
const modules = import.meta.glob(['./dir/*.ts', '!**/ignored.ts'])
|
||||
const modules = import.meta.glob(['./dir/*.ts', '!**/ignored.ts']);
|
||||
```
|
||||
|
||||
### Custom Queries
|
||||
|
||||
```ts
|
||||
const svgRaw = import.meta.glob('./icons/*.svg', { query: '?raw', import: 'default' })
|
||||
const svgUrls = import.meta.glob('./icons/*.svg', { query: '?url', import: 'default' })
|
||||
const svgRaw = import.meta.glob('./icons/*.svg', { query: '?raw', import: 'default' });
|
||||
const svgUrls = import.meta.glob('./icons/*.svg', { query: '?url', import: 'default' });
|
||||
```
|
||||
|
||||
## Asset Import Queries
|
||||
@@ -60,37 +60,37 @@ const svgUrls = import.meta.glob('./icons/*.svg', { query: '?url', import: 'defa
|
||||
### URL Import
|
||||
|
||||
```ts
|
||||
import imgUrl from './img.png'
|
||||
import imgUrl from './img.png';
|
||||
// Returns resolved URL: '/src/img.png' (dev) or '/assets/img.2d8efhg.png' (build)
|
||||
```
|
||||
|
||||
### Explicit URL
|
||||
|
||||
```ts
|
||||
import workletUrl from './worklet.js?url'
|
||||
import workletUrl from './worklet.js?url';
|
||||
```
|
||||
|
||||
### Raw String
|
||||
|
||||
```ts
|
||||
import shaderCode from './shader.glsl?raw'
|
||||
import shaderCode from './shader.glsl?raw';
|
||||
```
|
||||
|
||||
### Inline/No-Inline
|
||||
|
||||
```ts
|
||||
import inlined from './small.png?inline' // Force base64 inline
|
||||
import notInlined from './large.png?no-inline' // Force separate file
|
||||
import inlined from './small.png?inline'; // Force base64 inline
|
||||
import notInlined from './large.png?no-inline'; // Force separate file
|
||||
```
|
||||
|
||||
### Web Workers
|
||||
|
||||
```ts
|
||||
import Worker from './worker.ts?worker'
|
||||
const worker = new Worker()
|
||||
import Worker from './worker.ts?worker';
|
||||
const worker = new Worker();
|
||||
|
||||
// Or inline:
|
||||
import InlineWorker from './worker.ts?worker&inline'
|
||||
import InlineWorker from './worker.ts?worker&inline';
|
||||
```
|
||||
|
||||
Preferred pattern using constructor:
|
||||
@@ -98,7 +98,7 @@ Preferred pattern using constructor:
|
||||
```ts
|
||||
const worker = new Worker(new URL('./worker.ts', import.meta.url), {
|
||||
type: 'module',
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## Environment Variables
|
||||
@@ -106,11 +106,11 @@ const worker = new Worker(new URL('./worker.ts', import.meta.url), {
|
||||
### Built-in Constants
|
||||
|
||||
```ts
|
||||
import.meta.env.MODE // 'development' | 'production' | custom
|
||||
import.meta.env.BASE_URL // Base URL from config
|
||||
import.meta.env.PROD // true in production
|
||||
import.meta.env.DEV // true in development
|
||||
import.meta.env.SSR // true when running in server
|
||||
import.meta.env.MODE; // 'development' | 'production' | custom
|
||||
import.meta.env.BASE_URL; // Base URL from config
|
||||
import.meta.env.PROD; // true in production
|
||||
import.meta.env.DEV; // true in development
|
||||
import.meta.env.SSR; // true when running in server
|
||||
```
|
||||
|
||||
### Custom Variables
|
||||
@@ -124,8 +124,8 @@ DB_PASSWORD=secret # NOT exposed to client
|
||||
```
|
||||
|
||||
```ts
|
||||
console.log(import.meta.env.VITE_API_URL) // works
|
||||
console.log(import.meta.env.DB_PASSWORD) // undefined
|
||||
console.log(import.meta.env.VITE_API_URL); // works
|
||||
console.log(import.meta.env.DB_PASSWORD); // undefined
|
||||
```
|
||||
|
||||
### Mode-specific Files
|
||||
@@ -142,11 +142,11 @@ console.log(import.meta.env.DB_PASSWORD) // undefined
|
||||
```ts
|
||||
// vite-env.d.ts
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_URL: string
|
||||
readonly VITE_API_URL: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -154,7 +154,9 @@ interface ImportMeta {
|
||||
|
||||
```html
|
||||
<p>Running in %MODE%</p>
|
||||
<script>window.API = "%VITE_API_URL%"</script>
|
||||
<script>
|
||||
window.API = '%VITE_API_URL%';
|
||||
</script>
|
||||
```
|
||||
|
||||
## CSS Modules
|
||||
@@ -162,22 +164,22 @@ interface ImportMeta {
|
||||
Any `.module.css` file treated as CSS module:
|
||||
|
||||
```ts
|
||||
import styles from './component.module.css'
|
||||
element.className = styles.button
|
||||
import styles from './component.module.css';
|
||||
element.className = styles.button;
|
||||
```
|
||||
|
||||
With camelCase conversion:
|
||||
|
||||
```ts
|
||||
// .my-class -> myClass (if css.modules.localsConvention configured)
|
||||
import { myClass } from './component.module.css'
|
||||
import { myClass } from './component.module.css';
|
||||
```
|
||||
|
||||
## JSON Import
|
||||
|
||||
```ts
|
||||
import pkg from './package.json'
|
||||
import { version } from './package.json' // Named import with tree-shaking
|
||||
import pkg from './package.json';
|
||||
import { version } from './package.json'; // Named import with tree-shaking
|
||||
```
|
||||
|
||||
## HMR API
|
||||
@@ -186,13 +188,13 @@ import { version } from './package.json' // Named import with tree-shaking
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept((newModule) => {
|
||||
// Handle update
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
import.meta.hot.dispose((data) => {
|
||||
// Cleanup before module is replaced
|
||||
})
|
||||
|
||||
import.meta.hot.invalidate() // Force full reload
|
||||
});
|
||||
|
||||
import.meta.hot.invalidate(); // Force full reload
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ function myPlugin(): Plugin {
|
||||
return {
|
||||
name: 'my-plugin',
|
||||
// hooks...
|
||||
}
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
@@ -32,7 +32,7 @@ const plugin = () => ({
|
||||
alias: { foo: 'bar' },
|
||||
},
|
||||
}),
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### configResolved
|
||||
@@ -41,17 +41,19 @@ Access final resolved config:
|
||||
|
||||
```ts
|
||||
const plugin = () => {
|
||||
let config: ResolvedConfig
|
||||
let config: ResolvedConfig;
|
||||
return {
|
||||
name: 'read-config',
|
||||
configResolved(resolvedConfig) {
|
||||
config = resolvedConfig
|
||||
config = resolvedConfig;
|
||||
},
|
||||
transform(code, id) {
|
||||
if (config.command === 'serve') { /* dev */ }
|
||||
if (config.command === 'serve') {
|
||||
/* dev */
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
### configureServer
|
||||
@@ -64,10 +66,10 @@ const plugin = () => ({
|
||||
configureServer(server) {
|
||||
server.middlewares.use((req, res, next) => {
|
||||
// handle request
|
||||
next()
|
||||
})
|
||||
next();
|
||||
});
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Return function to run **after** internal middlewares:
|
||||
@@ -90,9 +92,9 @@ Transform HTML entry files:
|
||||
const plugin = () => ({
|
||||
name: 'html-transform',
|
||||
transformIndexHtml(html) {
|
||||
return html.replace(/<title>(.*?)<\/title>/, '<title>New Title</title>')
|
||||
return html.replace(/<title>(.*?)<\/title>/, '<title>New Title</title>');
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Inject tags:
|
||||
@@ -122,27 +124,27 @@ Serve virtual content without files on disk:
|
||||
|
||||
```ts
|
||||
const plugin = () => {
|
||||
const virtualModuleId = 'virtual:my-module'
|
||||
const resolvedId = '\0' + virtualModuleId
|
||||
const virtualModuleId = 'virtual:my-module';
|
||||
const resolvedId = '\0' + virtualModuleId;
|
||||
|
||||
return {
|
||||
name: 'virtual-module',
|
||||
resolveId(id) {
|
||||
if (id === virtualModuleId) return resolvedId
|
||||
if (id === virtualModuleId) return resolvedId;
|
||||
},
|
||||
load(id) {
|
||||
if (id === resolvedId) {
|
||||
return `export const msg = "from virtual module"`
|
||||
return `export const msg = "from virtual module"`;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
Usage:
|
||||
|
||||
```ts
|
||||
import { msg } from 'virtual:my-module'
|
||||
import { msg } from 'virtual:my-module';
|
||||
```
|
||||
|
||||
Convention: prefix user-facing path with `virtual:`, prefix resolved id with `\0`.
|
||||
@@ -212,8 +214,8 @@ Client side:
|
||||
```ts
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.on('my:event', (data) => {
|
||||
console.log(data.msg)
|
||||
})
|
||||
console.log(data.msg);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
@@ -221,12 +223,12 @@ Client to server:
|
||||
|
||||
```ts
|
||||
// Client
|
||||
import.meta.hot.send('my:from-client', { msg: 'Hey!' })
|
||||
import.meta.hot.send('my:from-client', { msg: 'Hey!' });
|
||||
|
||||
// Server
|
||||
server.ws.on('my:from-client', (data, client) => {
|
||||
client.send('my:ack', { msg: 'Got it!' })
|
||||
})
|
||||
client.send('my:ack', { msg: 'Got it!' });
|
||||
});
|
||||
```
|
||||
|
||||
<!--
|
||||
|
||||
@@ -21,15 +21,15 @@ For SPA/MPA, nothing changes—options apply to the implicit `client` environmen
|
||||
export default defineConfig({
|
||||
build: { sourcemap: false },
|
||||
optimizeDeps: { include: ['lib'] },
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## Multiple Environments
|
||||
|
||||
```ts
|
||||
export default defineConfig({
|
||||
build: { sourcemap: false }, // Inherited by all environments
|
||||
optimizeDeps: { include: ['lib'] }, // Client only
|
||||
build: { sourcemap: false }, // Inherited by all environments
|
||||
optimizeDeps: { include: ['lib'] }, // Client only
|
||||
environments: {
|
||||
// SSR environment
|
||||
server: {},
|
||||
@@ -38,7 +38,7 @@ export default defineConfig({
|
||||
resolve: { noExternal: true },
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Environments inherit top-level config. Some options (like `optimizeDeps`) only apply to `client` by default.
|
||||
@@ -47,12 +47,12 @@ Environments inherit top-level config. Some options (like `optimizeDeps`) only a
|
||||
|
||||
```ts
|
||||
interface EnvironmentOptions {
|
||||
define?: Record<string, any>
|
||||
resolve?: EnvironmentResolveOptions
|
||||
optimizeDeps: DepOptimizationOptions
|
||||
consumer?: 'client' | 'server'
|
||||
dev: DevOptions
|
||||
build: BuildOptions
|
||||
define?: Record<string, any>;
|
||||
resolve?: EnvironmentResolveOptions;
|
||||
optimizeDeps: DepOptimizationOptions;
|
||||
consumer?: 'client' | 'server';
|
||||
dev: DevOptions;
|
||||
build: BuildOptions;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -61,7 +61,7 @@ interface EnvironmentOptions {
|
||||
Runtime providers can define custom environments:
|
||||
|
||||
```ts
|
||||
import { customEnvironment } from 'vite-environment-provider'
|
||||
import { customEnvironment } from 'vite-environment-provider';
|
||||
|
||||
export default defineConfig({
|
||||
environments: {
|
||||
@@ -69,7 +69,7 @@ export default defineConfig({
|
||||
build: { outDir: '/dist/ssr' },
|
||||
}),
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Example: Cloudflare's Vite plugin runs code in `workerd` runtime during development.
|
||||
|
||||
@@ -9,13 +9,13 @@ Vite 8 replaces esbuild+Rollup with Rolldown, a unified Rust-based bundler.
|
||||
|
||||
## What Changed
|
||||
|
||||
| Before (Vite 7) | After (Vite 8) |
|
||||
|-----------------|----------------|
|
||||
| esbuild (dev transform) | Oxc Transformer |
|
||||
| esbuild (dep pre-bundling) | Rolldown |
|
||||
| Rollup (production build) | Rolldown |
|
||||
| `rollupOptions` | `rolldownOptions` |
|
||||
| `esbuild` option | `oxc` option |
|
||||
| Before (Vite 7) | After (Vite 8) |
|
||||
| -------------------------- | ----------------- |
|
||||
| esbuild (dev transform) | Oxc Transformer |
|
||||
| esbuild (dep pre-bundling) | Rolldown |
|
||||
| Rollup (production build) | Rolldown |
|
||||
| `rollupOptions` | `rolldownOptions` |
|
||||
| `esbuild` option | `oxc` option |
|
||||
|
||||
## Performance Impact
|
||||
|
||||
@@ -36,7 +36,7 @@ export default defineConfig({
|
||||
output: { globals: { vue: 'Vue' } },
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
// After (Vite 8)
|
||||
export default defineConfig({
|
||||
@@ -46,7 +46,7 @@ export default defineConfig({
|
||||
output: { globals: { vue: 'Vue' } },
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### esbuild → oxc
|
||||
@@ -58,7 +58,7 @@ export default defineConfig({
|
||||
jsxFactory: 'h',
|
||||
jsxFragment: 'Fragment',
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
// After (Vite 8)
|
||||
export default defineConfig({
|
||||
@@ -69,7 +69,7 @@ export default defineConfig({
|
||||
pragmaFrag: 'Fragment',
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### JSX Configuration
|
||||
@@ -78,12 +78,12 @@ export default defineConfig({
|
||||
export default defineConfig({
|
||||
oxc: {
|
||||
jsx: {
|
||||
runtime: 'automatic', // or 'classic'
|
||||
runtime: 'automatic', // or 'classic'
|
||||
importSource: 'react', // for automatic runtime
|
||||
},
|
||||
jsxInject: `import React from 'react'`, // auto-inject
|
||||
jsxInject: `import React from 'react'`, // auto-inject
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Custom Transform Targets
|
||||
@@ -94,7 +94,7 @@ export default defineConfig({
|
||||
include: ['**/*.ts', '**/*.tsx'],
|
||||
exclude: ['node_modules/**'],
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## Plugin Compatibility
|
||||
|
||||
Reference in New Issue
Block a user