如何在 monorepo 中实时重新加载本地 npm 包？

Question

我正在为 Vue 3（vite + ts）、云函数和共享库（共享函数和 ts 接口等）设置一个 monorepo 工作区。

我可以导入本地共享库文件夹来工作。我通过在我的共享库上执行 npm run build -- -- watch 来在我的前端项目中进行实时类型检查。

然而由于某种原因，除非我卸载然后安装共享库包，否则转换为 Javascript 的所有内容都不会更新。

例如：在共享库中创建 const 并不能使其在我导入共享库的前端/后端项目中可用。但是创建一个界面，就是这样。

我尝试了一些方法并搜索了互联网的大部分内容。我尝试使用 vite.config，因为我认为它可能会对包进行某种缓存。

现在，我的 vite.config.ts 如下所示：

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: true,
  },
  plugins: [vue()],
  resolve: {
    preserveSymlinks: true,
  },
  optimizeDeps: {
    include: ["shared-lib"],
  },
})

这是我的共享库中的index.ts：

// this is not usable / doesn't update live.
export const sharedConst = () => console.log("testing shared functionality")

// this updates live in other projects.
export interface TestInterface {
  name: {
    firstName: string
    lastName: string
  }
}

这就是我的 package.json 依赖项在前端的样子：

  "dependencies": {
    ...

    "shared-lib": "file:../backend/functions/dist/shared-lib"
  },

我将共享库构建到云函数的 dist 文件夹中，以便在上传时将其打包。Vue/vite 并不关心它的包驻留在哪里。

Answer 1

不确定您是否仍然需要这个问题的答案，但几个小时后，我已经设法让我的共享库适用于我的 Vue/Vite 项目。

我确保我的共享库是作为 ESM 而不是 CJS 构建的。

tsconfig.json：

{
    "compilerOptions": {
        "module": "ES2020",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true
        ...
    }
}

包.json：

{
    "type": "module"
    ...
}

然后，您可以将模块添加到optimizeDeps.exclude，如下所述： https: //vitejs.dev/config/server-options.html#server-watch。这可以防止预构建共享库，并且在不强制手动重建的情况下不重建共享库。

我已设置 vite.config.js 如下：

{
    server: {
        watch: {
            usePolling: true, // For Docker.
            ignored: ['!**/node_modules/shared-lib/**'],
        },
    },
    optimizeDeps: {
        exclude: ['shared-lib']
    },
    ...
}

对于我来说，要使其正常工作，将resolve.preserveSymlinks 和 server.watch.followSymlinks 保留为默认值非常重要。

最后，在共享库上以监视模式 (--watch) 运行 tsc 很重要，以确保源代码在编辑时得到重新编译：

使用此设置，我可以让我的 Vue/Vite 项目热重新加载对共享库的更改。