ZhenYu's 知识库

外观

工程设计

约 886 字大约 3 分钟

工程设计前端工程化

2026-04-15

概述

前端工程化是现代前端开发的核心，通过系统化、流程化的方法提高开发效率、保证代码质量、降低维护成本。

工程设计简介

什么是工程设计

工程设计是将需求转化为可执行方案的过程，包括：

  • 技术选型
  • 架构设计
  • 流程规范
  • 工具链建设

前端工程化的核心目标

目标说明
开发效率自动化构建、 热更新、 脚手架
代码质量ESLint、 Prettier、 测试覆盖
团队协作统一规范、 Code Review、 CI/CD
性能优化构建优化、 懒加载、 缓存策略
可维护性模块化、 组件化、 类型系统

工程结构范式

1. Monorepo 单仓库管理

所有项目放在同一个仓库中：

my-monorepo/
├── packages/
│   ├── shared-utils/      # 共享工具库
│   ├── ui-components/    # 公共组件库
│   ├── app-web/          # Web 应用
│   └── app-mobile/       # 移动端应用
├── tools/                # 构建工具
├── configs/              # 共享配置
└── package.json

优点：代码复用方便、 版本统一、 依赖管理简单 缺点：仓库体积膨胀、 权限管理复杂

2. Polyrepo 多仓库管理

每个项目独立仓库：

├── repo-web/
├── repo-mobile/
├── repo-components/
└── repo-shared/

优点：职责清晰、 权限隔离、 独立部署 缺点：依赖版本不一致、 跨项目修改困难

3. 目录结构最佳实践

Vue 项目结构

src/
├── assets/              # 静态资源
├── components/          # 公共组件
│   ├── base/           # 基础组件
│   └── business/       # 业务组件
├── composables/         # 组合式函数
├── directives/         # 自定义指令
├── layouts/            # 布局组件
├── router/             # 路由配置
├── stores/             # 状态管理
├── styles/             # 全局样式
├── utils/              # 工具函数
├── views/              # 页面组件
├── App.vue
└── main.ts

React 项目结构

src/
├── assets/              # 静态资源
├── components/          # 组件
│   ├── common/          # 通用组件
│   └── features/        # 特性组件
├── hooks/               # 自定义 Hooks
├── layouts/             # 布局组件
├── pages/               # 页面组件
├── services/            # API 服务
├── store/               # 状态管理
├── styles/              # 全局样式
├── types/                # 类型定义
├── utils/               # 工具函数
├── App.tsx
└── main.tsx

4. 特性目录 vs 类型目录

按类型组织（传统）

src/
├── components/
│   ├── Button/
│   ├── Modal/
│   └── Table/
├── hooks/
├── utils/
└── views/

按特性组织（推荐）

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api/
│   │   └── types/
│   ├── dashboard/
│   └── settings/
├── shared/
│   ├── components/
│   ├── hooks/
│   └── utils/
└── layouts/

按特性组织的优点：

  • 高内聚，相关代码放一起
  • 易于提取和复用
  • 便于团队分工

多仓库选型

Monorepo 工具对比

工具特点适用场景
Nx功能强大、依赖图可视化大型项目
Turborepo轻量、任务调度高效中大型项目
Lerna老牌、简单易用中小型项目
PNPM Workspace磁盘效率高、兼容性好所有规模

PNPM Workspace 示例

# pnpm-workspace.yaml
packages:
  - 'packages/*'
  - 'apps/*'
// packages/shared/package.json
{
  "name": "@my/shared",
  "version": "1.0.0",
  "exports": {
    ".": "./src/index.ts",
    "./utils": "./src/utils/index.ts"
  }
}

技术选型决策树

项目规模
├── 小型（< 5人）
│   └── 单仓库 + 简单构建脚本
├── 中型（5 - 20人）
│   ├── 多人协作 → PNPM Workspace
│   └── 多项目 → Turborepo
└── 大型（> 20人）
    └── Nx + 完善的 CI/CD

规范化实践

1. 路径别名配置

// vite.config.ts
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
      '@hooks': path.resolve(__dirname, './src/hooks'),
    },
  },
});
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

2. 环境变量管理

.env                 # 默认值
.env.local           # 本地覆盖
.env.[mode]          # 特定模式
.env.[mode].local    # 特定模式本地覆盖
# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_ENABLE_ANALYTICS=true

3. 依赖版本管理

// package.json
{
  "dependencies": {
    "vue": "^3.4.0",
    "react": "~18.2.0",
    "lodash": "4.17.21"
  }
}
版本范围含义
^3.4.0兼容更新，锁定主版本
~3.4.0兼容补丁更新，锁定主次版本
3.4.0精确版本

相关资源