Skip to content

Commit

Permalink
release for Vite v5.1.6
Browse files Browse the repository at this point in the history
  • Loading branch information
waynzh authored Mar 16, 2024
2 parents 11b2522 + ae1337b commit dd7c5b7
Show file tree
Hide file tree
Showing 27 changed files with 1,450 additions and 608 deletions.
15 changes: 15 additions & 0 deletions .vitepress/config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { defineConfig, DefaultTheme } from 'vitepress'
import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
import { buildEnd } from './buildEnd.config'

const ogDescription = 'Next Generation Frontend Tooling'
Expand Down Expand Up @@ -386,5 +387,19 @@ export default defineConfig({
],
},
},
transformPageData(pageData) {
const canonicalUrl = `${ogUrl}/${pageData.relativePath}`
.replace(/\/index\.md$/, '/')
.replace(/\.md$/, '/')
pageData.frontmatter.head ??= []
pageData.frontmatter.head.unshift([
'link',
{ rel: 'canonical', href: canonicalUrl },
])
return pageData
},
markdown: {
codeTransformers: [transformerTwoslash()],
},
buildEnd,
})
35 changes: 34 additions & 1 deletion .vitepress/theme/composables/sponsor.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ref, onMounted } from 'vue'
import { ref, onMounted, onUnmounted } from 'vue'

interface Sponsors {
special: Sponsor[]
Expand All @@ -13,6 +13,10 @@ interface Sponsor {
name: string
img: string
url: string
/**
* Expects to also have an **inversed** image with `-dark` postfix.
*/
hasDark?: true
}

// shared data across instances so we load only once.
Expand Down Expand Up @@ -58,12 +62,40 @@ const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
name: 'Transloadit',
url: 'https://transloadit.com/?utm_source=vite&utm_medium=referral&utm_campaign=sponsorship&utm_content=website',
img: '/transloadit.svg',
hasDark: true,
},
],
}

function toggleDarkLogos() {
if (data.value) {
const isDark = document.documentElement.classList.contains('dark')
data.value.forEach(({ items }) => {
items.forEach((s: Sponsor) => {
if (s.hasDark) {
s.img = isDark
? s.img.replace(/(\.\w+)$/, '-dark$1')
: s.img.replace(/-dark(\.\w+)$/, '$1')
}
})
})
}
}

export function useSponsor() {
onMounted(async () => {
const ob = new MutationObserver((list) => {
for (const m of list) {
if (m.attributeName === 'class') {
toggleDarkLogos()
}
}
})
ob.observe(document.documentElement, { attributes: true })
onUnmounted(() => {
ob.disconnect()
})

if (data.value) {
return
}
Expand All @@ -72,6 +104,7 @@ export function useSponsor() {
const json = await result.json()

data.value = mapSponsors(json)
toggleDarkLogos()
})

return {
Expand Down
3 changes: 3 additions & 0 deletions .vitepress/theme/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
import '@shikijs/vitepress-twoslash/style.css'
import './styles/vars.css'
import HomeSponsors from './components/HomeSponsors.vue'
import AsideSponsors from './components/AsideSponsors.vue'
Expand All @@ -19,6 +21,7 @@ export default {
},
enhanceApp({ app }) {
app.component('SvgImage', SvgImage)
app.use(TwoslashFloatingVue)
},
} satisfies Theme

13 changes: 13 additions & 0 deletions .vitepress/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"noImplicitOverride": true,
"noUnusedLocals": true,
"esModuleInterop": true,
"noEmit": true
},
"exclude": ["cache", "dist"]
}
95 changes: 47 additions & 48 deletions _data/team.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,54 +64,6 @@ export const core = [
],
sponsor: 'https://github.com/sponsors/sapphi-red',
},
{
avatar: 'https://github.com/sodatea.png',
name: 'Haoqun Jiang',
title: 'Developer',
org: 'Vue.js',
orgLink: 'https://vuejs.org/',
desc: 'Vue/Vite core team member. Full-time open sourcerer.',
links: [
{ icon: 'github', link: 'https://github.com/sodatea' },
{ icon: 'twitter', link: 'https://twitter.com/haoqunjiang' },
{ icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@haoqun' },
],
sponsor: 'https://github.com/sponsors/sodatea',
},
{
avatar: 'https://github.com/Shinigami92.png',
name: 'Shinigami',
title: 'Maintainer',
org: 'Faker',
orgLink: 'https://fakerjs.dev',
desc: 'Passionate TypeScript enthusiast working extensively with Vue SPA and pug.',
links: [
{ icon: 'github', link: 'https://github.com/Shinigami92' },
{ icon: 'mastodon', link: 'https://elk.zone/mas.to/@Shini92' },
],
sponsor: 'https://github.com/sponsors/Shinigami92',
},
{
avatar: 'https://i.imgur.com/KMed6rQ.jpeg',
name: 'Alec Larson',
title: 'Entrepreneur',
desc: 'Dabbling in social ecommerce, meta frameworks, and board games',
links: [
{ icon: 'github', link: 'https://github.com/aleclarson' },
{ icon: 'twitter', link: 'https://twitter.com/retropragma' },
],
sponsor: 'https://github.com/sponsors/aleclarson',
},
{
avatar: 'https://github.com/poyoho.png',
name: 'yoho',
title: 'Frontend Developer',
desc: 'Frontend. Vite team member.',
links: [
{ icon: 'github', link: 'https://github.com/poyoho' },
{ icon: 'twitter', link: 'https://twitter.com/yoho_po' },
],
},
{
avatar: 'https://github.com/ArnaudBarre.png',
name: 'Arnaud Barré',
Expand Down Expand Up @@ -147,9 +99,56 @@ export const core = [
],
sponsor: 'https://github.com/sponsors/sheremet-va',
},
{
avatar: 'https://github.com/Shinigami92.png',
name: 'Shinigami',
title: 'Maintainer',
org: 'Faker',
orgLink: 'https://fakerjs.dev',
desc: 'Passionate TypeScript enthusiast working extensively with Vue SPA and pug.',
links: [
{ icon: 'github', link: 'https://github.com/Shinigami92' },
{ icon: 'mastodon', link: 'https://elk.zone/mas.to/@Shini92' },
],
sponsor: 'https://github.com/sponsors/Shinigami92',
},
{
avatar: 'https://github.com/sodatea.png',
name: 'Haoqun Jiang',
title: 'Developer',
org: 'Vue.js',
orgLink: 'https://vuejs.org/',
desc: 'Vue/Vite core team member. Full-time open sourcerer.',
links: [
{ icon: 'github', link: 'https://github.com/sodatea' },
{ icon: 'twitter', link: 'https://twitter.com/haoqunjiang' },
{ icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@haoqun' },
],
sponsor: 'https://github.com/sponsors/sodatea',
},
]

export const emeriti = [
{
avatar: 'https://i.imgur.com/KMed6rQ.jpeg',
name: 'Alec Larson',
title: 'Entrepreneur',
desc: 'Dabbling in social ecommerce, meta frameworks, and board games',
links: [
{ icon: 'github', link: 'https://github.com/aleclarson' },
{ icon: 'twitter', link: 'https://twitter.com/retropragma' },
],
},
{
avatar: 'https://github.com/poyoho.png',
name: 'yoho',
title: 'Frontend Developer',
desc: 'Frontend. Vite team member.',
links: [
{ icon: 'github', link: 'https://github.com/poyoho' },
{ icon: 'twitter', link: 'https://twitter.com/yoho_po' },
],
},
{
avatar: 'https://github.com/ygj6.png',
name: 'ygj6',
Expand Down
13 changes: 11 additions & 2 deletions config/build-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,22 @@ type ResolveModulePreloadDependenciesFn = (
`resolveDependencies` 函数将为每个动态导入调用,同时带着一个它所依赖的 chunk 列表。并且它还会为每个在入口 HTML 文件中导入的 chunk 调用。 可以返回一个新的依赖关系数组,可能被过滤后变少了,也可能有更多依赖注入进来了,同时它们的路径也被修改过。`deps` 路径是相对于 `build.outDir` 的。若在注入该模块到 HTML head 时使用 `new URL(dep, import.meta.url)` 获取绝对路径,则对于 `hostType === 'js'`,允许返回一个相对于 `hostId` 的路径。
```js
<!-- prettier-ignore-start -->
```js twoslash
/** @type {import('vite').UserConfig} */
const config = {
build: {
// ---cut-before---
modulePreload: {
resolveDependencies: (filename, deps, { hostId, hostType }) => {
return deps.filter(condition)
}
},
},
// ---cut-after---
},
}
```
<!-- prettier-ignore-end -->

解析得到的依赖路径可以再在之后使用 [`experimental.renderBuiltUrl`](../guide/build.md#advanced-base-options) 更改。

Expand Down
8 changes: 6 additions & 2 deletions config/dep-optimization-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@
:::warning CommonJS
CommonJS 的依赖不应该排除在优化外。如果一个 ESM 依赖被排除在优化外,但是却有一个嵌套的 CommonJS 依赖,则应该为该 CommonJS 依赖添加 `optimizeDeps.include`。例如:

```js
```js twoslash
import { defineConfig } from 'vite'
// ---cut---
export default defineConfig({
optimizeDeps: {
include: ['esm-dep > cjs-dep'],
Expand All @@ -37,7 +39,9 @@ export default defineConfig({

**实验性:** 如果你使用的是一个有很多深层导入的库,你也可以指定一个尾部的 glob 模式来一次性地预构建所有深层导入。这将避免在使用新的深层导入时不断地预构建。可以在此 [提供反馈](https://github.com/vitejs/vite/discussions/15833)。例如:

```js
```js twoslash
import { defineConfig } from 'vite'
// ---cut---
export default defineConfig({
optimizeDeps: {
include: ['my-lib/components/**/*.vue'],
Expand Down
12 changes: 8 additions & 4 deletions config/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@ Vite 也直接支持 TS 配置文件。你可以在 `vite.config.ts` 中使用 `

如果配置文件需要基于(`dev`/`serve``build`)命令或者不同的 [模式](/guide/env-and-mode) 来决定选项,亦或者是一个 SSR 构建(`isSsrBuild`)、一个正在预览的构建产物(`isPreview`),则可以选择导出这样一个函数:

```js
```js twoslash
import { defineConfig } from 'vite'
// ---cut---
export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
if (command === 'serve') {
return {
Expand All @@ -65,15 +67,17 @@ export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
})
```

需要注意的是,在 Vite 的 API 中,在开发环境下 `command` 的值为 `serve`(在 CLI 中, `vite dev``vite serve``vite` 的别名),而在生产环境下为 `build``vite build`)。
需要注意的是,在 Vite 的 API 中,在开发环境下 `command` 的值为 `serve`(在 CLI 中, `vite dev``vite serve`[`vite`](/guide/cli#vite) 的别名),而在生产环境下为 `build`[`vite build`](/guide/cli#vite-build))。

`isSsrBuild``isPreview` 是额外的可选标志,用于区分 `build``serve` 命令的类型。一些加载 Vite 配置的工具可能不支持这些标志,而会传递 `undefined`。因此,建议使用 `true``false` 的显式比较。

## 异步配置 {#async-config}

如果配置需要调用一个异步函数,也可以转而导出一个异步函数。这个异步函数也可以通过 `defineConfig` 传递,以便获得更好的智能提示:

```js
```js twoslash
import { defineConfig } from 'vite'
// ---cut---
export default defineConfig(async ({ command, mode }) => {
const data = await asyncFunction()
return {
Expand All @@ -88,7 +92,7 @@ export default defineConfig(async ({ command, mode }) => {

注意 Vite 默认是不加载 `.env` 文件的,因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个,举个例子,`root``envDir` 选项会影响加载行为。不过当你的确需要时,你可以使用 Vite 导出的 `loadEnv` 函数来加载指定的 `.env` 文件。

```js
```js twoslash
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
Expand Down
14 changes: 8 additions & 6 deletions config/server-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@

你可以设置 [`dns.setDefaultResultOrder('verbatim')`](https://nodejs.org/api/dns.html#dns_dns_setdefaultresultorder_order) 来禁用这个重新排序的行为。Vite 会将地址打印为 `localhost`

```js
```js twoslash
// vite.config.js
import { defineConfig } from 'vite'
import dns from 'dns'
import dns from 'node:dns'

dns.setDefaultResultOrder('verbatim')

Expand Down Expand Up @@ -152,6 +152,8 @@ export default defineConfig({

设置 `server.hmr.overlay``false` 可以禁用开发服务器错误的屏蔽。

`protocol` 是用于设置 HMR 连接使用的 WebSocket 协议的选项,可以是 `ws`(WebSocket)或者 `wss`(WebSocket Secure)。

`clientPort` 是一个高级选项,只在客户端的情况下覆盖端口,这允许你为 websocket 提供不同的端口,而并非在客户端代码中查找。如果需要在 dev-server 情况下使用 SSL 代理,这非常有用。

`server.hmr.server` 被定义后,Vite 将会通过所提供的的服务器来处理 HMR 连接。如果不是在中间件模式下,Vite 将尝试通过已有服务器处理 HMR 连接。这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下,非常有用。
Expand Down Expand Up @@ -236,7 +238,7 @@ Vite 服务器的文件监听器默认会监听 `root` 目录,同时会跳过

- **示例:**

```js
```js twoslash
import express from 'express'
import { createServer as createViteServer } from 'vite'

Expand Down Expand Up @@ -356,9 +358,9 @@ export default defineConfig({
// 添加到忽略列表中。
sourcemapIgnoreList(sourcePath, sourcemapPath) {
return sourcePath.includes('node_modules')
}
}
};
},
},
})
```

::: tip 注意
Expand Down
11 changes: 9 additions & 2 deletions config/shared-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,14 @@ Vite 有一个“允许的情景”列表,并且会匹配列表中第一个情
- **相关:** [esbuild#preserve-symlinks](https://esbuild.github.io/api/#preserve-symlinks)[webpack#resolve.symlinks
](https://webpack.js.org/configuration/resolve/#resolvesymlinks)

## css.modules {#css-modules}
## html.cspNonce

- **类型:** `string`
- **相关:** [内容安全策略(CSP)](/guide/features#content-security-policy-csp)

一个在生成脚本或样式标签时会用到的 nonce 值占位符。设置此值还会生成一个带有 nonce 值的 meta 标签。

## css.modules

- **类型:**
```ts
Expand Down Expand Up @@ -408,7 +415,7 @@ export default defineConfig({

使用自定义 logger 记录消息。可以使用 Vite`createLogger` API 获取默认的 logger 并对其进行自定义,例如,更改消息或过滤掉某些警告。

```js
```ts twoslash
import { createLogger, defineConfig } from 'vite'
const logger = createLogger()
Expand Down
2 changes: 1 addition & 1 deletion config/ssr-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

这个选项可以防止列出的依赖项在服务端渲染(SSR)时被外部化,这些依赖项将会在构建过程中被打包。默认情况下,只有软链接的依赖项不会被外部化(这是为了HMR)。如果你希望将软链接的依赖项也外部化,可以将其名称传给 `ssr.external` 选项。

如果这个选项设置为 `true`,那么没有任何依赖项会被外部化。然而,如果你在 `ssr.external` 中明确列出了一些依赖项(使用 `string[]` 类型),那么这些依赖项可以优先被外部化。
如果这个选项设置为 `true`,那么没有任何依赖项会被外部化。然而,如果你在 `ssr.external` 中明确列出了一些依赖项(使用 `string[]` 类型),那么这些依赖项可以优先被外部化。如果设置了 `ssr.target: 'node'`,那么 Node.js 的内置模块也会被默认外部化。

需要注意的是,如果 `ssr.noExternal: true``ssr.external: true` 都被设置了,那么 `ssr.noExternal` 将优先生效,没有任何依赖项会被外部化。

Expand Down
Loading

0 comments on commit dd7c5b7

Please sign in to comment.