在 Prosopo，我们使用 Vite 构建应用程序。我们有一个包含多个相互依赖的包的单体仓库结构。当我们对 Vite 项目所依赖的包进行更改时，Vite 不会自动重新构建本地包依赖项，因为它位于模块图之外。本文解释了如何让 Vite 在 NPM 工作区中重新构建本地依赖。
NPM 工作区结构
类似于 这个问题，引用 Yarn 工作区，我们有以下 npm 工作区结构：
package.json // 工作区根
packages
package-a (@prosopo/a)
dist // 构建的 JS
src
package.json
tsconfig.json
package-b (@prosopo/b)
dist
src
package.json
tsconfig.json
package-c (@prosopo/c)
dist
src
package.json
tsconfig.json
...
这些包在工作区根 package JSON 中如下引用：
{
"workspaces": [
"packages/*",
],
}
以这个例子来说，假设 @prosopo/c 依赖于 @prosopo/b，而 @prosopo/b 依赖于 @prosopo/a。它们通过各自 tsconfig.json 文件中的 references 字段链接。
在 @prosopo/c tsconfig.json 中，references 看起来像这样：
"references": [
{
"path": "../package-b"
}
]
每个包在其 package.json 中都有自己的构建命令。
{
"build": "tsc --build --verbose tsconfig.json",
}
tsc 命令同时构建类型和 JS，这对于使用本地包进行开发时的导入至关重要。
注意
Vite 不构建类型。要构建类型，您可以：
- 使用
tsc - 添加一个构建 TypeScript 类型的 Vite 插件，例如 vite-plugin-dts。
- 向 VitePluginWatchExternal 添加一个 esBuild 插件 以构建类型。
对于本演示，我们将假设类型已经被构建，我们只关心按需构建 JavaScript。
Vite Serve 命令
@prosopo/c 是一个 Web 应用程序，例如，一个 React 应用程序。我们使用以下命令在 package-c 文件夹内运行 @prosopo/c：
> npx vite serve --mode=development --config vite.config.ts
VITE v5.2.9 准备就绪，耗时 646 毫秒
➜ 本地: http://localhost:5173/
➜ 网络: 使用 --host 公开
➜ 按 h + enter 显示帮助
问题
不幸的是，上述 Vite 命令不识别本地工作区依赖项作为项目的一部分。当我们对 @prosopo/a 或 @prosopo/b 进行更改时，Vite 不会重新构建它们。这意味着我们必须每次更改它们时手动构建这些包。
这些包没有被添加到 Vite 模块图中，因此它们没有被监视以检测更改。这是因为这些包被符号链接到 node_modules 文件夹中，而 Vite 默认不跟踪符号链接。Yarn 工作区问题的答案是在 Vite 配置中将 preserveSymlinks 设置为 true。然而，这对我们不起作用。
那么，我们如何让 @prosopo/c vite serve 命令在更改时重新构建 @prosopo/a 和 @prosopo/b 呢？
解决方案
解决方案的第一部分是创建一个 Vite 插件，在 buildStart 事件上将文件添加到监视列表。
type FilePath = string
type ExternalFiles = Record<FilePath, TsConfigPath> // 将文件路径映射到 tsconfig 路径
export const vitePluginWatchExternal = async (config: VitePluginWatchExternalOptions): Promise<Plugin<any>> => {
// 一个辅助函数，接受工作区根并获取所有本地包文件
const externalFiles: ExternalFiles = await getExternalFileLists(config.workspaceRoot, config.fileTypes || FILE_TYPES)
return {
name: 'vite-plugin-watch-external',
async buildStart() {
Object.keys(externalFiles).map((file) => {
this.addWatchFile(file)
})
},
...
}
}
然而，这并不足以让 Vite 重新构建这些文件。通过向模块图之外添加文件，Vite 将在它们更改时简单地返回一个 no modules matched 消息。这是因为这些文件不是模块图的一部分。
我们需要再进一步，监听 handleHotUpdate 事件。当文件更改并且 Vite 即将将更新发送到客户端时，将触发此事件。我们可以使用这个事件使用 esbuild 重新构建我们新监视的文件，esbuild 是 Vite 的默认打包器。
export const vitePluginWatchExternal = async (config: VitePluginWatchExternalOptions): Promise<Plugin<any>> => {
// 一个辅助函数，接受工作区根并获取所有本地包文件
const externalFiles: ExternalFiles = await getExternalFileLists(config.workspaceRoot, config.fileTypes || FILE_TYPES)
return {
...
async handleHotUpdate({ file, server }) {
// 我们之前定义的 externalFiles 对象，在插件创建时设置
const tsconfigPath = externalFiles[file]
if (!tsconfigPath) {
log(`tsconfigPath 未找到文件 ${file}`)
return
}
// 辅助函数加载与文件关联的 tsconfig
const tsconfig = getTsConfigFollowExtends(tsconfigPath)
// 辅助函数获取文件扩展名和加载器
const fileExtension = path.extname(file)
const loader = getLoader(fileExtension)
// 辅助函数获取文件的 outdir 和 outfile
const outdir = getOutDir(file, tsconfig)
const outfile = getOutFile(outdir, file, fileExtension)
// 使用加载的 tsconfig 和上述派生的正确的文件路径和文件扩展名，使用 esbuild 构建结果
const buildResult = await build({
tsconfig: tsconfigPath,
stdin: {
contents: fs.readFileSync(file, 'utf8'),
loader,
resolveDir: path.dirname(file),
},
outfile,
platform: config.format === 'cjs' ? 'node' : 'neutral',
format: config.format || 'esm',
})
// 重新加载客户端
server.ws.send({
type: 'full-reload',
})
},
}
}
实际操作视频
就这样！
有了这个插件，Vite 现在将在更改时重新构建本地依赖。这在具有多个相互依赖的包的单体仓库结构中特别有用。
您可以在 我们的 Procaptcha 存储库 中查看插件的完整代码，并通过 npm 注册表 自行使用该插件。
在 Prosopo，我们一直在寻找改进开发工作流程的方法。如果您有任何建议或问题，请随时在 这里 联系我们。
122