vitejs / docs-ko Goto Github PK

+++ b/docs/config/index.md
@@ -78,7 +78,7 @@ export default defineConfig(async ({ command, mode }) => {
return {
// build specific config
}
-}
+})
```
## Shared Options

+++ b/docs/config/index.md
@@ -599,7 +599,7 @@ createServer()
- **Type:** `boolean | 'inline' | 'hidden'`
- **Default:** `false`
-  Generate production source maps.
+  Generate production source maps. If `true`, a separate sourcemap file will be created. If `'inline'`, the sourcemap will be appended to the resulting output file as a data URI. `'hidden'` works like `true` except that the corresponding sourcemap comments in the bundled files are suppressed.
### build.rollupOptions

+++ b/docs/config/index.md
@@ -415,7 +415,7 @@ export default defineConfig(async ({ command, mode }) => {
changeOrigin: true,
configure: (proxy, options) => {
// proxy will be an instance of 'http-proxy'
-          },
+          }
}
}
}
@@ -741,9 +741,9 @@ SSR options may be adjusted in minor releases.
### ssr.noExternal
-- **Type:** `string | RegExp | (string | RegExp)[]`
+- **Type:** `string | RegExp | (string | RegExp)[] | true`
-  Prevent listed dependencies from being externalized for SSR.
+  Prevent listed dependencies from being externalized for SSR. If `true`, no dependencies are externalized.
### ssr.target

+++ b/docs/guide/static-deploy.md
@@ -138,24 +138,28 @@ You can also run the above script in your CI setup to enable automatic deploymen
If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/<REPO>/`, for example your repository is at `https://gitlab.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`.
-2. Set `build.outDir` in `vite.config.js` to `public`.
-
-3. Create a file called `.gitlab-ci.yml` in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content:
+2. Create a file called `.gitlab-ci.yml` in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content:
```yaml
-   image: node:10.22.0
+   image: node:16.5.0
pages:
+     stage: deploy
cache:
+       key:
+         files:
+           - package-lock.json
+         prefix: npm
paths:
- node_modules/
script:
- npm install
- npm run build
+       - cp -a dist/. public/
artifacts:
paths:
- public
-     only:
-       - master
+     rules:
+       - $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
```
## Netlify

+++ b/docs/config/index.md
@@ -621,10 +621,10 @@ createServer()
### build.lib
-- **Type:** `{ entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string }`
+- **Type:** `{ entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat) => string) }`
- **Related:** [Library Mode](/guide/build#library-mode)
-  Build as a library. `entry` is required since the library cannot use HTML as entry. `name` is the exposed global variable and is required when `formats` includes `'umd'` or `'iife'`. Default `formats` are `['es', 'umd']`. `fileName` is the name of the package file output, default `fileName` is the name option of package.json
+  Build as a library. `entry` is required since the library cannot use HTML as entry. `name` is the exposed global variable and is required when `formats` includes `'umd'` or `'iife'`. Default `formats` are `['es', 'umd']`. `fileName` is the name of the package file output, default `fileName` is the name option of package.json, it can also be defined as function taking the `format` as an argument.
### build.manifest

+++ b/docs/config/index.md
@@ -213,7 +213,7 @@ export default defineConfig(async ({ command, mode }) => {
```ts
interface CSSModulesOptions {
scopeBehaviour?: 'global' | 'local'
-    globalModulePaths?: string[]
+    globalModulePaths?: RegExp[]
generateScopedName?:
| string
| ((name: string, filename: string, css: string) => string)

+++ b/docs/guide/env-and-mode.md
@@ -44,7 +44,7 @@ VITE_SOME_KEY=123
Only `VITE_SOME_KEY` will be exposed as `import.meta.env.VITE_SOME_KEY` to your client source code, but `DB_PASSWORD` will not.
-If you want to customize env variables prefix, see [envPrefix](/config/index#envPrefix) option.
+If you want to customize env variables prefix, see [envPrefix](/config/index#envprefix) option.
:::warning SECURITY NOTES

+++ b/docs/guide/env-and-mode.md
@@ -60,10 +60,14 @@ By default, Vite provides type definition for `import.meta.env`. While you can d
To achieve, you can create an `env.d.ts` in `src` directory, then augment `ImportMetaEnv` like this:
```typescript
-interface ImportMetaEnv {
-  VITE_APP_TITLE: string
+interface ImportMetaEnv extends Readonly<Record<string, string>> {
+  readonly VITE_APP_TITLE: string
// more env variables...
}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
```
## Modes

+++ b/docs/config/index.md
@@ -55,7 +55,7 @@ Vite also directly supports TS config files. You can use `vite.config.ts` with t
If the config needs to conditional determine options based on the command (`serve` or `build`) or the [mode](/guide/env-and-mode) being used, it can export a function instead:
```js
-export default ({ command, mode }) => {
+export default defineConfig(({ command, mode }) => {
if (command === 'serve') {
return {
// serve specific config
@@ -65,7 +65,7 @@ export default ({ command, mode }) => {
// build specific config
}
}
-}
+})
```
### Async Config
@@ -73,7 +73,7 @@ export default ({ command, mode }) => {
If the config needs to call async function, it can export a async function instead:
```js
-export default async ({ command, mode }) => {
+export default defineConfig(async ({ command, mode }) => {
const data = await asyncFunction()
return {
// build specific config
@@ -242,7 +242,7 @@ export default async ({ command, mode }) => {
Specify options to pass to CSS pre-processors. Example:
```js
-  export default {
+  export default defineConfig({
css: {
preprocessorOptions: {
scss: {
@@ -250,7 +250,7 @@ export default async ({ command, mode }) => {
}
}
}
-  }
+  })
```
### json.namedExports
@@ -276,12 +276,12 @@ export default async ({ command, mode }) => {
`ESBuildOptions` extends [ESbuild's own transform options](https://esbuild.github.io/api/#transform-api). The most common use case is customizing JSX:
```js
-  export default {
+  export default defineConfig({
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment'
}
-  }
+  })
```
By default, ESBuild is applied to `ts`, `jsx` and `tsx` files. You can customize this with `esbuild.include` and `esbuild.exclude`, both of which expect type of `string | RegExp | (string | RegExp)[]`.
@@ -289,11 +289,11 @@ export default async ({ command, mode }) => {
In addition, you can also use `esbuild.jsxInject` to automatically inject JSX helper imports for every file transformed by ESBuild:
```js
-  export default {
+  export default defineConfig({
esbuild: {
jsxInject: `import React from 'react'`
}
-  }
+  })
```
Set to `false` to disable ESbuild transforms.
@@ -374,11 +374,11 @@ export default async ({ command, mode }) => {
**Example:**
```js
-  export default {
+  export default defineConfig({
server: {
open: '/docs/index.html'
}
-  }
+  })
```
### server.proxy
@@ -392,7 +392,7 @@ export default async ({ command, mode }) => {
**Example:**
```js
-  export default {
+  export default defineConfig({
server: {
proxy: {
// string shorthand
@@ -419,7 +419,7 @@ export default async ({ command, mode }) => {
}
}
}
-  }
+  })
```
### server.cors
@@ -514,14 +514,14 @@ createServer()
Accepts a path to specify the custom workspace root. Could be a absolute path or a path relative to [project root](/guide/#index-html-and-project-root). For example
```js
-  export default {
+  export default defineConfig({
server: {
fs: {
// Allow serving files from one level up to the project root
allow: ['..']
}
}
-  }
+  })
```
## Build Options
@@ -543,23 +543,6 @@ createServer()
Note the build will fail if the code contains features that cannot be safely transpiled by esbuild. See [esbuild docs](https://esbuild.github.io/content-types/#javascript) for more details.
-### build.polyfillDynamicImport
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-  Whether to automatically inject [dynamic import polyfill](https://github.com/GoogleChromeLabs/dynamic-import-polyfill).
-
-  If set to true, the polyfill is auto injected into the proxy module of each `index.html` entry. If the build is configured to use a non-html custom entry via `build.rollupOptions.input`, then it is necessary to manually import the polyfill in your custom entry:
-
-  ```js
-  import 'vite/dynamic-import-polyfill'
-  ```
-
-  When using [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy), the plugin sets this option to `true` automatically.
-
-  Note: the polyfill does **not** apply to [Library Mode](/guide/build#library-mode). If you need to support browsers without native dynamic import, you should probably avoid using it in your library.
-
### build.outDir
- **Type:** `string`

+++ b/docs/config/index.md
@@ -543,6 +543,21 @@ createServer()
Note the build will fail if the code contains features that cannot be safely transpiled by esbuild. See [esbuild docs](https://esbuild.github.io/content-types/#javascript) for more details.
+### build.polyfillModulePreload
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Whether to automatically inject [module preload polyfill](https://guybedford.com/es-module-preloading-integrity#modulepreload-polyfill).
+
+  If set to `true`, the polyfill is auto injected into the proxy module of each `index.html` entry. If the build is configured to use a non-html custom entry via `build.rollupOptions.input`, then it is necessary to manually import the polyfill in your custom entry:
+
+  ```js
+  import 'vite/modulepreload-polyfill'
+  ```
+
+  Note: the polyfill does **not** apply to [Library Mode](/guide/build#library-mode). If you need to support browsers without native dynamic import, you should probably avoid using it in your library.
+
### build.outDir
- **Type:** `string`

+++ b/docs/guide/backend-integration.md
@@ -1,8 +1,10 @@
# Backend Integration
+:::tip Note
If you want to serve the HTML using a traditional backend (e.g. Rails, Laravel) but use Vite for serving assets, check for existing integrations listed in [Awesome Vite](https://github.com/vitejs/awesome-vite#integrations-with-backends).
-Or you can follow these steps to configure it manually:
+If you need a custom integration, you can follow the steps in this guide to configure it manually
+:::
1. In your Vite config, configure the entry and enable build manifest:

+++ b/docs/config/index.md
@@ -313,7 +313,7 @@ export default defineConfig(async ({ command, mode }) => {
- **Type:** `string | RegExp | (string | RegExp)[]`
- **Related:** [Static Asset Handling](/guide/assets)
-  Specify additional file types to be treated as static assets so that:
+  Specify additional [picomatch patterns](https://github.com/micromatch/picomatch) to be treated as static assets so that:
- They will be excluded from the plugin transform pipeline when referenced from HTML or directly requested over `fetch` or XHR.
@@ -321,6 +321,14 @@ export default defineConfig(async ({ command, mode }) => {
The built-in asset type list can be found [here](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts).
+  **Example:**
+
+  ```js
+  export default defineConfig({
+    assetsInclude: ['**/*.gltf']
+  })
+  ```
+
### logLevel
- **Type:** `'info' | 'warn' | 'error' | 'silent'`

+++ b/docs/.vitepress/config.js
@@ -71,6 +71,10 @@ module.exports = {
{
text: '简体中文',
link: 'https://cn.vitejs.dev'
+          },
+          {
+            text: '日本語',
+            link: 'https://ja.vitejs.dev'
}
]
}

+++ b/docs/guide/dep-pre-bundling.md
@@ -38,6 +38,11 @@ After the server has already started, if a new dependency import is encountered
In a monorepo setup, a dependency may be a linked package from the same repo. Vite automatically detects dependencies that are not resolved from `node_modules` and treats the linked dep as source code. It will not attempt to bundle the linked dep, and instead will analyze the linked dep's dependency list instead.
+::: warning Note
+Linked dependencies might not work properly in the final build due to differences in dependency resolution.
+Use `npm package` instead for all local dependencies to avoid issues in the final bundle.
+:::
+
## Customizing the Behavior
The default dependency discovery heuristics may not always be desirable. In cases where you want to explicitly include/exclude dependencies from the list, use the [`optimizeDeps` config options](/config/#dep-optimization-options).

+++ b/docs/config/index.md
@@ -396,7 +396,7 @@ export default defineConfig(async ({ command, mode }) => {
server: {
proxy: {
// string shorthand
-        '/foo': 'http://localhost:4567/foo',
+        '/foo': 'http://localhost:4567',
// with options
'/api': {
target: 'http://jsonplaceholder.typicode.com',

+++ b/docs/config/index.md
@@ -713,7 +713,16 @@ createServer()
Dependencies to exclude from pre-bundling.
:::warning CommonJS
-  CommonJS dependencies should not be excluded from optimization. If an ESM dependency has a nested CommonJS dependency, it should not be excluded as well.
+  CommonJS dependencies should not be excluded from optimization. If an ESM dependency is excluded from optimization, but has a nested CommonJS dependency, the CommonJS dependency should be added to `optimizeDeps.include`. Example:
+
+  ```js
+  export default defineConfig({
+    optimizeDeps: {
+      include: ['esm-dep > cjs-dep']
+    }
+  })
+  ```
+
:::
### optimizeDeps.include

+++ b/docs/guide/api-plugin.md
@@ -4,6 +4,17 @@ Vite plugins extends Rollup's well-designed plugin interface with a few extra Vi
**It is recommended to go through [Rollup's plugin documentation](https://rollupjs.org/guide/en/#plugin-development) first before reading the sections below.**
+## Authoring a Plugin
+
+Vite strives to offer established patterns out of the box, so before creating a new plugin make sure that you check the [Features guide](https://vitejs.dev/guide/features) to see if your need is covered. Also review available community plugins, both in the form of a [compatible Rollup plugin](https://github.com/rollup/awesome) and [Vite Specific plugins](https://github.com/vitejs/awesome-vite#plugins)
+
+When creating a plugin, you can inline it in your `vite.config.js`. There is no need to create a new package for it. Once you see that a plugin was useful in your projects, consider sharing it to help others [in the ecosystem](https://chat.vitejs.dev).
+
+::: tip
+When learning, debugging, or authoring plugins we suggest including [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) in your project. It allows you to inspect the intermediate state of Vite plugins. After installing, you can visit `localhost:3000/__inspect/` to inspect the modules and transformation stack of your project. Check out install instructions in the [vite-plugin-inspect docs](https://github.com/antfu/vite-plugin-inspect).
+![vite-plugin-inspect](/images/vite-plugin-inspect.png)
+:::
+
## Conventions
If the plugin doesn't use Vite specific hooks and can be implemented as a [Compatible Rollup Plugin](#rollup-plugin-compatibility), then it is recommended to use the [Rollup Plugin naming conventions](https://rollupjs.org/guide/en/#conventions)

+++ b/docs/config/index.md
@@ -367,7 +367,7 @@ export default async ({ command, mode }) => {
- **Type:** `boolean | string`
-  Automatically open the app in the browser on server start. When the value is a string, it will be used as the URL's pathname.
+  Automatically open the app in the browser on server start. When the value is a string, it will be used as the URL's pathname. If you want to open the server in a specific browser you like, you can set the env `process.env.BROWSER` (e.g. `firefox`). See [the `open` package](https://github.com/sindresorhus/open#app) for more details.
**Example:**
@@ -613,6 +613,12 @@ createServer()
Options to pass on to [@rollup/plugin-commonjs](https://github.com/rollup/plugins/tree/master/packages/commonjs).
+### build.dynamicImportVarsOptions
+
+- **Type:** [`RollupDynamicImportVarsOptions`](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#options)
+
+  Options to pass on to [@rollup/plugin-dynamic-import-vars](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars).
+
### build.lib
- **Type:** `{ entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string }`

+++ b/docs/guide/using-plugins.md
@@ -36,7 +36,7 @@ Vite aims to provide out-of-the-box support for common web development patterns.
Check out the [Plugins section](../plugins/) for information about official plugins. Community plugins are listed in [awesome-vite](https://github.com/vitejs/awesome-vite#plugins). For compatible Rollup plugins, check out [Vite Rollup Plugins](https://vite-rollup-plugins.patak.dev) for a list of compatible official Rollup plugins with usage instructions or the [Rollup Plugin Compatibility section](../guide/api-plugin#rollup-plugin-compatibility) in case it is not listed there.
-You can also find plugins that follow the [recommended conventions](./api-plugin.md#conventions) using a [npm search for vite-plugin](https://www.npmjs.com/search?q=vite-plugin&ranking=popularity) for Vite plugins or a [npm search for rollup-plugin](https://www.npmjs.com/search?q=rollup-plugin&ranking=popularity) or a [npm search for vite-plugin](https://www.npmjs.com/search?q=vite-plugin&ranking=popularity) for Rollup plugins.
+You can also find plugins that follow the [recommended conventions](./api-plugin.md#conventions) using a [npm search for vite-plugin](https://www.npmjs.com/search?q=vite-plugin&ranking=popularity) for Vite plugins or a [npm search for rollup-plugin](https://www.npmjs.com/search?q=rollup-plugin&ranking=popularity) for Rollup plugins.
## Enforcing Plugin Ordering

+++ b/docs/blog/announcing-vite2.md
@@ -46,7 +46,7 @@ Vite treats CSS as a first-class citizen of the module graph and supports the fo
### Server-Side Rendering (SSR) Support
-Vite 2.0 ships with [experimental SSR support](https://vitejs.dev/guide/ssr.html). Vite provides APIs to to efficiently load and update ESM-based source code in Node.js during development (almost like server-side HMR), and automatically externalizes CommonJS-compatible dependencies to improve development and SSR build speed. The production server can be completely decoupled from Vite, and the same setup can be easily adapted to perform pre-rendering / SSG.
+Vite 2.0 ships with [experimental SSR support](https://vitejs.dev/guide/ssr.html). Vite provides APIs to efficiently load and update ESM-based source code in Node.js during development (almost like server-side HMR), and automatically externalizes CommonJS-compatible dependencies to improve development and SSR build speed. The production server can be completely decoupled from Vite, and the same setup can be easily adapted to perform pre-rendering / SSG.
Vite SSR is provided as a low-level feature and we are expecting to see higher level frameworks leveraging it under the hood.

+++ b/docs/guide/api-plugin.md
@@ -150,7 +150,7 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
### `config`
- **Type:** `(config: UserConfig, env: { mode: string, command: string }) => UserConfig | null | void`
-- **Kind:** `sync`, `sequential`
+- **Kind:** `async`, `sequential`
Modify Vite config before it's resolved. The hook receives the raw user config (CLI options merged with config file) and the current config env which exposes the `mode` and `command` being used. It can return a partial config object that will be deeply merged into existing config, or directly mutate the config (if the default merging cannot achieve the desired result).

+++ b/docs/.vitepress/theme/sponsors.css
@@ -33,4 +33,4 @@
/* special cases */
#sponsor-mux {
padding: 5px 0;
-}
\ No newline at end of file
+}

+++ b/docs/.vitepress/theme/custom.css
@@ -28,3 +28,13 @@
.DocSearch {
--docsearch-primary-color: var(--c-brand) !important;
}
+
+#play-vite-audio {
+  padding: 0;
+  margin-left: 5px;
+  display: inline-flex;
+}
+
+#play-vite-audio img {
+  opacity: 0.8;
+}

+++ b/docs/guide/features.md
@@ -34,7 +34,37 @@ Vite only performs transpilation on `.ts` files and does **NOT** perform type ch
Vite uses [esbuild](https://github.com/evanw/esbuild) to transpile TypeScript into JavaScript which is about 20~30x faster than vanilla `tsc`, and HMR updates can reflect in the browser in under 50ms.
-Note that because `esbuild` only performs transpilation without type information, it doesn't support certain features like const enum and implicit type-only imports. You must set `"isolatedModules": true` in your `tsconfig.json` under `compilerOptions` so that TS will warn you against the features that do not work with isolated transpilation.
+### TypeScript Compiler Options
+
+Some configuration fields under `compilerOptions` in `tsconfig.json` require special attention.
+
+#### `isolatedModules`
+
+Should be set to `true`.
+
+It is because `esbuild` only performs transpilation without type information, it doesn't support certain features like const enum and implicit type-only imports.
+
+You must set `"isolatedModules": true` in your `tsconfig.json` under `compilerOptions`, so that TS will warn you against the features that do not work with isolated transpilation.
+
+#### `useDefineForClassFields`
+
+Starting from Vite 2.5.0, the default value will be `true` if the TypeScript target is `ESNext`. It is consistent with the [behavior of `tsc` 4.3.2 and later](https://github.com/microsoft/TypeScript/pull/42663). It is also the standard ECMAScript runtime behavior.
+
+But it may be counter-intuitive for those coming from other programming languages or older versions of TypeScript.
+You can read more about the transition in the [TypeScript 3.7 release notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier).
+
+If you are using a library that heavily relies on class fields, please be careful about the library's intended usage of it.
+
+Most libraries expect `"useDefineForClassFields": true`, such as [MobX](https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties), [Vue Class Components 8.x](https://github.com/vuejs/vue-class-component/issues/465), etc.
+
+But a few libraries haven't transitioned to this new default yet, including [`lit-element`](https://github.com/lit/lit-element/issues/1030). Please explicitly set `useDefineForClassFields` to `false` in these cases.
+
+#### Other Compiler Options Affecting the Build Result
+
+- [`extends`](https://www.typescriptlang.org/tsconfig#extends)
+- [`importsNotUsedAsValues`](https://www.typescriptlang.org/tsconfig#importsNotUsedAsValues)
+- [`jsxFactory`](https://www.typescriptlang.org/tsconfig#jsxFactory)
+- [`jsxFragmentFactory`](https://www.typescriptlang.org/tsconfig#jsxFragmentFactory)
### Client Types

+++ b/docs/config/index.md
@@ -453,6 +453,8 @@ export default defineConfig(async ({ command, mode }) => {
File system watcher options to pass on to [chokidar](https://github.com/paulmillr/chokidar#api).
+  When running Vite on Windows Subsystem for Linux (WSL) 2, if the project folder resides in a Windows filesystem, you'll need to set this option to `{ usePolling: true }`. This is due to [a WSL2 limitation](https://github.com/microsoft/WSL/issues/4739) with the Windows filesystem.
+
### server.middlewareMode
- **Type:** `'ssr' | 'html'`

+++ b/docs/config/index.md
@@ -488,7 +488,7 @@ async function createServer() {
createServer()
```
-### server.fsServe.strict
+### server.fs.strict
- **Experimental**
- **Type:** `boolean`
@@ -496,12 +496,12 @@ createServer()
Restrict serving files outside of workspace root.
-### server.fsServe.allow
+### server.fs.allow
- **Experimental**
- **Type:** `string[]`
-  Restrict files that could be served via `/@fs/`. When `server.fsServe.strict` is set to `true`, accessing files outside this directory list will result in a 403.
+  Restrict files that could be served via `/@fs/`. When `server.fs.strict` is set to `true`, accessing files outside this directory list will result in a 403.
Vite will search for the root of the potential workspace and use it as default. A valid workspace met the following conditions, otherwise will fallback to the [project root](/guide/#index-html-and-project-root).
@@ -514,7 +514,7 @@ createServer()
```js
export default {
server: {
-      fsServe: {
+      fs: {
// Allow serving files from one level up to the project root
allow: [
'..'
@@ -700,6 +700,10 @@ createServer()
Dependencies to exclude from pre-bundling.
+  :::warning CommonJS
+  CommonJS dependencies should not be excluded from optimization. If an ESM dependency has a nested CommonJS dependency, it should not be excluded as well.
+  :::
+
### optimizeDeps.include
- **Type:** `string[]`

+++ b/docs/config/index.md
@@ -664,6 +664,14 @@ createServer()
When set to `true`, the build will also generate a `manifest.json` file that contains a mapping of non-hashed asset filenames to their hashed versions, which can then be used by a server framework to render the correct asset links.
+### build.ssrManifest
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **Related:** [Server-Side Rendering](/guide/ssr)
+
+  When set to `true`, the build will also generate a SSR manifest for determining style links and asset preload directives in production.
+
### build.minify
- **Type:** `boolean | 'terser' | 'esbuild'`

+++ b/docs/guide/env-and-mode.md
@@ -16,7 +16,7 @@ Vite exposes env variables on the special **`import.meta.env`** object. Some bui
During production, these env variables are **statically replaced**. It is therefore necessary to always reference them using the full static string. For example, dynamic key access like `import.meta.env[key]` will not work.
-It will also replace these strings appearing in JavaScript strings and Vue templates. This should be a rare case, but it can be unintended. There are ways to work around this behavior:
+It will also replace these strings appearing in JavaScript strings and Vue templates. This should be a rare case, but it can be unintended. You may see errors like `Missing Semicolon` or `Unexpected token` in this case, for example when `"process.env.NODE_ENV: "` is transformed to `""development": "`. There are ways to work around this behavior:
- For JavaScript strings, you can break the string up with a unicode zero-width space, e.g. `'import.meta\u200b.env.MODE'`.

+++ b/docs/blog/announcing-vite2.md
@@ -24,7 +24,7 @@ Since we decided to completely refactor the internals before 1.0 got out of RC,
The original idea of Vite started as a [hacky prototype that serves Vue single-file components over native ESM](https://github.com/vuejs/vue-dev-server). Vite 1 was a continuation of that idea with HMR implemented on top.
-Vite 2.0 takes what we learned along the way and is redesigned from scratch with a more robust internal architecture. It is now completely framework agnostic, and all framework-specific support is delegated to plugins. There are now [official templates for Vue, React, Preact, Lit Element](https://github.com/vitejs/vite/tree/main/packages/create-app), and ongoing community efforts for Svelte integration.
+Vite 2.0 takes what we learned along the way and is redesigned from scratch with a more robust internal architecture. It is now completely framework agnostic, and all framework-specific support is delegated to plugins. There are now [official templates for Vue, React, Preact, Lit Element](https://github.com/vitejs/vite/tree/main/packages/create-vite), and ongoing community efforts for Svelte integration.
### New Plugin Format and API

+++ b/docs/guide/features.md
@@ -260,7 +260,7 @@ Note that:
- The glob patterns are treated like import specifiers: they must be either relative (start with `./`) or absolute (start with `/`, resolved relative to project root).
- The glob matching is done via `fast-glob` - check out its documentation for [supported glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax).
-## Web Assembly
+## WebAssembly
Pre-compiled `.wasm` files can be directly imported - the default export will be an initialization function that returns a Promise of the exports object of the wasm instance:

+++ b/docs/config/index.md
@@ -15,7 +15,7 @@ export default {
}
```
-Note Vite supports using ES modules syntax in the config file even if the project is not using native Node ESM via `type: "module"`. In this case the config file is auto pre-processed before load.
+Note Vite supports using ES modules syntax in the config file even if the project is not using native Node ESM via `type: "module"`. In this case, the config file is auto pre-processed before load.
You can also explicitly specify a config file to use with the `--config` CLI option (resolved relative to `cwd`):
@@ -38,7 +38,7 @@ const config = {
export default config
```
-Alternatively you can use the `defineConfig` helper which should provide intellisense without the need for jsdoc annotations:
+Alternatively, you can use the `defineConfig` helper which should provide intellisense without the need for jsdoc annotations:
```js
import { defineConfig } from 'vite'
@@ -88,7 +88,7 @@ export default async ({ command, mode }) => {
- **Type:** `string`
- **Default:** `process.cwd()`
-  Project root directory (where `index.html` is located). Can be an absolute path, or a path relative from the location of the config file itself.
+  Project root directory (where `index.html` is located). Can be an absolute path, or a path relative to the location of the config file itself.
See [Project Root](/guide/#index-html-and-project-root) for more details.
@@ -124,7 +124,7 @@ export default async ({ command, mode }) => {
- Replacements are performed only when the match is surrounded by word boundaries (`\b`).
-  Because it's implemented as straightforward text replacements without any syntax analyzation, we recommend using `define` for CONSTANTS only.
+  Because it's implemented as straightforward text replacements without any syntax analysis, we recommend using `define` for CONSTANTS only.
For example, `process.env.FOO` and `__APP_VERSION__` are good fits. But `process` or `global` should not be put into this option. Variables can be shimmed or polyfilled instead.
@@ -136,11 +136,13 @@ export default async ({ command, mode }) => {
### publicDir
-- **Type:** `string`
+- **Type:** `string | false`
- **Default:** `"public"`
Directory to serve as plain static assets. Files in this directory are served at `/` during dev and copied to the root of `outDir` during build, and are always served or copied as-is without transform. The value can be either an absolute file system path or a path relative to project root.
+  Defining `publicDir` as `false` disables this feature.
+
See [The `public` Directory](/guide/assets#the-public-directory) for more details.
### cacheDir
@@ -148,7 +150,7 @@ export default async ({ command, mode }) => {
- **Type:** `string`
- **Default:** `"node_modules/.vite"`
-  Directory to save cache files. Files in this directory are pre-bundled deps or some other cache files that generated by vite, which can improve the performance. You can use `--force` flag or manually delete the directory to regenerate the cache files. The value can be either an absolute file system path or a path relative to project root.
+  Directory to save cache files. Files in this directory are pre-bundled deps or some other cache files generated by vite, which can improve the performance. You can use `--force` flag or manually delete the directory to regenerate the cache files. The value can be either an absolute file system path or a path relative to project root.
### resolve.alias
@@ -282,7 +284,7 @@ export default async ({ command, mode }) => {
}
```
-  By default, ESBuild is applied to `ts`, `jsx` and `tsx` files. You can customize this with `esbuild.include` and `esbuild.exclude`, both of which expects type of `string | RegExp | (string | RegExp)[]`.
+  By default, ESBuild is applied to `ts`, `jsx` and `tsx` files. You can customize this with `esbuild.include` and `esbuild.exclude`, both of which expect type of `string | RegExp | (string | RegExp)[]`.
In addition, you can also use `esbuild.jsxInject` to automatically inject JSX helper imports for every file transformed by ESBuild:
@@ -632,14 +634,14 @@ createServer()
- **Default:** `false`
- **Related:** [Backend Integration](/guide/backend-integration)
-  When set to `true`, the build will also generate a `manifest.json` file that contains mapping of non-hashed asset filenames to their hashed versions, which can then be used by a server framework to render the correct asset links.
+  When set to `true`, the build will also generate a `manifest.json` file that contains a mapping of non-hashed asset filenames to their hashed versions, which can then be used by a server framework to render the correct asset links.
### build.minify
- **Type:** `boolean | 'terser' | 'esbuild'`
- **Default:** `'terser'`
-  Set to `false` to disable minification, or specify the minifier to use. The default is [Terser](https://github.com/terser/terser) which is slower but produces smaller bundles in most cases. Esbuild minification is significantly faster, but will result in slightly larger bundles.
+  Set to `false` to disable minification, or specify the minifier to use. The default is [Terser](https://github.com/terser/terser) which is slower but produces smaller bundles in most cases. Esbuild minification is significantly faster but will result in slightly larger bundles.
### build.terserOptions

+++ b/docs/config/index.md
@@ -415,7 +415,7 @@ export default defineConfig(async ({ command, mode }) => {
changeOrigin: true,
configure: (proxy, options) => {
// proxy will be an instance of 'http-proxy'
-          }),
+          },
}
}
}

+++ b/docs/config/index.md
@@ -530,7 +530,7 @@ createServer()
### build.target
-- **Type:** `string`
+- **Type:** `string | string[]`
- **Default:** `'modules'`
- **Related:** [Browser Compatibility](/guide/build#browser-compatibility)
@@ -647,12 +647,6 @@ createServer()
Additional [minify options](https://terser.org/docs/api-reference#minify-options) to pass on to Terser.
-### build.cleanCssOptions
-
-- **Type:** `CleanCSS.Options`
-
-  Constructor options to pass on to [clean-css](https://github.com/jakubpawlowicz/clean-css#constructor-options).
-
### build.write
- **Type:** `boolean`

+++ b/docs/guide/backend-integration.md
@@ -22,7 +22,7 @@ If you need a custom integration, you can follow the steps in this guide to conf
})
```
-   If you haven't disabled the [module preload polyfill](/config/#polyfillmodulepreload), you also need to import the polyfill in your entry
+   If you haven't disabled the [module preload polyfill](/config/#build-polyfillmodulepreload), you also need to import the polyfill in your entry
```js
// add the beginning of your app entry

+++ b/docs/config/index.md
@@ -487,7 +487,7 @@ const { createServer: createViteServer } = require('vite')
async function createServer() {
const app = express()
-  // Create vite server in middleware mode.
+  // Create Vite server in middleware mode.
const vite = await createViteServer({
server: { middlewareMode: 'ssr' }
})
@@ -704,7 +704,7 @@ createServer()
By default, Vite will crawl your index.html to detect dependencies that need to be pre-bundled. If build.rollupOptions.input is specified, Vite will crawl those entry points instead.
-  If neither of these fit your needs, you can specify custom entries using this option - the value should be a [fast-glob pattern](https://github.com/mrmlnc/fast-glob#basic-syntax) or array of patterns that are relative from vite project root. This will overwrite default entries inference.
+  If neither of these fit your needs, you can specify custom entries using this option - the value should be a [fast-glob pattern](https://github.com/mrmlnc/fast-glob#basic-syntax) or array of patterns that are relative from Vite project root. This will overwrite default entries inference.
### optimizeDeps.exclude

+++ b/docs/.vitepress/theme/sponsors.json
@@ -16,5 +16,11 @@
"name": "Mux",
"href": "https://mux.com",
"src": "/mux.svg"
+  },
+  {
+    "id": "plaid",
+    "name": "Plaid Inc.",
+    "href": "https://plaid.co.jp/",
+    "src": "/plaid.svg"
}
]

+++ b/docs/guide/api-javascript.md
@@ -87,16 +87,6 @@ interface ViteDevServer {
* Apply Vite built-in HTML transforms and any plugin HTML transforms.
*/
transformIndexHtml(url: string, html: string): Promise<string>
-  /**
-   * Util for transforming a file with esbuild.
-   * Can be useful for certain plugins.
-   */
-  transformWithEsbuild(
-    code: string,
-    filename: string,
-    options?: EsbuildTransformOptions,
-    inMap?: object
-  ): Promise<ESBuildTransformResult>
/**
* Load a given URL as an instantiated module for SSR.
*/
@@ -159,3 +149,16 @@ async function resolveConfig(
defaultMode?: string
): Promise<ResolvedConfig>
```
+
+## `transformWithEsbuild`
+
+**Type Signature:**
+
+```ts
+async function transformWithEsbuild(
+  code: string,
+  filename: string,
+  options?: EsbuildTransformOptions,
+  inMap?: object
+): Promise<ESBuildTransformResult>
+```

+++ b/docs/config/index.md
@@ -333,6 +333,18 @@ export default defineConfig(async ({ command, mode }) => {
See [here](/guide/env-and-mode#env-files) for more about environment files.
+### envPrefix
+
+- **Type:** `string | string[]`
+- **Default:** `VITE_`
+
+  Env variables starts with `envPrefix` will be exposed to your client source code via import.meta.env.
+
+:::warning SECURITY NOTES
+
+- `envPrefix` should not be set as `''`, which will expose all your env variables and cause unexpected leaking of of sensitive information. Vite will throw error when detecting `''`.
+  :::
+
## Server Options
### server.host

+++ b/docs/config/index.md
@@ -206,6 +206,16 @@ export default defineConfig(async ({ command, mode }) => {
List of file extensions to try for imports that omit extensions. Note it is **NOT** recommended to omit extensions for custom import types (e.g. `.vue`) since it can interfere with IDE and type support.
+### resolve.preserveSymlinks
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+  Enabling this setting causes vite to determine file identity by the original file path (i.e. the path without following symlinks) instead of the real file path (i.e. the path after following symlinks).
+
+- **Related:** [esbuild#preserve-symlinks](https://esbuild.github.io/api/#preserve-symlinks), [webpack#resolve.symlinks
+  ](https://webpack.js.org/configuration/resolve/#resolvesymlinks)
+
### css.modules
- **Type:**

+++ b/docs/guide/static-deploy.md
@@ -188,9 +188,9 @@ You can also run the above script in your CI setup to enable automatic deploymen
```js
{
-    "projects": {
-      "default": "<YOUR_FIREBASE_ID>"
-    }
+     "projects": {
+       "default": "<YOUR_FIREBASE_ID>"
+     }
}
```

+++ b/docs/guide/api-javascript.md
@@ -4,13 +4,13 @@ Vite's JavaScript APIs are fully typed, and it's recommended to use TypeScript o
## `createServer`
-**Type Signature**
+**Type Signature:**
```ts
async function createServer(inlineConfig?: InlineConfig): Promise<ViteDevServer>
```
-**Example Usage**
+**Example Usage:**
```js
const { createServer } = require('vite')
@@ -121,7 +121,7 @@ interface ViteDevServer {
## `build`
-**Type Signature**
+**Type Signature:**
```ts
async function build(
@@ -129,7 +129,7 @@ async function build(
): Promise<RollupOutput | RollupOutput[]>
```
-**Example Usage**
+**Example Usage:**
```js
const path = require('path')
@@ -150,7 +150,7 @@ const { build } = require('vite')
## `resolveConfig`
-**Type Signature**
+**Type Signature:**
```ts
async function resolveConfig(

+++ b/docs/guide/index.md
@@ -37,7 +37,7 @@ $ yarn create vite
With PNPM:
```bash
-$ pnpx create-vite
+$ pnpm dlx create-vite
```
Then follow the prompts!

+++ b/docs/guide/api-plugin.md
@@ -34,9 +34,9 @@ Users will add plugins to the project `devDependencies` and configure them using
import vitePlugin from 'vite-plugin-feature'
import rollupPlugin from 'rollup-plugin-feature'
-export default {
+export default defineConfig({
plugins: [vitePlugin(), rollupPlugin()]
-}
+})
```
Falsy plugins will be ignored, which can be used to easily activate or deactivate plugins.
@@ -55,11 +55,12 @@ export default function framework(config) {
```js
// vite.config.js
+import { defineConfig } from 'vite'
import framework from 'vite-plugin-framework'
-export default {
+export default defineConfig({
plugins: [framework()]
-}
+})
```
## Simple Examples
@@ -429,8 +430,9 @@ You can also augment an existing Rollup plugin with Vite-only properties:
```js
// vite.config.js
import example from 'rollup-plugin-example'
+import { defineConfig } from 'vite'
-export default {
+export default defineConfig({
plugins: [
{
...example(),
@@ -438,7 +440,7 @@ export default {
apply: 'build'
}
]
-}
+})
```
Check out [Vite Rollup Plugins](https://vite-rollup-plugins.patak.dev) for a list of compatible official Rollup plugins with usage instructions.

+++ b/docs/guide/env-and-mode.md
@@ -24,7 +24,7 @@ It will also replace these strings appearing in JavaScript strings and Vue templ
## `.env` Files
-Vite uses [dotenv](https://github.com/motdotla/dotenv) to load additional environment variables from the following files in your [environment directory](/config/#envDir):
+Vite uses [dotenv](https://github.com/motdotla/dotenv) to load additional environment variables from the following files in your [environment directory](/config/#envdir):
```
.env                # loaded in all cases

+++ b/docs/plugins/index.md
@@ -14,9 +14,9 @@ Vite aims to provide out-of-the-box support for common web development patterns.
- Provides Vue 3 JSX support (via [dedicated Babel transform](https://github.com/vuejs/jsx-next)).
-### [@vitejs/plugin-react-refresh](https://github.com/vitejs/vite/tree/main/packages/plugin-react-refresh)
+### [@vitejs/plugin-react](https://github.com/vitejs/vite/tree/main/packages/plugin-react)
-- Provides React Fast Refresh Support.
+- Provides all-in-one React Support.
### [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy)

+++ b/docs/guide/features.md
@@ -24,7 +24,7 @@ Vite caches dependency requests via HTTP headers, so if you wish to locally edit
Vite provides an [HMR API](./api-hmr) over native ESM. Frameworks with HMR capabilities can leverage the API to provide instant, precise updates without reloading the page or blowing away application state. Vite provides first-party HMR integrations for [Vue Single File Components](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) and [React Fast Refresh](https://github.com/vitejs/vite/tree/main/packages/plugin-react-refresh). There are also official integrations for Preact via [@prefresh/vite](https://github.com/JoviDeCroock/prefresh/tree/main/packages/vite).
-Note you don't need to manually set these up - when you [create an app via `@vitejs/create-app`](./), the selected templates would have these pre-configured for you already.
+Note you don't need to manually set these up - when you [create an app via `create-vite`](./), the selected templates would have these pre-configured for you already.
## TypeScript

+++ b/docs/guide/ssr.md
@@ -251,3 +251,10 @@ export function mySSRPlugin() {
## SSR Target
The default target for the SSR build is a node environment, but you can also run the server in a Web Worker. Packages entry resolution is different for each platform. You can configure the target to be Web Worker using the `ssr.target` set to `'webworker'`.
+
+## SSR Bundle
+
+In some cases like `webworker` runtimes, you might want to bundle your SSR build into a single JavaScript file. You can enable this behavior by setting `ssr.noExternal` to `true`. This will do two things:
+
+- Treat all dependencies as `noExternal`
+- Throw an error if any Node.js built-ins are imported

+++ b/docs/guide/api-plugin.md
@@ -414,6 +414,15 @@ function myPlugin() {
}
```
+A function can also be used for more precise control:
+
+```js
+apply(config, { command }) {
+  // apply only on build but not for SSR
+  return command === 'build' && !config.build.ssr
+}
+```
+
## Rollup Plugin Compatibility
A fair number of Rollup plugins will work directly as a Vite plugin (e.g. `@rollup/plugin-alias` or `@rollup/plugin-json`), but not all of them, since some plugin hooks do not make sense in an unbundled dev server context.