File tree Expand file tree Collapse file tree 4 files changed +43
-9
lines changed Expand file tree Collapse file tree 4 files changed +43
-9
lines changed Original file line number Diff line number Diff line change @@ -918,7 +918,7 @@ export default defineConfig({
918918
919919- ** 类型:** ` string | string[] `
920920
921- 默认情况下,Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 ` build.rollupOptions.input ` ,Vite 将转而去抓取这些入口点。
921+ 默认情况下,Vite 会抓取你的 ` index.html ` 来检测需要预构建的依赖项。如果指定了 ` build.rollupOptions.input ` ,Vite 将转而去抓取这些入口点。
922922
923923 如果这两者都不合你意,则可以使用此选项指定自定义条目——该值需要遵循 [ fast-glob 模式] ( https://github.com/mrmlnc/fast-glob#basic-syntax ) ,或者是相对于 Vite 项目根的模式数组。这将覆盖掉默认条目推断。
924924
Original file line number Diff line number Diff line change @@ -92,7 +92,7 @@ interface ViteDevServer {
9292 */
9393 ssrLoadModule(
9494 url: string,
95- options?: { isolated ?: boolean }
95+ options?: { fixStacktrace ?: boolean }
9696 ): Promise<Record<string, any>>
9797 /**
9898 * 解决 ssr 错误堆栈信息
Original file line number Diff line number Diff line change 33当你首次启动 ` vite ` 时,你可能会注意到打印出了以下信息:
44
55```
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)(这将只会在你的依赖或配置发生变化时执行 )
1010```
1111
1212## 原因 {#the-why}
@@ -28,6 +28,8 @@ Pre-bundling them to speed up dev server page load...(将预构建它们以提
2828
2929 通过预构建 ` lodash-es ` 成为一个模块,我们就只需要一个 HTTP 请求了!
3030
31+ 请注意,这只会应用在开发模式下。
32+
3133## 自动依赖搜寻 {#automatic-dependency-discovery}
3234
3335如果没有找到相应的缓存,Vite 将抓取你的源码,并自动寻找引入的依赖项(即 "bare import",表示期望从 ` node_modules ` 解析),并将这些依赖项作为预构建包的入口点。预构建通过 ` esbuild ` 执行,所以它通常非常快。
@@ -38,9 +40,25 @@ Pre-bundling them to speed up dev server page load...(将预构建它们以提
3840
3941在一个 monorepo 启动中,该仓库中的某个依赖可能会成为另一个包的依赖。Vite 会自动侦测没有从 ` node_modules ` 解析的依赖项,并将链接的依赖视为源码。它不会尝试打包被链接的依赖,而是会分析被链接依赖的依赖列表。
4042
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 ` 来修复它。
4462:::
4563
4664## 自定义行为 {#customizing-the-behavior}
Original file line number Diff line number Diff line change @@ -298,6 +298,22 @@ const modules = {
298298}
299299```
300300
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+
301317请注意:
302318
303319- 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
You can’t perform that action at this time.
0 commit comments