如何实现Vite对Vue项目共享包的实时变更检测？

以下是几种可行的解决办法，按需选择：

1. 配置Vite排除预构建并监听共享包路径 #

Vite默认会预构建第三方依赖，导致无法感知本地共享包的实时变更，通过以下配置解决：

• 在项目的vite.config.js中，添加optimizeDeps.exclude排除共享包，避免被预构建：

export default {
  optimizeDeps: {
    exclude: ['@your/shared-package'] // 替换为你的共享包名称
  }
}

• 配置server.watch让Vite监听共享包的文件目录：

export default {
  server: {
    watch: {
      include: ['../path/to/shared-package/**'] // 替换为共享包的本地路径
    }
  }
}

• 如果使用npm link/yarn link关联共享包，额外配置resolve.dedupe避免重复打包：

export default {
  resolve: {
    dedupe: ['@your/shared-package']
  }
}

2. 使用Monorepo工作区（推荐） #

如果你的项目和共享包属于同一Monorepo，直接用npm/pnpm/yarn的工作区功能，Vite会自动监听本地包的变更：

• 在根目录的package.json中定义工作区范围：

{
  "workspaces": [
    "packages/shared-package", // 共享包路径
    "projects/vue-project" // 你的Vue项目路径
  ]
}

• 在Vue项目中安装共享包时，直接关联本地工作区版本：

pnpm add @your/shared-package --workspace
# 或者 npm install @your/shared-package

3. 修改共享包的打包配置，开启实时构建 #

如果共享包需要先打包再被引用，调整其打包工具配置，开启监听并输出ES模块：
以共享包使用Vite打包为例，修改vite.config.js：

export default {
  build: {
    watch: {}, // 开启监听，文件变更时自动重新打包
    lib: {
      entry: 'src/index.js',
      name: 'SharedPackage',
      formats: ['es'] // 输出ES模块，便于Vite处理
    }
  }
}

同时在Vue项目的vite.config.js中监听共享包的打包输出目录，确保变更能被感知。

4. 用nodemon触发Vite重启 #

如果上述方法都不适用，可以用nodemon监听共享包变更，自动重启Vite：

• 安装nodemon：

npm install -D nodemon

• 在项目的package.json中更新开发脚本：

"scripts": {
  "dev": "nodemon --watch ../path/to/shared-package --exec vite"
}

共享包文件变更时，nodemon会重启Vite，从而加载最新的共享包代码。

内容的提问来源于stack exchange，提问作者JacquesB