使用npm link关联TypeScript公共组件rd-component不生效问题排查

核心原因与解决步骤 #

多数情况是组件未自动编译、构建工具缓存或符号链接监听配置缺失导致的，按以下步骤排查：

1. 启动组件的实时编译监听
   绝大多数组件库需要将源码（如TS、Vue单文件等）编译为可执行产物后才能被项目引用。如果你的rd-component没有开启自动编译，修改源码后项目引用的旧产物不会更新：

• 若用Vite：执行 vite build --watch
• 若用Rollup：执行 rollup -c -w
• 若用Webpack：执行 webpack --watch
  确保编译后的产物路径与rd-component/package.json中main/module/exports字段指向的路径一致。

2. 禁用项目构建缓存或强制刷新
   构建工具（如Vite、Webpack）会缓存已解析的模块，即使组件文件更新，也可能读取缓存内容：

• Vite：启动开发服务时添加--force参数（vite --force），或在vite.config.js中设置cacheDir: false
• Webpack：启动时添加--no-cache参数，或在配置中禁用缓存逻辑

3. 配置构建工具监听符号链接文件
   部分工具默认不会深度监听符号链接指向的目录，需手动配置：

• Vite：在vite.config.js中添加：

  export default {
    server: {
      watch: {
        ignored: ['!**/node_modules/rd-component/**']
      }
    }
  }
  

• Webpack：确保resolve.symlinks: true（默认开启），并调整watchOptions避免忽略组件目录：

  module.exports = {
    watchOptions: {
      ignored: /node_modules\/(?!rd-component)/
    }
  }
  

4. 重启项目开发服务
   完成上述配置后，重启工作区的开发服务，确保所有配置生效并重新加载模块。

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