项目工程化

# 什么项目工程化

项目工程化是指通过一系列工具和流程，将前端开发中的各个环节进行自动化和标准化，以提高开发效率、代码质量和项目可维护性。工程化通常包括以下几个方面：

# 一、代码与版本控制 (Code & Version Control)

代码管理 (Git)：基础中的基础。
代码分支管理 (Git Flow, GitHub Flow, Trunk-Based Development)：规范团队协作和发布流程的核心策略。
代码审查 (Pull/Merge Requests)：通过同行评审保证代码质量、知识共享和规范统一。

# 二、开发与构建 (Development & Build)

项目脚手架 (Create React App, Vite, Vue CLI)：一键生成标准化项目，是工程化的起点
构建工具 (Webpack, Vite, Rollup)：负责代码转换、打包、优化的核心引擎。Vite 因其极快的速度已成为新趋势。
任务运行器 (npm scripts, Gulp)：自动化执行构建、测试、部署等任务。npm scripts 因其简单易用已成为主流。
模块化开发 (ES Modules, 组件化)：设计和编码的哲学，是构建可维护大型应用的基础。
代码分割与动态导入：构建工具的高级功能，用于优化应用加载性能，是性能优化的关键。
热更新 (HMR)：开发阶段的“神器”，极大提升开发效率。

# 三、质量与规范 (Quality & Standards)

代码质量检查 (ESLint, Stylelint)：强制代码风格和发现潜在错误。
代码格式化 (Prettier)：强制统一的代码格式，与 ESLint 搭配使用。
静态类型检查 (TypeScript)：在编译时捕获错误，提供更好的编辑器支持和代码文档，大幅提升大型项目的可维护性。
自动化测试 (单元测试 Jest/Vitest, 组件测试 Testing Library, E2E 测试 Cypress/Playwright)：保证功能正确、防止回归的安全网。
代码覆盖率分析 (Istanbul/nyc)：量化测试的完备性，为测试提供数据参考。

# 四、部署与运维 (Deployment & DevOps)

持续集成/持续部署 (CI/CD) (GitHub Actions, GitLab CI/CD, Jenkins)：自动化完成测试、构建、部署流程。
环境配置 (环境变量如 .env, 配置文件)：管理不同环境（开发、测试、生产）的差异配置。
容器化 (Docker)：标准化环境，解决“在我这没问题”的经典问题，保证环境一致性。
自动化发布 (Semantic Release)：根据约定式提交（Conventional Commits）自动生成版本号和变更日志。

# 五、性能与监控 (Performance & Monitoring)

性能优化 (Lighthouse, Webpack Bundle Analyzer)：在开发和构建阶段分析并优化加载性能、运行时性能。
前端监控 (Sentry, New Relic)：线上错误追踪和性能监控，快速定位和解决线上问题。
用户行为分析 (Google Analytics, Mixpanel)：从业务角度分析用户如何使用产品。

# 六、依赖与安全 (Dependencies & Security)

包管理 (npm, Yarn, pnpm)：管理第三方库的依赖关系。pnpm 因其高效和磁盘空间优势越来越受欢迎。
依赖管理 (定期审计和更新)：使用 npm audit, Dependabot, Snyk 等工具定期检查并修复安全漏洞。

# 七、文档与设计 (Documentation & Design)

文档生成 (JSDoc, TypeDoc, Docusaurus, VuePress)：自动从代码注释生成 API 文档或项目网站。
组件文档 (Storybook)：可视化的 UI 组件库，便于开发、测试和设计协作。
设计系统集成 (Figma + Storybook)：确保设计与开发的一致性，实现从设计稿到代码的高效转换。

# 八、架构与扩展 (Architecture & Scaling)

前端微服务架构 (微前端)：将大型前端应用拆分成更小、更独立、可以并行开发的模块。框架有 qiankun, Module Federation(Webpack 5) 等。
国际化 (i18n) (i18next, react-intl)：为产品支持多语言的一套完整解决方案。

# 九、团队与协作 (Team & Collaboration)

团队协作工具 (Slack, Teams, Jira, Trello)：虽然不直接属于技术工程化范畴，但它们是支撑上述所有流程顺利运转的沟通和项目管理基础。

# 以 vue 项目配置为例

# 配置 ESLint

安装 ESLint

npm install --save-dev eslint

使用命令行配置，根据提示选择适合自己项目的选项

npx eslint --init

手动配置

注意

ESLint v9.0.0 开始，平面配置文件格式将成为默认的配置文件格式（通常配置在 .eslintrc.js 或 .eslintrc.json 文件中）迁移到新的平面配置格式（通常配置在 eslint.config.js 文件中）

v9.0.0 之后

根目录中新建.eslintrc.js文件，进行配置

module.exports = {
  root: true, // 告诉 ESLint 这是根配置文件，避免继续向上查找父目录的配置
  env: {
    node: true, // 启用 Node.js 的全局变量（如 module, require, process 等）
  },
  extends: [
    "eslint:recommended", // ESLint 推荐规则
    "@vue/typescript/recommended", // Vue + TypeScript 推荐规则
    "@vue/eslint-config-prettier", // 解决 Prettier 与 ESLint 冲突
  ],
  parserOptions: {
    ecmaVersion: 2020, // 使用 ES2020 语法
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
  // no-console: 生产环境禁止 console.log（警告），开发环境允许
  // no-debugger: 生产环境禁止 debugger（警告），开发环境允许
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

v9.0.0 版本

根目录中新建.eslint.config.js文件，进行配置

export default [
  {
    // 在这个对象里配置规则，默认对所有 JS 文件生效
    rules: {
      semi: "error", // 要求使用分号
      // 'prefer-const': 'error', // 建议使用 const
    },
  },
];

1
2
3
4
5
6
7
8
9

根目录中新建.eslintignore文件，eslint 忽略文件

# 依赖目录
node_modules/
*/node_modules/*
**/node_modules/**

# 构建输出目录
dist/
build/
*.min.js

# 日志文件
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 运行时数据
pids
*.pid
*.seed
*.pid.lock

# 覆盖率目录
coverage/
.nyc_output/

# 缓存目录
.npm
.eslintcache
.nuxt/
.next/

# 环境变量文件
.env
.env.local
.env.*.local

# IDE/编辑器目录
.vscode/
.idea/
*.swp
*.swo

# 操作系统生成文件
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# 测试快照
__snapshots__/

# TypeScript 声明文件
*.tsbuildinfo

# Vue CLI 生成的文件
/public/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# 配置 Prettier

安装 Prettier

npm install --save-dev prettier

根目录中新建.prettierrc.json文件，进行配置

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": true
}

1
2
3
4
5
6
7
8

新建.prettierignore文件，添加忽略文件配置

# 忽略目录
node_modules/
dist/
build/
coverage/

# 忽略文件
package-lock.json
yarn.lock
*.min.js
*.min.css

# 忽略特定文件

1
2
3
4
5
6
7
8
9
10
11
12
13

# 配置 `Husky`

安装

npm install --save-dev husky

启用 Git 钩子

npx husky init

安装 lint-staged（用于 pre-commit 检查）

npm install --save-dev lint-staged

在package.json中配置lint-staged

{
  "scripts": {
    "prepare": "husky",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": ["eslint --fix", "prettier --write"],
    "*.{json,md,css,scss}": ["prettier --write"]
  }
}

1
2
3
4
5
6
7
8
9
10

安装 commitlint（用于 commit-msg 检查）

npm install --save-dev @commitlint/cli @commitlint/config-conventional

根目录创建 commitlint.config.js 配置文件

export default {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "feat", // 新功能
        "fix", // 修复bug
        "docs", // 文档变更
        "style", // 代码格式调整
        "refactor", // 代码重构
        "test", // 测试用例
        "chore", // 构建过程或辅助工具变更
        "revert", // 回退代码
        "perf", // 性能优化
      ],
    ],
    "subject-case": [0], // 不限制subject的大小写
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

添加pre-commit钩子

echo "npm test" > .husky/pre-commit

输入指令

#!/usr/bin/env sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

1
2
3
4

添加commit-msg钩子

echo "npm test" > .husky/commit-msg