Monorepo中如何在本地npm包内引用另一本地React/TypeScript包

推荐目录结构 #

完全满足Grid和App解耦的要求，结构如下：

your-monorepo-root/
├── packages/
│   ├── grid/                  # 完全独立的Grid包，可单独抽取发布
│   │   ├── src/
│   │   │   ├── components/    # 存放.tsx组件文件
│   │   │   ├── styles/        # 存放独立css文件
│   │   │   └── index.ts       # 统一导出类型、组件、工具函数
│   │   ├── package.json
│   │   └── tsconfig.json
│   └── app/                   # 业务App包
│       ├── src/
│       ├── package.json
│       ├── tsconfig.json
│       └── webpack.config.js
└── package.json               # Monorepo根配置

跨平台实现步骤（兼容Mac/Linux/Windows，无需手动创建软链接） #

直接使用包管理器原生的Workspace功能，自动处理跨平台软链接逻辑，避免手动创建软链接带来的系统兼容问题：

1. 配置Monorepo依赖关联 #

在根目录的package.json中添加Workspace配置：

{
  "name": "your-monorepo",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

修改Grid包的package.json，设置包名（可自定义命名空间）：

{
  "name": "@your-project/grid",
  "version": "1.0.0",
  "main": "./src/index.ts",
  "types": "./src/index.ts",
  "dependencies": {}
}

在App包的package.json中添加Grid依赖：

{
  "dependencies": {
    "@your-project/grid": "*"
  }
}

在根目录执行npm install（或yarn/pnpm install），包管理器会自动在App的node_modules中生成跨平台兼容的链接指向本地Grid包，无需手动处理软链接。

2. 配置webpack监听Grid文件变更 #

默认webpack只会监听App目录下的文件，修改App的webpack.config.js，将Grid源码加入监听范围：

module.exports = {
  // 其余原有配置保持不变
  watchOptions: {
    // 排除其他node_modules文件，仅监听Grid的src目录
    ignored: /node_modules(?!\/@your-project\/grid\/src)/,
    poll: 1000 // Windows环境建议开启，避免文件系统监听失效
  }
}

配置完成后，修改Grid的tsx、css文件保存后，webpack会自动检测变更并触发重编译。

3. 配置TypeScript保证类型正常导入 #

修改App的tsconfig.json，添加路径别名：

{
  "compilerOptions": {
    // 其余原有配置保持不变
    "baseUrl": ".",
    "paths": {
      "@your-project/grid": ["../grid/src/index.ts"],
      "@your-project/grid/*": ["../grid/src/*"]
    }
  }
}

同时确保Grid包的tsconfig.json开启declaration: true配置自动生成类型声明文件，即可在App中正常导入Grid的类型、组件、函数，无类型报错。

方案验证 #

• Grid包完全独立，可随时单独抽取发布，和App无耦合
• 开发时修改Grid文件保存后，App自动热更新无需额外操作
• 类型提示、导入逻辑完全正常，兼容三类操作系统

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