Vite HMR 无法与 monorepo 包一起使用

Question

我正在使用 npm 工作区开发一个 monorepo 项目，其结构如下：

monorepo/
   apps/web - (Vite React app)
   packages/ui - (React components built with tsc, no bundler)

web vite.config.ts

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  optimizeDeps: {
    exclude: ["@monorepo/ui"],
  },
  define: {
    "process.env": {},
  },
});

ui包的package.json：

{
  "name": "@monorepo/ui",
  "type": "module",
  "scripts": {
    "dev": "tsc --watch",
    "build": "tsc"
  },
  "exports": {
    "./button": {
      "default": "./dist/button.js",
      "types": "./src/button.tsx"
    },
    ...
 }

// home.page.ts of web app 
import { Button } from "@monorepo/ui/button";

当我对 ui 包中的 Button 进行更改时，整个页面重新加载发生在 Web 应用程序中，有什么方法可以使其改为 HMR ???

Answer 1

根据docs，请尝试添加

  server: {
    watch: {
      ignored: ['!**/packages/ui/**']
    }
  }

前往 vite.config.ts