Skip to content

Commit

Permalink
Merge pull request #463 from vitejs/release/2.9.8
Browse files Browse the repository at this point in the history
  • Loading branch information
ShenQingchuan committed May 10, 2022
2 parents 9f46c98 + fd32f07 commit dd47f6e
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 20 deletions.
24 changes: 17 additions & 7 deletions config/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,23 +90,29 @@ export default defineConfig(({ command, mode }) => {
export default defineConfig(async ({ command, mode }) => {
const data = await asyncFunction()
return {
// 构建模式所需的特有配置
// vite 配置
}
})
```

### Environment Variables {#environment-variables}
### 环境变量 {#environment-variables}

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

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

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

export default defineConfig(({ command, mode }) => {
// 根据当前工作目录中的 `mode` 加载 .env 文件
const env = loadEnv(mode, process.cwd())
// 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。
const env = loadEnv(mode, process.cwd(), '')
return {
// 构建特定配置
// vite config
define: {
__APP_ENV__: env.APP_ENV
}
}
})
```
Expand Down Expand Up @@ -298,7 +304,11 @@ export default defineConfig(({ command, mode }) => {

- **类型:** `string | (postcss.ProcessOptions & { plugins?: postcss.Plugin[] })`

内联的 PostCSS 配置(格式同 `postcss.config.js`),或者一个(默认基于项目根目录的)自定义的 PostCSS 配置路径。其路径搜索是通过 [postcss-load-config](https://github.com/postcss/postcss-load-config) 实现的,并且只加载支持的配置文件名称。
内联的 PostCSS 配置(格式同 `postcss.config.js`),或者一个(默认基于项目根目录的)自定义的 PostCSS 配置路径。

对内联的 POSTCSS 配置,它期望接收与 `postcss.config.js` 一致的格式。但对于 `plugins` 属性有些特别,只接收使用 [数组格式](https://github.com/postcss/postcss-load-config/blob/main/README.md#array)。

搜索是使用 [postcss-load-config](https://github.com/postcss/postcss-load-config) 完成的,只有被支持的文件名才会被加载。

注意:如果提供了该内联配置,Vite 将不会搜索其他 PostCSS 配置源。

Expand Down Expand Up @@ -694,7 +704,7 @@ createServer()
```js
export default defineConfig({
server: {
origin: 'http://127.0.0.1:8080/'
origin: 'http://127.0.0.1:8080'
}
})
```
Expand Down
30 changes: 18 additions & 12 deletions guide/api-hmr.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,27 @@ Vite 通过特殊的 `import.meta.hot` 对象暴露手动 HMR API。

```ts
interface ImportMeta {
readonly hot?: {
readonly data: any
readonly hot?: ViteHotContext
}

interface ViteHotContext {
readonly data: any

accept(): void
accept(cb: (mod: any) => void): void
accept(dep: string, cb: (mod: any) => void): void
accept(deps: string[], cb: (mods: any[]) => void): void
accept(): void
accept(cb: (mod: any) => void): void
accept(dep: string, cb: (mod: any) => void): void
accept(deps: readonly string[], cb: (mods: any[]) => void): void

prune(cb: () => void): void
dispose(cb: (data: any) => void): void
decline(): void
invalidate(): void
dispose(cb: (data: any) => void): void
decline(): void
invalidate(): void

on(event: string, cb: (...args: any[]) => void): void
}
// `InferCustomEventPayload` provides types for built-in Vite events
on<T extends string>(
event: T,
cb: (payload: InferCustomEventPayload<T>) => void
): void
send<T extends string>(event: T, data?: InferCustomEventPayload<T>): void
}
```

Expand Down
4 changes: 3 additions & 1 deletion guide/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ export type { T }

你必须在 `tsconfig.json` 中的 `compilerOptions` 下设置 `"isolatedModules": true`。如此做,TS 会警告你不要使用隔离(isolated)转译的功能。

However, some libraries (e.g. [`vue`](https://github.com/vuejs/core/issues/1228)) don't work well with `"isolatedModules": true`. You can use `"skipLibCheck": true` to temporarily suppress the errors until it is fixed upstream.

#### `useDefineForClassFields`

从 Vite v2.5.0 开始,如果 TypeScript 的 target 是 `ESNext`,此选项默认值则为 `true`。这与 [`tsc` v4.3.2 及以后版本的行为](https://github.com/microsoft/TypeScript/pull/42663) 一致。这也是标准的 ECMAScript 的运行时行为。
Expand Down Expand Up @@ -185,7 +187,7 @@ document.getElementById('foo').className = applyColor

### CSS 预处理器 {#css-pre-processors}

由于 Vite 的目标仅为现代浏览器,因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件(例如 [postcss-nesting](https://github.com/jonathantneal/postcss-nesting))来编写简单的、符合未来标准的 CSS。
由于 Vite 的目标仅为现代浏览器,因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件(例如 [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting))来编写简单的、符合未来标准的 CSS。

话虽如此,但 Vite 也同时提供了对 `.scss`, `.sass`, `.less`, `.styl``.stylus` 文件的内置支持。没有必要为它们安装特定的 Vite 插件,但必须安装相应的预处理器依赖:

Expand Down
2 changes: 2 additions & 0 deletions plugins/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
Vite 旨在为常见的 web 开发工作提供开箱即用的支持。在搜索一个 Vite 或 Rollup 兼容插件之前,请先查看 [功能指引](../guide/features.md)。很多场景下,在 Rollup 项目中需要添加插件,而在 Vite 中已经内建支持了。
:::

查看 [使用插件](../guide/using-plugins) 一章获取如何插件使用方式的更多信息。

## 官方插件 {#official-plugins}

### [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) {#vitejsplugin-vue}
Expand Down

0 comments on commit dd47f6e

Please sign in to comment.