如何在引用的TypeScript共享项目中复用依赖包？

一、针对当前结构的可行配置方案 #

1. 修复TypeScript类型与模块解析问题 #

在WebAppProject的tsconfig.json中添加以下配置，让TS能找到SharedProject里的lodash模块和类型定义：

{
  "compilerOptions": {
    // 保留原有配置...
    "paths": {
      "lodash": ["../SharedProject/node_modules/lodash"]
    },
    "typeRoots": [
      "../SharedProject/node_modules/@types",
      "./node_modules/@types"
    ]
  }
}

• paths指定TS解析lodash模块时直接指向SharedProject的依赖路径
• typeRoots让TS优先读取SharedProject里的@types类型文件，解决无类型提示的问题

2. 配置Webpack避免重复打包 #

修改WebAppProject的webpack.config.js，强制webpack复用SharedProject的lodash：

const path = require('path');

module.exports = {
  // 保留原有配置...
  resolve: {
    alias: {
      'lodash': path.resolve(__dirname, '../SharedProject/node_modules/lodash')
    },
    modules: [
      path.resolve(__dirname, '../SharedProject/node_modules'),
      'node_modules'
    ]
  }
};

• alias直接映射lodash到SharedProject的依赖文件
• modules让webpack优先从SharedProject的node_modules查找依赖，避免重复打包

3. 验证效果 #

配置完成后，直接在WebAppProject的TS文件里写import * as _ from "lodash"，既不会报TS2307错误，也能获得完整的类型提示，webpack打包后lodash只会被嵌入一次。

二、更优的长期项目管理方式 #

上述配置可行，但长期维护容易受路径变动影响，推荐以下两种更规范的方式：

1. 使用npm link本地链接共享项目 #

• 在SharedProject目录执行：npm link，将该项目注册为本地npm包
• 在WebAppProject目录执行：npm link [shared-project-name]（替换成SharedProject的package.json里的name字段）
• 此时WebAppProject可像引用普通npm包一样调用SharedProject的模块，同时自动复用其依赖；建议在SharedProject的package.json里把lodash声明为peerDependencies，明确依赖关系

2. 采用Monorepo管理（推荐） #

将SharedProject和WebAppProject纳入同一个Monorepo，用pnpm workspace、npm workspace或Lerna管理：

• 根目录创建package.json，配置工作区：

{
  "name": "web-app-monorepo",
  "workspaces": [
    "./SharedProject",
    "./WebAppProject"
  ]
}

• 用pnpm安装依赖，工具会自动在根目录创建共享的node_modules，彻底避免重复安装，TS和webpack也能自动解析共享依赖，适合多项目长期协作维护

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