优化 pnpm 工作空间，让前端（frontend）和后端（backend）项目实现 更高效的共享、构建和部署

1. 共享 TypeScript 类型

✅ 避免前后端重复定义数据结构

✅ 创建一个 shared 目录存放公共类型

✅ 让 frontend 和 backend 都可以引用 shared

在 pnpm-workspace.yaml 里添加：

yaml

packages:
  - frontend
  - backend
  - shared

在需要的位置引用：import { User } from "@my-project/shared";

2. 统一管理 .env 配置

✅ 避免前后端环境变量管理混乱 ✅ 使用 dotenv 让 frontend 和 backend 共用 .env 文件

在根目录创建 .env：

 

API_URL=http://localhost:3000
DB_HOST=postgres://user:password@localhost:5432/mydb

✅ 前端使用：

ts

const apiUrl = process.env.API_URL;

✅ 后端使用：

go

os.Getenv("DB_HOST")

📌 这样环境变量统一管理，前后端不会出现配置错乱问题！

 

3. 统一运行命令

✅ 让 frontend 和 backend 在同一个命令里启动 ✅ 使用 pnpm 执行多个服务

在 package.json 里添加：

json

"scripts": {
  "dev": "pnpm --parallel dev --filter frontend --filter backend"
}

然后运行：

sh

pnpm run dev

✅ 这样可以同时启动 frontend 和 backend，避免手动启动多个服务！

 

4. 使用 Docker 容器化

✅ 让 pnpm 工作空间和 PostgreSQL 轻松运行在容器中 ✅ 确保不同环境（本地、生产）一致

创建 docker-compose.yml：

yaml

version: "3.8"
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend
  backend:
    build: ./backend
    ports:
      - "4000:4000"
    depends_on:
      - postgres
  postgres:
    image: postgres:latest
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: mydb
    ports:
      - "5432:5432"

然后运行：

sh

docker-compose up -d

✅ 这样可以让前端 + 后端 + 数据库一起运行，方便本地和生产部署！

 

5. 代码自动格式化 & 规范

✅ 让前后端的代码风格保持一致 ✅ 使用 ESLint + Prettier 自动格式化代码

在 shared/eslint-config.js：

js

module.exports = {
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
};