File tree 4 files changed +43
-9
lines changed
4 files changed +43
-9
lines changed Original file line number Diff line number Diff line change @@ -918,7 +918,7 @@ export default defineConfig({
918
918
919
919
- ** 类型:** ` string | string[] `
920
920
921
- 默认情况下,Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 ` build.rollupOptions.input ` ,Vite 将转而去抓取这些入口点。
921
+ 默认情况下,Vite 会抓取你的 ` index.html ` 来检测需要预构建的依赖项。如果指定了 ` build.rollupOptions.input ` ,Vite 将转而去抓取这些入口点。
922
922
923
923
如果这两者都不合你意,则可以使用此选项指定自定义条目——该值需要遵循 [ fast-glob 模式] ( https://github.com/mrmlnc/fast-glob#basic-syntax ) ,或者是相对于 Vite 项目根的模式数组。这将覆盖掉默认条目推断。
924
924
Original file line number Diff line number Diff line change @@ -92,7 +92,7 @@ interface ViteDevServer {
92
92
*/
93
93
ssrLoadModule(
94
94
url: string,
95
- options?: { isolated ?: boolean }
95
+ options?: { fixStacktrace ?: boolean }
96
96
): Promise<Record<string, any>>
97
97
/**
98
98
* 解决 ssr 错误堆栈信息
Original file line number Diff line number Diff line change 3
3
当你首次启动 ` vite ` 时,你可能会注意到打印出了以下信息:
4
4
5
5
```
6
- Optimizable dependencies detected : (侦测到可优化的依赖 :)
7
- react, react-dom
8
- Pre-bundling them to speed up dev server page load...(将预构建它们以提升开发服务器页面加载速度)
9
- (this will be run only when your dependencies have changed)(这将只会在你的依赖发生变化时执行 )
6
+ Pre-bundling dependencies: (正在预构建依赖 :)
7
+ react,
8
+ react-dom
9
+ (this will be run only when your dependencies or config have changed)(这将只会在你的依赖或配置发生变化时执行 )
10
10
```
11
11
12
12
## 原因 {#the-why}
@@ -28,6 +28,8 @@ Pre-bundling them to speed up dev server page load...(将预构建它们以提
28
28
29
29
通过预构建 ` lodash-es ` 成为一个模块,我们就只需要一个 HTTP 请求了!
30
30
31
+ 请注意,这只会应用在开发模式下。
32
+
31
33
## 自动依赖搜寻 {#automatic-dependency-discovery}
32
34
33
35
如果没有找到相应的缓存,Vite 将抓取你的源码,并自动寻找引入的依赖项(即 "bare import",表示期望从 ` node_modules ` 解析),并将这些依赖项作为预构建包的入口点。预构建通过 ` esbuild ` 执行,所以它通常非常快。
@@ -38,9 +40,25 @@ Pre-bundling them to speed up dev server page load...(将预构建它们以提
38
40
39
41
在一个 monorepo 启动中,该仓库中的某个依赖可能会成为另一个包的依赖。Vite 会自动侦测没有从 ` node_modules ` 解析的依赖项,并将链接的依赖视为源码。它不会尝试打包被链接的依赖,而是会分析被链接依赖的依赖列表。
40
42
41
- ::: warning Note
42
- 由于依赖关系的处理方式不同,链接的依赖关系在最终构建时可能无法正常工作。
43
- 使用 ` npm package ` 代替所有本地依赖,以避免最终的 bundle 问题。
43
+ 然而,这需要被链接的依赖被导出为 ESM 格式。如果不是,那么你可以在配置里将此依赖添加到 [ ` optimizeDeps.include ` ] ( /config/#optimizedeps-include ) 和 [ ` build.commonjsOptions.include ` ] ( /config/#build-commonjsoptions ) 这两项中。
44
+
45
+ ``` js
46
+ export default defineConfig ({
47
+ optimizeDeps: {
48
+ include: [' linked-dep' ]
49
+ },
50
+ build: {
51
+ commonjsOptions: {
52
+ include: [/ linked-dep/ , / node_modules/ ]
53
+ }
54
+ }
55
+ })
56
+ ```
57
+
58
+ 当这个被链接的依赖发生变更后,在重启开发服务器时在命令中带上 ` --force ` 选项让所有更改生效。
59
+
60
+ ::: warning 重复删除
61
+ 由于对链接依赖的解析方式不同,传递性的依赖项可能会不正确地进行重复数据删除,而造成运行时的问题。如果你偶然发现了这个问题,请使用 ` npm pack ` 来修复它。
44
62
:::
45
63
46
64
## 自定义行为 {#customizing-the-behavior}
Original file line number Diff line number Diff line change @@ -298,6 +298,22 @@ const modules = {
298
298
}
299
299
```
300
300
301
+ ` import.meta.glob ` 和 ` import.meta.globEager ` 都支持以字符串形式导入文件,类似于 [ 已字符串形式导入资源] ( https://vitejs.dev/guide/assets.html#importing-asset-as-string ) 。在这里,我们使用了 [ Import Assertions] ( https://github.com/tc39/proposal-import-assertions#synopsis ) 语法对导入进行断言。
302
+
303
+ ``` js
304
+ const modules = import .meta.glob(' ./dir/*.js' , { assert : { type : 'raw ' } })
305
+ ```
306
+
307
+ 上面的代码会被转换为下面这样:
308
+
309
+ ``` js
310
+ // code produced by vite(代码由 vite 输出)
311
+ const modules = {
312
+ ' ./dir/foo.js' : ' {\n "msg": "foo"\n }\n ' ,
313
+ ' ./dir/bar.js' : ' {\n "msg": "bar"\n }\n '
314
+ }
315
+ ```
316
+
301
317
请注意:
302
318
303
319
- 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
You can’t perform that action at this time.
0 commit comments