Skip to content

Commit

Permalink
release v2.9.4: Merge pull request #435 from vitejs/dev
Browse files Browse the repository at this point in the history
  • Loading branch information
ShenQingchuan authored Apr 14, 2022
2 parents 48e4705 + 47ae871 commit a716774
Show file tree
Hide file tree
Showing 8 changed files with 20 additions and 14 deletions.
2 changes: 1 addition & 1 deletion blog/announcing-vite2.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Vite 的 [程序化 API](/guide/api-javascript) 也得到了大幅改进 - 已

### 基于 esbuild 的依赖预打包 {#esbuild-powered-dep-pre-bundling}

由于 Vite 是一个基于 原生 ESM 开发服务器,所以它需要进行依赖预打包以减少浏览器请求的数量,并进行 CommonJS 到 ESM 的转换。在之前版本中 Vite 是用 Rollup 来完成的,而在 2.0 中切换到了 esbuild,这使得依赖预打包的速度快了几十倍。作为参考,在 M1 芯片的 Macbook Pro 上,冷启动一个具有大量依赖项(如 React Meterial UI)的测试应用,之前需要 28 秒,而现在只需要约 1.5 秒。从 webpack 或其它打包工具迁移到 Vite 应该也会有类似的速度改善。
由于 Vite 是一个基于 原生 ESM 开发服务器,所以它需要进行依赖预打包以减少浏览器请求的数量,并进行 CommonJS 到 ESM 的转换。在之前版本中 Vite 是用 Rollup 来完成的,而在 2.0 中切换到了 esbuild,这使得依赖预打包的速度快了几十倍。作为参考,在 M1 芯片的 MacBook Pro 上,冷启动一个具有大量依赖项(如 React Meterial UI)的测试应用,之前需要 28 秒,而现在只需要约 1.5 秒。从 webpack 或其它打包工具迁移到 Vite 应该也会有类似的速度改善。

### 更好的 CSS 支持 {#first-class-css-support}

Expand Down
8 changes: 4 additions & 4 deletions config/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -351,7 +351,7 @@ export default defineConfig(({ command, mode }) => {

- **类型:** `ESBuildOptions | false`

`ESBuildOptions` 继承自 [ESbuild 转换选项](https://esbuild.github.io/api/#transform-api)。最常见的用例是自定义 JSX:
`ESBuildOptions` 继承自 [esbuild 转换选项](https://esbuild.github.io/api/#transform-api)。最常见的用例是自定义 JSX:

```js
export default defineConfig({
Expand All @@ -362,9 +362,9 @@ export default defineConfig(({ command, mode }) => {
})
```

默认情况下,ESbuild 会被应用在 `ts``jsx``tsx` 文件。你可以通过 `esbuild.include``esbuild.exclude` 对要处理的文件类型进行配置,这两个配置的值可以是一个正则表达式、一个 [picomatch](https://github.com/micromatch/picomatch#globbing-features) 模式,或是一个值为这两种类型的数组。
默认情况下,e s build 会被应用在 `ts``jsx``tsx` 文件。你可以通过 `esbuild.include``esbuild.exclude` 对要处理的文件类型进行配置,这两个配置的值可以是一个正则表达式、一个 [picomatch](https://github.com/micromatch/picomatch#globbing-features) 模式,或是一个值为这两种类型的数组。

此外,你还可以通过 `esbuild.jsxInject` 来自动为每一个被 ESbuild 转换的文件注入 JSX helper
此外,你还可以通过 `esbuild.jsxInject` 来自动为每一个被 esbuild 转换的文件注入 JSX helper

```js
export default defineConfig({
Expand All @@ -374,7 +374,7 @@ export default defineConfig(({ command, mode }) => {
})
```

设置为 `false` 来禁用 ESbuild 转换。
设置为 `false` 来禁用 esbuild 转换。

### assetsInclude {#assetsinclude}

Expand Down
2 changes: 1 addition & 1 deletion guide/api-javascript.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# JavaScript API {#javascript-api}

Vite 的 JavaScript API 是完全类型化的,我们推荐使用 TypeScript 或者在 VSCode 中启用 JS 类型检查来利用智能提示和类型校验。
Vite 的 JavaScript API 是完全类型化的,我们推荐使用 TypeScript 或者在 VS Code 中启用 JS 类型检查来利用智能提示和类型校验。

## `createServer` {#createserver}

Expand Down
12 changes: 7 additions & 5 deletions guide/api-plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export default function myPlugin() {

```js
export default function myPlugin() {
const virtualModuleId = '@my-virtual-module'
const virtualModuleId = 'virtual:my-module'
const resolvedVirtualModuleId = '\0' + virtualModuleId

return {
Expand All @@ -135,7 +135,7 @@ export default function myPlugin() {
这使得可以在 JavaScript 中引入这些模块:

```js
import { msg } from '@my-virtual-module'
import { msg } from 'virtual:my-module'

console.log(msg)
```
Expand Down Expand Up @@ -186,8 +186,10 @@ Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子
const partialConfigPlugin = () => ({
name: 'return-partial',
config: () => ({
alias: {
foo: 'bar'
resolve: {
alias: {
foo: 'bar'
}
}
})
})
Expand Down Expand Up @@ -499,7 +501,7 @@ Since Vite 2.9, we provide some utilities for plugins to help handle the communi

### Server to Client

On the plugin side, we could use `server.ws.send` to boardcast events to all the clients:
On the plugin side, we could use `server.ws.send` to broadcast events to all the clients:

```js
// vite.config.js
Expand Down
4 changes: 4 additions & 0 deletions guide/assets.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,7 @@ const imgUrl = new URL(imagePath, import.meta.url).href
::: warning 注意:无法在 SSR 中使用
如果你正在以服务端渲染模式使用 Vite 则此模式不支持,因为 `import.meta.url` 在浏览器和 Node.js 中有不同的语义。服务端的产物也无法预先确定客户端主机 URL。
:::
::: warning Esbuild target config is necessary
This pattern needs esbuild target to be set to `es2020` or higher. `[email protected]` use `es2019` as default target. Set [build-target](https://vitejs.dev/config/#build-target) and [optimizedeps.esbuildoptions.target](https://vitejs.dev/config/#optimizedeps-esbuildoptions) to `es2020` or higher if you intend to use this partten.
:::
2 changes: 1 addition & 1 deletion guide/env-and-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Vite 使用 [dotenv](https://github.com/motdotla/dotenv) 从你的 [环境目录
`.env` 类文件会在 Vite 启动一开始时被加载,而改动会在重启服务器后生效。
:::

加载的环境变量也会通过 `import.meta.env` 暴露给客户端源码
加载的环境变量也会通过 `import.meta.env` 以字符串形式暴露给客户端源码

为了防止意外地将一些环境变量泄漏到客户端,只有以 `VITE_` 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这个文件中:

Expand Down
2 changes: 1 addition & 1 deletion guide/static-deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ Vercel CLI

### Vercel for Git {#vercel-for-git}

1. 将你代码推送到你的 git 仓库(GitHub、GitLab 或 BitBucket 等等)
1. 将你代码推送到你的 git 仓库(GitHub、GitLab 或 Bitbucket 等等)
2. [导入你的 Vite 项目](https://vercel.com/new) 到 Vercel。
3. Vercel 会检测到你正在使用 Vite,并会为你的开发开启相应的正确设置。
4. 然后你的应用就被正常部署了!(示例 [vite-vue-template.vercel.app](https://vite-vue-template.vercel.app/)
Expand Down
2 changes: 1 addition & 1 deletion guide/why.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Vite 通过在一开始将应用中的模块区分为 **依赖** 和 **源码**

- **依赖** 大多为在开发时不会变动的纯 JavaScript。一些较大的依赖(例如有上百个模块的组件库)处理的代价也很高。依赖也通常会存在多种模块化格式(例如 ESM 或者 CommonJS)。

Vite 将会使用 [esbuild](https://esbuild.github.io/) [预构建依赖](./dep-pre-bundling)Esbuild 使用 Go 编写,并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
Vite 将会使用 [esbuild](https://esbuild.github.io/) [预构建依赖](./dep-pre-bundling)esbuild 使用 Go 编写,并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

- **源码** 通常包含一些并非直接是 JavaScript 的文件,需要转换(例如 JSX,CSS 或者 Vue/Svelte 组件),时常会被编辑。同时,并不是所有的源码都需要同时被加载(例如基于路由拆分的代码模块)。

Expand Down

0 comments on commit a716774

Please sign in to comment.