You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
想知道 Vite 有多快？看看这个[视频比较](https://twitter.com/amasad/status/1355379680275128321)， 在 Repl.it 上从零启动一个基于 Vite 的 React 应用，浏览器页面加载完毕的时候，基于 CRA（`create-react-app`）的应用甚至还没有安装完依赖。
35
35
36
+
<<<<<<< HEAD
36
37
如果你还没听说过 Vite 到底是什么，可以到 [这里](/guide/why) 了解一下项目的设计初衷。如果你想要了解 Vite 跟其它一些类似的工具有什么区别，可以参考这里的 [对比](/guide/comparisons)。
38
+
=======
39
+
If you've never heard of Vite before and would love to learn more about it, check out [the rationale behind the project](https://vite.dev/guide/why.html). If you are interested in how Vite differs from other similar tools, check out the [comparisons](https://v5.vite.dev/guide/comparisons.html).
The default value will be `true` if the TypeScript target is `ES2022` or newer including `ESNext`. It is consistent with the [behavior of TypeScript 4.3.2+](https://github.com/microsoft/TypeScript/pull/42663).
89
+
Other TypeScript targets will default to `false`.
90
+
91
+
`true` is the standard ECMAScript runtime behavior.
92
+
93
+
If you are using a library that heavily relies on class fields, please be careful about the library's intended usage of it.
94
+
While most libraries expect `"useDefineForClassFields": true`, you can explicitly set `useDefineForClassFields` to `false` if your library doesn't support it.
95
+
>>>>>>> ebd74c77072778dd0436838f2b46ccda4e5fed79
86
96
87
97
#### `target` {#target}
88
98
@@ -124,21 +134,39 @@ Vite 默认的类型定义是写给它的 Node.js API 的。要将其补充到
Alternatively, you can add `vite/client` to `compilerOptions.types` inside `tsconfig.json`:
143
+
>>>>>>> ebd74c77072778dd0436838f2b46ccda4e5fed79
128
144
129
145
```json [tsconfig.json]
130
146
{
131
147
"compilerOptions": {
132
-
"types": ["vite/client"]
148
+
"types": ["vite/client", "some-other-global-lib"]
133
149
}
134
150
}
135
151
```
136
152
153
+
<<<<<<< HEAD
137
154
这将会提供以下类型定义补充：
138
155
139
156
- 资源导入 (例如：导入一个 `.svg` 文件)
140
157
-`import.meta.env` 上 Vite 注入的 [常量变量](./env-and-mode#env-variables) 的类型定义
141
158
-`import.meta.hot` 上的 [HMR API](./api-hmr) 类型定义
159
+
=======
160
+
Note that if [`compilerOptions.types`](https://www.typescriptlang.org/tsconfig#types) is specified, only these packages will be included in the global scope (instead of all visible ”@types” packages).
161
+
162
+
:::
163
+
164
+
`vite/client` provides the following type shims:
165
+
166
+
- Asset imports (e.g. importing an `.svg` file)
167
+
- Types for the Vite-injected [constants](./env-and-mode#env-variables) on `import.meta.env`
168
+
- Types for the [HMR API](./api-hmr) on `import.meta.hot`
All modern frameworks maintain integrations with Vite. Most framework plugins are maintained by each framework team, with the exception of the official Vue and React Vite plugins that are maintained in the vite org:
248
+
249
+
- Vue support via [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue)
250
+
- Vue JSX support via [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx)
251
+
- React support via [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react)
252
+
- React using SWC support via [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc)
253
+
254
+
Check out the [Plugins Guide](https://vite.dev/plugins) for more information.
Your framework of choice will already configure JSX out of the box (for example, Vue users should use the official [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx) plugin, which provides Vue 3 specific features including HMR, global component resolving, directives and slots).
267
+
268
+
If using JSX with your own framework, custom `jsxFactory` and `jsxFragment` can be configured using the [`esbuild` option](/config/shared-options.md#esbuild). For example, the Preact plugin would use:
If you can't wait for a new release to test the latest features, you can install a specific commit of Vite with https://pkg.pr.new:
209
+
210
+
::: code-group
211
+
212
+
```bash [npm]
213
+
$ npm install -D https://pkg.pr.new/vite@SHA
214
+
```
215
+
216
+
```bash [Yarn]
217
+
$ yarn add -D https://pkg.pr.new/vite@SHA
218
+
```
219
+
220
+
```bash [pnpm]
221
+
$ pnpm add -D https://pkg.pr.new/vite@SHA
222
+
```
223
+
224
+
```bash [Bun]
225
+
$ bun add -D https://pkg.pr.new/vite@SHA
226
+
```
227
+
228
+
:::
229
+
230
+
Replace `SHA` with any of [Vite's commit SHAs](https://github.com/vitejs/vite/commits/main/). Note that only commits within the last month will work, as older commit releases are purged.
231
+
232
+
Alternatively, you can also clone the [vite repo](https://github.com/vitejs/vite) to your local machine and then build and link it yourself ([pnpm](https://pnpm.io/) is required):
233
+
>>>>>>> ebd74c77072778dd0436838f2b46ccda4e5fed79
206
234
207
235
```bash
208
236
git clone https://github.com/vitejs/vite.git
@@ -215,6 +243,14 @@ pnpm link --global # 在这一步中可使用你喜欢的包管理器
215
243
216
244
然后，回到你的 Vite 项目并运行 `pnpm link --global vite`（或者使用你的其他包管理工具来全局链接 `vite`）。重新启动开发服务器来体验新功能吧！
217
245
246
+
<<<<<<< HEAD
218
247
## 社区 {#community}
248
+
=======
249
+
::: tip Dependencies using Vite
250
+
To replace the Vite version used by dependencies transitively, you should use [npm overrides](https://docs.npmjs.com/cli/v11/configuring-npm/package-json#overrides) or [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides).
你可以查看 [比较](./comparisons.md) 章节获取更多细节，了解 Vite 与同类工具的异同。
64
+
=======
65
+
## How Vite Relates to Other Unbundled Build Tools?
66
+
67
+
[WMR](https://github.com/preactjs/wmr) by the Preact team looked to provide a similar feature set. Vite's universal Rollup plugin API for dev and build was inspired by it. WMR is no longer maintained. The Preact team now recommends Vite with [@preactjs/preset-vite](https://github.com/preactjs/preset-vite).
68
+
69
+
[Snowpack](https://www.snowpack.dev/) was also a no-bundle native ESM dev server, very similar in scope to Vite. Vite's dependency pre-bundling is also inspired by Snowpack v1 (now [`esinstall`](https://github.com/snowpackjs/snowpack/tree/main/esinstall)). Snowpack is no longer being maintained. The Snowpack team is now working on [Astro](https://astro.build/), a static site builder powered by Vite.
70
+
71
+
[@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) (previously `es-dev-server`) is a great project and Vite 1.0's Koa-based server setup was inspired by it. The `@web` umbrella project is actively maintained and contains many other excellent tools that may benefit Vite users as well.
0 commit comments