如何在 Vite 中使用 TypeScript React Monorepo 来实现 HMR（热模块替换）

Question

我有一个 React monorepo（用 TypeScript 构建），最近我从 Webpack 切换到了 Vite。然而，我很难让 HMR 在 Vite 中正常工作（我相信是因为我们单独构建了我们的包）。

我对实现此功能的选项持开放态度（尽管我认为我仍然需要能够构建我的包，以实现 Jest/ESLint 性能）。

项目结构

\apps
  \main
\packages
  \domainA
    \foo
      \package.json
      \build
      \src

目前，每个包都使用 tsc 构建"tsc --project tsconfig.lib.json"到build目录中。定义package.json如下：

"name": "@ig/foo",
"main": "./build/index.js",
"types": "./build/index.d.ts",
"files": [
    "/build"
],

我可以启动主应用程序，如果我进行更改，/packages/domainA/foo/src/index.ts它将构建（当前使用观察程序）并且我会重新加载整个页面。

我想消除页面重新加载并使用 HMR。不幸的是，由于其他工具的速度缓慢，我认为将入口点更改为"main": "./src/index.ts"不适用于我的用例。不过，我很乐意尝试绕过此问题，并在必要时将 Vite 重新指向源文件。

我已经尝试了各种排列，查看了一些示例存储库。但没有设法让任何东西发挥作用，例如

resolve: {
  alias: [{
    find: '@ig/foo',
    replacement: '../packages/domainA/foo/src/index.ts',
  },
}

这是我当前的 Vite 配置：

import react from '@vitejs/plugin-react';
import fs from 'fs';
import path, { resolve } from 'path';
import { defineConfig } from 'vite';
import mkcert from 'vite-plugin-mkcert';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig({
    // optimizeDeps: {
    //     include: ['@infogrid/solution-views-occupancy'],
    // },
    build: {
        outDir: 'build/public',
        sourcemap: true,
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'index.html'),
                base: resolve(__dirname, 'index_base.html'),
            },
         }
     },
     server: {
        port: Number(process.env.PORT),
        // setting to true allows external ip
        host: true,
     },
     plugins: [
        react({ fastRefresh: true }), // Primarily used for HMR
        svgrPlugin({ svgrOptions: { icon: true } }), // Turns svgs into react components
        mkcert(), // Allows for HTTPS during local development
     ]
}