能否使用npm link关联React组件？多项目依赖配置咨询

当然可以！用npm link完全能实现你的需求，我之前也用这种方式关联过两个create-react-app项目，步骤其实挺清晰的，给你一步步拆解：

首先得把UI项目做成本地可引用的npm包，还要解决React重复加载的问题（这是CRA项目link最容易踩的坑）：

• 先在UI项目的根目录执行npm link，这会把你的UI库注册到本地npm环境里，相当于把它变成一个本地可用的依赖包。
• 打开UI项目的package.json，添加peerDependencies配置，告诉npm这个库依赖主项目的React，不要自己再装一份：

  "peerDependencies": {
    "react": "^18.x.x",
    "react-dom": "^18.x.x"
  }
  

  版本号改成你实际使用的React版本就行，然后运行npm install让配置生效。
• 为了彻底避免React重复加载，切换到UI项目目录，执行npm link ../主项目路径/node_modules/react（把路径换成你主项目的实际路径），这样UI项目就会直接使用主项目的React实例。

• 切换到主项目的根目录，执行npm link UI（这里的UI是你UI项目package.json里的name字段值，一定要完全对应！）
• 现在你就可以像预想的那样轻松导入组件了：

  import { CustomButton } from 'UI'
  
  function App() {
    return <CustomButton>点击我</CustomButton>
  }
  

• Hooks报错/组件无法正常渲染：90%是因为React重复加载了，检查peerDependencies配置是否正确，以及有没有关联主项目的React。你可以在主项目里执行npm ls react，如果看到多个React实例，说明配置没做好。
• 修改UI组件后主项目不更新：CRA的热重载默认不会监测link的本地包，你可以在UI项目里执行npm run build -- --watch，让UI项目自动编译更新，主项目就能同步拿到最新的组件代码。
• 导入路径不对：确保UI项目的package.json里的main字段指向正确的入口文件。比如你可以在UI项目的src目录下建一个index.js，把所有组件导出：

  export { CustomButton } from './CustomButton'
  // 其他组件也一起导出
  

  然后把package.json的main设为src/index.js，这样导入的时候就不用写深层路径了。

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