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`。这会导致额外的网络往返：