如何在本地Vuetify应用中实现本地npm依赖Vue插件的热重载？

业务背景 #

• 内部有一组通用Vuetify组件，计划封装为名为common-components的Vue插件统一暴露，供所有内部Vuetify应用复用。目前可通过打包插件后发布至私有npm仓库、或提交代码至私有git仓库的方式完成依赖集成，但现有开发模式迭代周期长、开发体验差。
• 本地开发环境下，每次修改插件代码后常规需执行以下流程：
  • 在common-components目录下执行yarn build，生成dist/common-components.umd.js产物
  • 将构建产物部署至私有npm仓库，或将代码提交至私有git仓库
  • 在业务应用（以下称应用A）中执行yarn upgrade common-components拉取最新版本依赖
  • 重启应用A的yarn serve服务
• 希望找到更高效的开发流程，或判断当前架构是否需要进一步实现插件与业务应用的解耦。

已尝试但未落地的方案 #

yarn link/npm link #

• 已可通过该方式完成本地依赖关联，但npm依赖的入口仍指向插件目录package.json中定义的"main": "dist/common-components.umd.js"字段，导致每次修改插件后仍需执行yarn build。
• 构建过程会先删除旧的dist文件再生成新文件，此时正在运行yarn serve的应用A会直接崩溃且无法自动恢复，必须关闭服务后重启yarn serve才能恢复正常。
• 需求：找到适配该场景的完整解决方案。

完整解决方案 #

该场景完全可以实现无重启、自动热重载的开发流程，无需调整现有仓库结构，核心思路是开发环境下让业务应用直接引用common-components的源码而非打包后的dist产物，具体落地步骤如下：

1. 调整common-components的基础配置 #

• 在common-components/package.json中新增开发用入口字段，保留原有生产发布的入口配置：

  {
    "main": "dist/common-components.umd.js",
    "main:dev": "src/index.js"
  }
  

  （其中src/index.js是common-components暴露插件、注册组件的源码入口文件）
• 将vue、vuetify调整为peerDependencies，避免与业务应用重复打包导致的热更新失效、依赖冲突问题：

  {
    "peerDependencies": {
      "vue": "^2.6.14",
      "vuetify": "^2.6.0"
    }
  }
  

2. 调整业务应用的webpack/vue-cli配置 #

Vuetify项目的yarn serve通常基于vue-cli（底层webpack）启动，只需修改业务应用根目录的vue.config.js即可：

• 配置webpack别名，让开发环境下common-components直接指向源码入口，而非node_modules里的打包产物，生产构建仍使用原有npm依赖逻辑不受影响：

  const path = require('path')
  module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          ...(process.env.NODE_ENV === 'development' ? {
            'common-components': path.resolve(__dirname, '../common-components/src/index.js')
          } : {})
        }
      },
      // 确保webpack能监听到项目外的common-components源码修改
      watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 300,
        poll: 1000,
      }
    },
    // 转译common-components的源码，默认vue-cli不会处理node_modules内的依赖，本地引用源码时需要开启
    transpileDependencies: [
      'common-components'
    ]
  }
  

3. 废弃原有本地开发流程 #

• 开发环境下无需再执行common-components的yarn build、无需发布npm/git、无需在业务应用中执行yarn upgrade、无需重启yarn serve。
• 修改common-components的任意源码后，webpack会自动监听到变更，触发热重载，直接在业务应用中看到更新后的效果。

可选优化方案 #

如果长期维护多套业务应用与公共组件库，可将common-components与业务应用迁移至同一Yarn Workspaces/pnpm Monorepo结构下，无需额外配置别名即可实现依赖关联与热重载，进一步降低维护成本。

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