在TypeScript、Node.js与JavaScript项目间共享代码的正确实现方式

该方案轻量无额外复杂依赖，适配你提到的三个项目场景，配置步骤如下：

1. 整体目录结构 #

首先统一三个项目的存放路径，目录结构如下：

monorepo-root/
├── package.json          # 根项目配置
├── pnpm-workspace.yaml   # pnpm workspace 核心配置
└── packages/
    ├── shared/           # TS 共享代码包
    ├── WebClient/        # JS 开发的 React 前端应用
    └── WebServer/        # TS 开发的后端服务

2. 根目录配置 #

2.1 根 package.json 配置 #

根目录执行pnpm init生成package.json，修改内容如下：

{
  "name": "monorepo-root",
  "private": true,
  "scripts": {
    "build:shared": "pnpm --filter @project/shared build",
    "dev:server": "pnpm --filter web-server dev",
    "dev:client": "pnpm --filter web-client start"
  }
}

private: true是monorepo根项目必填配置，防止根项目被误发布。

2.2 pnpm-workspace.yaml 配置 #

根目录新建该文件，内容如下：

packages:
  - 'packages/*'

标识所有packages目录下的项目都属于当前workspace。

3. shared 共享包配置 #

进入packages/shared目录，执行pnpm init、pnpm add typescript -D完成基础初始化，修改以下配置：

3.1 package.json #

{
  "name": "@project/shared", // 自定义包名，后续其他项目通过这个名字引入
  "version": "1.0.0",
  "main": "dist/index.js", // JS 项目的引入入口
  "types": "dist/index.d.ts", // TS 项目的类型声明入口
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch" // 开发时自动编译修改的代码
  },
  "private": true
}

3.2 tsconfig.json #

shared目录新建该文件，配置如下：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "declaration": true, // 自动生成d.ts类型文件
    "outDir": "./dist", // 编译产物输出到dist目录
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

3.3 示例测试代码 #

新建src/index.ts写入测试代码：

export class HelloShared {
  static getMsg() {
    return 'Hello World from shared package'
  }
}

执行pnpm build生成dist目录的编译产物。

4. WebServer 后端项目配置 #

进入packages/WebServer目录，正常初始化TS后端项目（Express、Nest等框架都适配），只需要做两处修改：

1. package.json中添加shared依赖：

{
  "dependencies": {
    "@project/shared": "workspace:*"
  }
}

2. 代码中直接引入使用即可：

import { HelloShared } from '@project/shared'

console.log(HelloShared.getMsg()) // 可直接拿到共享代码的输出

5. WebClient 前端项目配置 #

进入packages/WebClient目录，正常初始化JS版React项目（比如CRA创建），修改两处配置：

1. package.json中添加shared依赖：

{
  "dependencies": {
    "@project/shared": "workspace:*"
  }
}

2. 代码中直接引入使用即可：

import { HelloShared } from '@project/shared'

function App() {
  return <div>{HelloShared.getMsg()}</div>
}
export default App

6. 开发流程 #

1. 根目录执行pnpm install，自动安装所有项目的依赖，同时自动软链共享包
2. 开发时开启一个终端执行pnpm build:shared --watch，shared代码修改后会自动编译
3. 分别开启终端执行pnpm dev:server和pnpm dev:client启动前后端项目即可

按照上述步骤配置即可快速搭建出包含三个HelloWorld项目的可运行monorepo，无需额外复杂工具。

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