release: v3.0.2 Merge pull request #556 from vitejs/dev

Author: ShenQingchuan

.vitepress/theme/components/AsideSponsors.vue

@@ -18,5 +18,71 @@ const sponsors = computed(() => {
 </script>
 
 <template>
+  <a class="viteconf" href="https://viteconf.org" target="_blank">
+    <img width="22" height="22" src="/viteconf.svg" />
+    <span>
+      <p class="extra-info">Free Online Conference</p>
+      <p class="heading">ViteConf - Oct 11</p>
+      <p class="extra-info">Get your ticket now!</p>
+    </span>
+  </a>
   <VPDocAsideSponsors v-if="data" :data="sponsors" />
 </template>
+
+<style>
+.viteconf {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 14px;
+  padding-left: 2.5rem;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.1rem;
+  filter: grayscale(100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  background-color: var(--vp-c-bg-alt);
+  border: 2px solid var(--vp-c-bg-alt);
+  transition: border-color 0.5s;
+}
+.viteconf:hover {
+  filter: grayscale(0%);
+  border: 2px solid var(--vp-c-brand-light);
+}
+.viteconf img {
+  position: absolute;
+  left: 1.5rem;
+  transition: transform 0.5s;
+}
+.viteconf:hover img {
+  transform: scale(1.75);
+}
+
+.viteconf:hover .heading {
+  background-image: linear-gradient(
+    120deg,
+    #bd34fe 16%,
+    var(--vp-c-brand-light),
+    var(--vp-c-brand-light)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.viteconf .extra-info {
+  color: var(--vp-c-text-1);
+  opacity: 0;
+  font-size: 0.7rem;
+  padding-left: 0.1rem;
+  transition: opacity 0.5s;
+}
+.viteconf:hover .extra-info {
+  opacity: 0.9;
+}
+</style>

.vitepress/theme/components/SvgImage.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ svg: string }>()
+</script>
+
+<template>
+  <figure class="svg-image-root" v-html="svg" />
+</template>
+
+<style>
+.svg-image-root {
+  background-color: #eee;
+  border-radius: 8px;
+  padding: 1ch;
+  margin: 1ch 0;
+}
+html.dark .svg-image-root {
+  background-color: #313641;
+}
+.svg-image-root svg text {
+  font-family: var(--vp-font-family-base);
+}
+</style>

.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import Theme from 'vitepress/theme'
 import './styles/vars.css'
 import HomeSponsors from './components/HomeSponsors.vue'
 import AsideSponsors from './components/AsideSponsors.vue'
+import SvgImage from './components/SvgImage.vue'
 
 export default {
   ...Theme,
@@ -11,5 +12,8 @@ export default {
       'home-features-after': () => h(HomeSponsors),
       'aside-ads-before': () => h(AsideSponsors)
     })
+  },
+  enhanceApp({ app }) {
+    app.component('SvgImage', SvgImage)
   }
 }

blog/announcing-vite3.md

@@ -193,7 +193,7 @@ There are other deploy scenarios where this isn't enough. For example, if the ge
 
 ### Esbuild Deps Optimization at Build Time (Experimental)
 
-One of the main differences between dev and build time is how Vite handles dependencies. During build time, [`@rollupjs/plugin-commonjs`](https://github.com/rollup/plugins/tree/master/packages/commonjs) is used to allow importing CJS only dependencies (like React). When using the dev server, esbuild is used instead to pre-bundle and optimize dependencies, and an inline interop scheme is applied while transforming user code importing CJS deps. During the development of Vite 3, we introduced the changes needed to also allow the use of [esbuild to optimize dependencies during build time](/guide/migration.html#using-esbuild-deps-optimization-at-build-time). [`@rollupjs/plugin-commonjs`](https://github.com/rollup/plugins/tree/master/packages/commonjs) can then be avoided, making dev and build time work in the same way.
+One of the main differences between dev and build time is how Vite handles dependencies. During build time, [`@rollup/plugin-commonjs`](https://github.com/rollup/plugins/tree/master/packages/commonjs) is used to allow importing CJS only dependencies (like React). When using the dev server, esbuild is used instead to pre-bundle and optimize dependencies, and an inline interop scheme is applied while transforming user code importing CJS deps. During the development of Vite 3, we introduced the changes needed to also allow the use of [esbuild to optimize dependencies during build time](/guide/migration.html#using-esbuild-deps-optimization-at-build-time). [`@rollup/plugin-commonjs`](https://github.com/rollup/plugins/tree/master/packages/commonjs) can then be avoided, making dev and build time work in the same way.
 
 Given that Rollup v3 will be out in the next months, and we're going to follow up with another Vite major, we've decided to make this mode optional to reduce v3 scope and give Vite and the ecosystem more time to work out possible issues with the new CJS interop approach during build time. Frameworks may switch to using esbuild deps optimization during build time by default at their own pace before Vite 4.
 
@@ -223,7 +223,7 @@ A triaging marathon was spearheaded by [@bluwyoo](https://twitter.com/bluwyoo),
 
 ## Compatibility Notes
 
-- Vite no longer supports Node.js 12, which reached its EOL. Node.js 14.18+ is now required.
+- Vite no longer supports Node.js 12 / 13 / 15, which reached its EOL. Node.js 14.18+ / 16+ is now required.
 - Vite is now published as ESM, with a CJS proxy to the ESM entry for compatibility.
 - The Modern Browser Baseline now targets browsers which support the [native ES Modules](https://caniuse.com/es6-module), [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import), and [`import.meta`](https://caniuse.com/mdn-javascript_statements_import_meta) features.
 - JS file extensions in SSR and library mode now use a valid extension (`js`, `mjs`, or `cjs`) for output JS entries and chunks based on their format and the package type.

config/build-options.md

@@ -6,7 +6,7 @@
 - **默认：** `'modules'`
 - **相关内容：** [浏览器兼容性](/guide/build#browser-compatibility)
 
-设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——`'modules'`，这是指 [支持原生 ES 模块的浏览器](https://caniuse.com/es6-module)。
+设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——`'modules'`，这是指 [支持原生 ES 模块](https://caniuse.com/es6-module)、[原生 ESM 动态导入](https://caniuse.com/es6-module-dynamic-import) 和 [`import.meta`](https://caniuse.com/mdn-javascript_statements_import_meta) 的浏览器。
 
 另一个特殊值是 “esnext” —— 即假设有原生动态导入支持，并且将会转译得尽可能小：
 

config/index.md

@@ -21,19 +21,6 @@ export default {
 vite --config my-config.js
 ```
 
-::: tip 注意
-注意，Vite 会在 **CommonJS** 和 **TypeScript** 配置文件中替换 `__filename`，`__dirname` 以及 `import.meta.url`。如果使用这些名称作为变量名可能会导致代码报错：
-
-```js
-const __filename = 'value' // SyntaxError: Identifier '__filename' has already been declared
-
-const func = () => {
-  const __filename = 'value' // no error
-}
-```
-
-:::
-
 ## 配置智能提示 {#config-intellisense}
 
 因为 Vite 本身附带 Typescript 类型，所以你可以通过 IDE 和 jsdoc 的配合来实现智能提示：

guide/backend-integration.md

@@ -33,7 +33,8 @@
 
    ```html
    <!-- 如果是在开发环境中 -->
-   <script type="module" src="http://localhost:3000/@vite/client"></script>
+   <script type="module" src="http://localhost:5173/@vite/client"></script>
+   <script type="module" src="http://localhost:5173/main.js"></script>
    ```
 
    为了正确地提供资源，你有两种选项：

guide/build.md

@@ -4,7 +4,7 @@
 
 ## 浏览器兼容性 {#browser-compatibility}
 
-用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下，Vite 的目标浏览器是指能够 [支持原生 ESM script 标签](https://caniuse.com/es6-module) 和 [支持原生 ESM 动态导入](https://caniuse.com/es6-module-dynamic-import) 的。作为参考，Vite 使用这个 [browserslist](https://github.com/browserslist/browserslist) 作为查询标准：
+用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下，Vite 的目标是能够 [支持原生 ESM script 标签](https://caniuse.com/es6-module)、[支持原生 ESM 动态导入](https://caniuse.com/es6-module-dynamic-import) 和 [`import.meta`](https://caniuse.com/mdn-javascript_statements_import_meta) 的浏览器：
 
 - Chrome >=87
 - Firefox >=78
@@ -187,6 +187,10 @@ dist/my-lib.umd.cjs 0.30 KiB / gzip: 0.16 KiB
 如果 `package.json` 不包含 `"type": "module"`，Vite 会生成不同的文件后缀名以兼容 Node.js。`.js` 会变为 `.mjs` 而 `.cjs` 会变为 `.js`.
 :::
 
+::: tip 环境变量
+在库模式下，所有 `import.meta.env.*` 用法在构建生产时都会被静态替换。但是，`process.env.*` 的用法不会被替换，所以你的库的使用者可以动态地更改它。如果不想允许他们这样做，你可以使用 `define: { 'process.env.`<wbr>`NODE_ENV': '"production"' }` 例如静态替换它们。
+:::
+
 ## 进阶基础路径选项 {#advanced-base-options}
 
 ::: warning

guide/env-and-mode.md

@@ -59,7 +59,7 @@ DB_PASSWORD=foobar
 console.log(import.meta.env.VITE_SOME_KEY) // 123
 console.log(import.meta.env.DB_PASSWORD) // undefined
 ```
-如果你想自定义 env 变量的前缀，请参阅 [envPrefix](/config/index#envprefix)。
+如果你想自定义 env 变量的前缀，请参阅 [envPrefix](/config/shared-options.html#envprefix)。
 
 :::warning 安全注意事项
 

guide/features.md

@@ -538,7 +538,10 @@ Vite 会为入口 chunk 和它们在打包出的 HTML 中的直接引入自动
 
 在实际项目中，Rollup 通常会生成 “共用” chunk —— 被两个或以上的其他 chunk 共享的 chunk。与动态导入相结合，会很容易出现下面这种场景：
 
-![graph](/images/graph.png)
+<script setup>
+import graphSvg from '../images/graph.svg?raw'
+</script>
+<svg-image :svg="graphSvg" />
 
 在无优化的情境下，当异步 chunk `A` 被导入时，浏览器将必须请求和解析 `A`，然后它才能弄清楚它也需要共用 chunk `C`。这会导致额外的网络往返：
 

guide/index.md

@@ -18,7 +18,7 @@ Vite 意在提供开箱即用的配置，同时它的 [插件 API](./api-plugin)
 
 ## 浏览器支持 {#browser-support}
 
-默认的构建目标浏览器是能 [在 script 标签上支持原生 ESM](https://caniuse.com/es6-module) 和 [原生 ESM 动态导入](https://caniuse.com/es6-module-dynamic-import)。传统浏览器可以通过官方插件 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 支持 —— 查看 [构建生产版本](./build) 章节获取更多细节。
+默认的构建目标是能支持 [原生 ESM 语法的 script 标签](https://caniuse.com/es6-module)、[原生 ESM 动态导入](https://caniuse.com/es6-module-dynamic-import) 和 [`import.meta`](https://caniuse.com/mdn-javascript_statements_import_meta) 的浏览器。传统浏览器可以通过官方插件 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 支持 —— 查看 [构建生产版本](./build) 章节获取更多细节。
 
 ## 在线试用 Vite {#trying-vite-online}
 
@@ -38,7 +38,7 @@ Vite 意在提供开箱即用的配置，同时它的 [插件 API](./api-plugin)
 ## 搭建第一个 Vite 项目 {#scaffolding-your-first-vite-project}
 
 ::: tip 兼容性注意
-Vite 需要 [Node.js](https://nodejs.org/en/) 版本 >= 14.18.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
+Vite 需要 [Node.js](https://nodejs.org/en/) 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
 :::
 
 使用 NPM:

guide/migration.md

@@ -2,7 +2,7 @@
 
 ## Node 支持 {#node-support}
 
-Vite 不再支持 Node v12，因为它已经进入了 EOL 阶段。现在你必须使用 Node 14.18+ 及以上版本。
+Vite 不再支持 Node 12 / 13 / 15，因为上述版本已经进入了 EOL 阶段。现在你必须使用 Node 14.18+ / 16+ 版本。
 
 ## 现代浏览器基准线变化 {#modern-browser-baseline-change}
 
@@ -107,10 +107,10 @@ export default {
 
 ### 在构建阶段使用 esbuild 依赖优化
 
-在 v3 版本下，Vite 允许在构建阶段使用 esbuild 进行依赖优化。如果开启，it removes one of the most significant differences between dev and prod present in v2. [`@rollupjs/plugin-commonjs`](https://github.com/rollup/plugins/tree/master/packages/commonjs) is no longer needed in this case since esbuild converts CJS-only dependencies to ESM.
+在 v3 版本下，Vite 允许在构建阶段使用 esbuild 进行依赖优化。如果开启此项，那么它将消除 v2 版本中存在的最明显的开发与构建最终产物之间的区别。[`@rollupjs/plugin-commonjs`](https://github.com/rollup/plugins/tree/master/packages/commonjs) 在此处不再需要因为 esbuild 会将纯 CommonJS 依赖转换为 ESM。
 
-If you want to try this build strategy, you can use `optimizeDeps.disabled: false` (the default in v3 is `disabled: 'build'`). `@rollup/plugin-commonjs`
-can be removed by passing `build.commonjsOptions: { include: [] }`
+如果你想尝试该构建策略，你可以使用 `optimizeDeps.disabled: false`（在 v3 中默认是 `disabled: 'build'`）。`@rollup/plugin-commonjs`
+可以通过设置 `build.commonjsOptions: { include: [] }` 来移除。
 
 ## 进阶 {#advanced}
 

guide/ssr.md

@@ -61,11 +61,14 @@ if (import.meta.env.SSR) {
 
 **server.js**
 
-```js{17-19}
+```js{15-18}
 import fs from 'fs'
 import path from 'path'
+import { fileURLToPath } from 'url'
 import express from 'express'
-import {createServer as createViteServer} from 'vite'
+import { createServer as createViteServer } from 'vite'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 async function createServer() {
   const app = express()

guide/static-deploy.md

@@ -64,7 +64,7 @@ $ npm run preview
 
 2. 在你的项目中，创建一个 `deploy.sh` 脚本，包含以下内容（注意高亮的行，按需使用），运行脚本来部署站点：
 
-   ```bash{13,20,23}
+   ```bash{13,21,24}
    #!/usr/bin/env sh
 
    # 发生错误时终止

guide/why.md

@@ -6,7 +6,7 @@
 
 时过境迁，我们见证了诸如 [webpack](https://webpack.js.org/)、[Rollup](https://rollupjs.org) 和 [Parcel](https://parceljs.org/) 等工具的变迁，它们极大地改善了前端开发者的开发体验。
 
-然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。
+然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。
 
 Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。
 
@@ -24,9 +24,12 @@ Vite 通过在一开始将应用中的模块区分为 **依赖** 和 **源码**
 
     Vite 以 [原生 ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
 
-    ![基于打包器的开发服务器](/images/bundler.png)
-
-    ![基于 ESM 的开发服务器](/images/esm.png)
+<script setup>
+import bundlerSvg from '../images/bundler.svg?raw'
+import esmSvg from '../images/esm.svg?raw'
+</script>
+<svg-image :svg="bundlerSvg" />
+<svg-image :svg="esmSvg" />
 
 ### 缓慢的更新 {#slow-updates}