如何在Angular项目的package.json中添加React项目作为Npm依赖

以下是Angular向React迁移场景下，将React项目作为npm依赖添加到Angular项目package.json的完整操作流程：

1. 预处理React项目，配置为可引入的npm包 #

• 打开React项目的package.json，配置基础包信息：
  • 填写自定义包名，建议用作用域包格式避免重名，比如"name": "@your-team/business-react-components"
  • 指定语义化版本号，比如"version": "1.0.0"
  • 配置入口字段，"main"指向打包后的CommonJS入口，"module"指向ES Module入口，示例："module": "dist/esm/index.js"
  • 如果使用TypeScript开发，还要配置"types": "dist/index.d.ts"指定类型声明文件入口
• 配置React项目的打包工具，将项目打包为可复用的库格式：
  • 把react、react-dom标记为外部依赖，避免打包到产物中导致Angular侧出现重复依赖冲突，比如Rollup配置里添加external: ['react', 'react-dom']
  • 执行打包命令，比如npm run build，确认dist目录生成了完整的产物文件
• 本地校验React包可用性：在React项目根目录执行npm pack生成tgz包，本地临时安装验证导出逻辑正常

2. 将React包添加到Angular项目的依赖中 #

分两种场景处理：

• 本地调试场景：
  1. 在React项目根目录执行npm link，将本地React包注册到全局npm link缓存
  2. 切换到Angular项目根目录，执行npm link [你的React包名]，执行完成后Angular的package.json会自动添加对应依赖项，版本指向本地React项目路径
• 正式使用场景：
  1. 将打包好的React包发布到公司内部npm私服（或公共npm仓库，若为开源项目）
  2. 切换到Angular项目根目录，执行npm install [你的React包名]@[对应版本号] --save，安装完成后依赖会自动写入package.json的dependencies字段

3. 后续验证与兼容处理 #

• 安装Angular侧React兼容工具，比如@angular-react/core，即可在Angular组件中直接引入并渲染React包导出的组件
• 若出现依赖版本冲突，优先对齐两个项目的公共依赖（比如react、react-dom、公共工具库）的版本号，减少运行时错误

迁移阶段建议先将非核心通用组件抽离到React包中引入，验证稳定后再逐步迁移核心业务逻辑，降低迁移风险。

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