前端工程化：系统化的开发与管理

前端工程化指的是用软件工程的思维和工具来提升前端项目的开发效率、代码质量和可维护性。工程化的目标是让前端开发更加规范化、模块化、自动化、体系化。

1. 前端工程化的核心目标

✅解决的问题

1. 开发效率低：没有代码规范，代码风格混乱，团队协作困难
2. 代码质量差：每天没有检测工具，代码逻辑混乱，容易出现bug
3. 项目维护困难：代码结构不清晰，缺乏文档，难以扩展
4. 性能问题：资源加载慢，包体积大，影响用户体验
5. 上线流程混乱：手动构建，手动部署，容易出错

✅工程化核心目的

1. 代码规范化：统一代码风格，减少低级错误
2. 开发模块：拆分独立组件，提高可维护性
3. 构建自动化：使用Webpack、vite进行构建优化
4. 质量保障：代码校验（eslink）、单元测试（Jest）
5. 自动化部署：CL/CD、Dorck、一键发布

2. 代码规范化

目标：统一团队代码风格，减少人为失误，提高可读性

🔹 代码风格 & 规范

1. ESLint + Prettier：统一 JavaScript/TypeScript 代码风格
2. Stylelint：约束 CSS
3. 代码风格 Husky + Commitlint：Git 提交规范化

✅ 实践：配置 ESLint + Prettier

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier -D

📌 .eslintrc.js 配置：

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

📌 .prettierrc 配置：

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

✅ 实践：Git 提交规范化

npx husky-init && npm install
npx husky add .husky/pre-commit "npm run lint"

这样，每次 git commit 之前都会自动进行代码格式化和检查。

3. 模块化开发

目标：拆分功能模块，提高复用性，减少耦合

🔹 组件化

1. Vue 组件（单文件组件 SFC）
2. React 组件（Hooks + 组合式开发）

📌 Vue 组件示例：

<template>
  <button @click="handleClick">{{ text }}</button>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

defineProps({ text: String })
const emit = defineEmits(['click'])

const handleClick = () => emit('click')
</script>

🔹 业务模块化

📌 目录结构

/src
  ├── components  # 组件
  ├── utils       # 工具函数
  ├── services    # API 请求
  ├── store       # 状态管理
  ├── views       # 业务页面

这样可以确保代码清晰、易维护。

4. 构建优化

目标：提高项目打包效率，减少资源体积，加快加载速度

🔹 Webpack & Vite

1. Tree Shaking（去除无用代码）
2. Code Splitting（代码分割）
3. Lazy Loading（按需加载）
4. CDN加速（减少服务器压力）

✅ 实践：优化 Webpack

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 代码分割
    },
  },
};

✅ 实践：Vite 预构建

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

这样可以优化性能，减少首屏加载时间。

5. 代码质量保障

目标：提前发现问题，减少生产环境 bug

🔹 单元测试

1. Jest：测试 JavaScript 代码
2. Vue Test Utils / React Testing Library：测试 UI组件
3. Cypress：端到端自动化测试

✅ 实践：使用 Jest 测试函数

npm install jest -D

📌 sum.js：

export function sum(a, b) {
  return a + b;
}

📌 sum.test.js：

import { sum } from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

npm test

这样可以保证代码质量，避免出现低级错误。

6. 自动化部署

目标：减少手动操作，提高上线效率

🔹 CI/CD

1. GitHub Actions（自动化构建 & 部署）
2. Jenkins（大公司常用 CI/CD）
3. Docker（容器化部署）

✅ 实践：GitHub Actions 自动部署 Vue3 📌 .github/workflows/deploy.yml

name: Deploy Vue3 App

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2

      - name: Install Dependencies
        run: npm install

      - name: Build Project
        run: npm run build

      - name: Deploy to Server
        run: scp -r dist/* user@yourserver:/path/to/nginx\

这样，每次 git push，代码会自动构建 & 部署！

7. 总结