如何动态修改node_modules中的组件并实时预览效果？

1. 合并为Monorepo管理（最推荐） #

把组件库和Component Playground放到同一个monorepo下，用pnpm、Yarn Workspaces或npm Workspaces管理，能彻底解决本地依赖联动的问题：

• 调整目录结构：

  monorepo-root/
  ├── packages/
  │   ├── component-library/  # 原组件库仓库
  │   └── component-playground/  # 原Playground应用仓库
  └── package.json
  

• 根目录package.json配置workspaces（以pnpm为例）：

  {
    "name": "my-component-workspace",
    "private": true,
    "workspaces": ["packages/*"]
  }
  

• 在Component Playground的package.json中直接关联本地组件库：

  "dependencies": {
    "component-library": "workspace:*"
  }
  

组件库开启watch模式自动编译后，Playground的开发服务器会实时感知到组件代码变化，无需任何额外操作。

2. 本地编译产物直接引用 #

如果不想合并仓库，让组件库实时编译到本地目录，再让Playground直接指向该目录：

• 配置组件库的构建工具（Webpack/Vite/Rollup）开启watch模式，输出目录固定为./dist。
• 修改Component Playground的package.json依赖：

  "dependencies": {
    "component-library": "file:../component-library/dist"
  }
  

• 或者用构建工具别名绕过npm依赖解析（以Vite为例），在vite.config.js中添加：

  export default {
    resolve: {
      alias: {
        'component-library': '../component-library/dist/index.js'
      }
    }
  }
  

注意：组件库的输出格式要和Playground的模块系统一致（比如都用ES模块），否则会出现解析错误。

3. 修正本地链接的配置问题 #

之前用yarn/npm/yalc没生效，大概率是没配合watch编译或者缓存问题：

• 组件库先开启watch模式，确保代码修改后自动重新编译。
• 用pnpm链接试试（兼容性更好）：
  1. 组件库目录执行：pnpm link --global
  2. Playground目录执行：pnpm link --global component-library
• 如果还是有缓存问题，重启Playground的开发服务器，或者在构建工具中禁用缓存（比如Webpack设置cache: false）。

避坑提示 #

• 必须确保组件库开启watch编译，否则代码修改后不会同步到依赖方。
• 避免组件库和Playground使用差异过大的Node版本或包管理器，可能导致依赖解析异常。
• 如果用TypeScript，要确保组件库的tsconfig.json设置了declaration: true，Playground才能正确识别类型定义。

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