File tree 5 files changed +57
-17
lines changed
5 files changed +57
-17
lines changed Original file line number Diff line number Diff line change @@ -415,7 +415,7 @@ export default defineConfig(async ({ command, mode }) => {
415
415
changeOrigin: true ,
416
416
configure : (proxy , options ) => {
417
417
// proxy 是 'http-proxy' 的实例
418
- },
418
+ }
419
419
}
420
420
}
421
421
}
@@ -530,7 +530,7 @@ createServer()
530
530
531
531
### build.target {#build-target}
532
532
533
- - ** 类型:** ` string `
533
+ - ** 类型:** ` string | string[] `
534
534
- ** 默认:** ` 'modules' `
535
535
- ** 相关内容::** [ 浏览器兼容性] ( /guide/build#browser-compatibility )
536
536
@@ -647,12 +647,6 @@ createServer()
647
647
648
648
传递给 Terser 的更多 [ minify 选项] ( https://terser.org/docs/api-reference#minify-options ) 。
649
649
650
- ### build.cleanCssOptions {#build-cleancssoptions}
651
-
652
- - ** 类型:** ` CleanCSS.Options `
653
-
654
- 传递给 [ clean-css] ( https://github.com/jakubpawlowicz/clean-css#constructor-options ) 的构造器选项。
655
-
656
650
### build.write {#build-write}
657
651
658
652
- ** 类型:** ` boolean `
@@ -741,9 +735,9 @@ SSR 选项可能会在未来版本中进行调整。
741
735
742
736
### ssr.noExternal {#ssr-noexternal}
743
737
744
- - ** 类型:** ` string | RegExp | (string | RegExp)[] `
738
+ - ** 类型:** ` string | RegExp | (string | RegExp)[] | true `
745
739
746
- 列出的是防止被 SSR 外部化依赖项。
740
+ 列出的是防止被 SSR 外部化依赖项。如果设为 ` true ` ,将没有依赖被外部化。
747
741
748
742
### ssr.target
749
743
Original file line number Diff line number Diff line change @@ -38,6 +38,11 @@ Pre-bundling them to speed up dev server page load...(将预构建它们以提
38
38
39
39
在一个 monorepo 启动中,该仓库中的某个依赖可能会成为另一个包的依赖。Vite 会自动侦测没有从 ` node_modules ` 解析的依赖项,并将链接的依赖视为源码。它不会尝试打包被链接的依赖,而是会分析被链接依赖的依赖列表。
40
40
41
+ ::: warning Note
42
+ 由于依赖关系的处理方式不同,链接的依赖关系在最终构建时可能无法正常工作。
43
+ 使用 ` npm package ` 代替所有本地依赖,以避免最终的 bundle 问题。
44
+ :::
45
+
41
46
## 自定义行为 {#customizing-the-behavior}
42
47
43
48
默认的依赖项发现为启发式可能并不总是可取的。在你想要显式地从列表中包含/排除依赖项的情况下, 请使用 [ ` optimizeDeps ` 配置项] ( /config/#dep-optimization-options ) 。
Original file line number Diff line number Diff line change @@ -34,7 +34,37 @@ Vite 仅执行 `.ts` 文件的转译工作,并 **不** 执行任何类型检
34
34
35
35
Vite 使用 [ esbuild] ( https://github.com/evanw/esbuild ) 将 TypeScript 转译到 JavaScript,约是 ` tsc ` 速度的 20~ 30 倍,同时 HMR 更新反映到浏览器的时间小于 50ms。
36
36
37
- 注意因为 ` esbuild ` 只执行转译工作而不含类型信息,所以它不支持 TypeScript 的特定功能例如常量枚举和隐式 “type-only” 导入。你必须在你的 ` tsconfig.json ` 中的 ` compilerOptions ` 里设置 ` "isolatedModules": true ` ,这样 TS 才会警告你哪些功能无法与独立编译模式一同工作。
37
+ ### TypeScript 编译器选项 {#typescript-compiler-options}
38
+
39
+ ` tsconfig.json ` 中 ` compilerOptions ` 下的一些配置项需要特别注意。
40
+
41
+ #### ` isolatedModules `
42
+
43
+ 应该设置为 ` true ` 。
44
+
45
+ 这是因为 ` esbuild ` 只执行没有类型信息的转译,它并不支持某些特性,如 ` const enum ` 和隐式类型导入。
46
+
47
+ 你必须在 ` tsconfig.json ` 中的 ` compilerOptions ` 下设置 ` "isolatedModules": true ` 。如此做,TS 会警告你不要使用隔离(isolated)转译的功能。
48
+
49
+ #### ` useDefineForClassFields `
50
+
51
+ 从 Vite v2.5.0 开始,如果 TypeScript 的 target 是 ` ESNext ` ,此选项默认值则为 ` true ` 。这与 [ ` tsc ` v4.3.2 及以后版本的行为] ( https://github.com/microsoft/TypeScript/pull/42663 ) 一致。这也是标准的 ECMAScript 的运行时行为。
52
+
53
+ 但对于那些习惯其他编程语言或旧版本 TypeScript 的开发者来说,这可能是违反直觉的。
54
+ 你可以参阅 [ TypeScript 3.7 发布日志] ( https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier ) 中了解更多关于如何兼容的信息。
55
+
56
+ 如果你正在使用一个严重依赖 class fields 的库,请注意该库对此选项的预期设置。
57
+
58
+ 大多数库都希望 ` "useDefineForClassFields": true ` ,如 [ MobX] ( https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties ) ,[ Vue Class Components 8.x] ( https://github.com/vuejs/vue-class-component/issues/465 ) 等。
59
+
60
+ 但是有几个库还没有兼容这个新的默认值,其中包括 [ ` lit-element ` ] ( https://github.com/lit/lit-element/issues/1030 ) 。如果遇到这种情况,请将 ` useDefineForClassFields ` 设置为 ` false ` 。
61
+
62
+ #### 影响构建结果的其他编译器选项 {#other-compiler-options-affecting-the-build-result}
63
+
64
+ - [ ` extends ` ] ( https://www.typescriptlang.org/tsconfig#extends )
65
+ - [ ` importsNotUsedAsValues ` ] ( https://www.typescriptlang.org/tsconfig#importsNotUsedAsValues )
66
+ - [ ` jsxFactory ` ] ( https://www.typescriptlang.org/tsconfig#jsxFactory )
67
+ - [ ` jsxFragmentFactory ` ] ( https://www.typescriptlang.org/tsconfig#jsxFragmentFactory )
38
68
39
69
### 客户端类型 {#client-types}
40
70
Original file line number Diff line number Diff line change @@ -248,6 +248,13 @@ export function mySSRPlugin() {
248
248
}
249
249
` ` `
250
250
251
- ## SSR Target
251
+ ## SSR Target {#ssr-target}
252
252
253
253
SSR 构建的默认目标为 node 环境,但你也可以让服务运行在 Web Worker 上。每个平台的打包条目解析是不同的。你可以将` ssr .target ` 设置为 ` webworker` ,以将目标配置为 Web Worker。
254
+
255
+ ## SSR Bundle {#ssr-bundle}
256
+
257
+ 在某些如 ` webworker` 运行时等特殊情况中,你可能想要将你的 SSR 打包成单个 JavaScript 文件。你可以通过设置 ` ssr .noExternal ` 为 ` true ` 来启用这个行为。这将会做两件事:
258
+
259
+ - 将所有依赖视为 ` noExternal` (非外部化)
260
+ - 若任何 Node.js 内置内容被引入,将抛出一个错误
Original file line number Diff line number Diff line change 10
10
{
11
11
"scripts" : {
12
12
"build" : " vite build" ,
13
- "preview " : " vite preview"
13
+ "serve " : " vite preview"
14
14
}
15
15
}
16
16
```
@@ -33,21 +33,21 @@ $ npm run build
33
33
34
34
### 本地测试应用 {#testing-the-app-locally}
35
35
36
- 当你构建完成应用后,你可以通过运行 ` npm run preview ` 命令,在本地测试该应用。
36
+ 当你构建完成应用后,你可以通过运行 ` npm run serve ` 命令,在本地测试该应用。
37
37
38
38
``` bash
39
39
$ npm run build
40
- $ npm run preview
40
+ $ npm run serve
41
41
```
42
42
43
- ` preview ` 命令会在本地启动一个静态 Web 服务器,将 ` dist ` 文件夹运行在 http://localhost:5000。这样在本地环境下查看该构建产物是否正常可用就方便了。
43
+ ` vite preview` 命令会在本地启动一个静态 Web 服务器,将 ` dist ` 文件夹运行在 http://localhost:5000。这样在本地环境下查看该构建产物是否正常可用就方便了。
44
44
45
45
你可以通过 ` --port ` 参数来配置服务的运行端口。
46
46
47
47
``` json
48
48
{
49
49
"scripts" : {
50
- "preview " : " vite preview --port 8080"
50
+ "serve " : " vite preview --port 8080"
51
51
}
52
52
}
53
53
```
@@ -56,6 +56,10 @@ $ npm run preview
56
56
57
57
## GitHub Pages {#github-pages}
58
58
59
+ ::: tip 注意
60
+ 如果你将 script 的名字 ` serve ` 改为了 ` preview ` ,你可能会遇到某些包管理工具在处理 [ 前置 & 后置 scripts] ( https://docs.npmjs.com/cli/v7/using-npm/scripts#pre--post-scripts ) 方面的问题。
61
+ :::
62
+
59
63
1 . 在 ` vite.config.js ` 中设置正确的 ` base ` 。
60
64
61
65
如果你要部署在 ` https://<USERNAME>.github.io/ ` 上,你可以省略 ` base ` 使其默认为 ` '/' ` 。
You can’t perform that action at this time.
0 commit comments