前端工程化与构建工具

Li JiaXin大约 11 分钟

前端工程化与构建工具

如果说前端框架和组件库是"食材"，那么前端工程化就是"厨房设备"——让你能够高效、规范、自动化地"烹饪"出美味的前端应用。前端工程化就像是软件开发的"流水线"，通过工具和流程的标准化，让团队协作更顺畅，代码质量更可靠，部署更自动化。作为测试开发工程师，掌握前端工程化就像拥有了"自动化测试平台"，能让开发效率翻倍！

一、前端工程化概述：从手工作坊到智能工厂

什么是前端工程化？

前端工程化是指通过工具、流程和规范，将前端开发从"手工作坊"模式升级为"现代化工厂"模式：

开发效率：自动化重复性工作
代码质量：统一代码规范和质量检查
团队协作：标准化的开发流程
部署运维：自动化构建和部署

前端工程化的核心要素

前端工程化体系
├── 开发环境
│   ├── 脚手架工具 (Create React App, Vue CLI)
│   ├── 开发服务器 (热重载、代理)
│   └── 调试工具 (Source Map, DevTools)
├── 构建工具
│   ├── 打包工具 (Webpack, Vite, Rollup)
│   ├── 编译工具 (Babel, TypeScript)
│   └── 优化工具 (压缩、分包、缓存)
├── 代码质量
│   ├── 代码规范 (ESLint, Prettier)
│   ├── 类型检查 (TypeScript, Flow)
│   └── 测试工具 (Jest, Cypress)
└── 部署运维
    ├── CI/CD (GitHub Actions, Jenkins)
    ├── 容器化 (Docker)
    └── 监控告警 (Sentry, 性能监控)

二、构建工具对比：选择合适的"引擎"

主流构建工具对比

工具	特点	适用场景	学习难度	构建速度
Webpack	功能强大、生态丰富	大型项目、复杂配置	⭐⭐⭐⭐	⭐⭐
Vite	快速启动、现代化	现代项目、快速开发	⭐⭐	⭐⭐⭐⭐⭐
Rollup	体积小、ES模块	库开发、简单应用	⭐⭐⭐	⭐⭐⭐
Parcel	零配置、开箱即用	小型项目、快速原型	⭐	⭐⭐⭐⭐

三、Vite：现代化构建工具的明星

Vite简介

Vite（法语"快速"）是由Vue.js作者尤雨溪开发的新一代前端构建工具，特点是：

极速启动：基于ES模块的开发服务器
热更新：毫秒级的模块热替换
现代化：原生支持TypeScript、JSX、CSS预处理器
插件生态：丰富的插件系统

快速开始

# 创建Vite项目
npm create vite@latest my-test-platform -- --template react-ts
cd my-test-platform
npm install
npm run dev

# 或者使用Vue模板
npm create vite@latest my-test-platform -- --template vue-ts

Vite配置详解

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'

export default defineConfig({
  // 插件配置
  plugins: [react()],
  
  // 开发服务器配置
  server: {
    port: 3000,
    open: true, // 自动打开浏览器
    cors: true, // 允许跨域
    proxy: {
      // 代理API请求
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  
  // 路径别名
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@utils': resolve(__dirname, 'src/utils'),
      '@api': resolve(__dirname, 'src/api')
    }
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: true, // 生成source map
    minify: 'terser', // 压缩方式
    rollupOptions: {
      output: {
        // 分包策略
        manualChunks: {
          vendor: ['react', 'react-dom'],
          antd: ['antd'],
          utils: ['lodash', 'dayjs']
        }
      }
    },
    // 构建目标
    target: 'es2015',
    // 资源内联阈值
    assetsInlineLimit: 4096
  },
  
  // CSS配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    },
    modules: {
      // CSS模块化配置
      localsConvention: 'camelCase'
    }
  },
  
  // 环境变量
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version)
  }
})

常用Vite插件

// 完整的Vite配置示例
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'

// 插件导入
import legacy from '@vitejs/plugin-legacy' // 兼容旧浏览器
import { visualizer } from 'rollup-plugin-visualizer' // 打包分析
import viteCompression from 'vite-plugin-compression' // Gzip压缩
import { createHtmlPlugin } from 'vite-plugin-html' // HTML模板
import eslint from 'vite-plugin-eslint' // ESLint集成

export default defineConfig({
  plugins: [
    // React支持
    react(),
    
    // ESLint检查
    eslint({
      include: ['src/**/*.{js,jsx,ts,tsx}'],
      exclude: ['node_modules']
    }),
    
    // HTML模板处理
    createHtmlPlugin({
      inject: {
        data: {
          title: '测试平台',
          description: '企业级测试管理平台'
        }
      }
    }),
    
    // 兼容旧浏览器
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    
    // Gzip压缩
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz'
    }),
    
    // 打包分析
    visualizer({
      filename: 'dist/stats.html',
      open: true,
      gzipSize: true
    })
  ],
  
  // 其他配置...
})

四、项目结构设计：规范化的"建筑蓝图"

标准项目结构

test-platform/
├── public/                 # 静态资源
│   ├── favicon.ico
│   └── index.html
├── src/                    # 源代码
│   ├── api/               # API接口
│   │   ├── index.js
│   │   ├── testCase.js
│   │   └── user.js
│   ├── components/        # 通用组件
│   │   ├── common/        # 基础组件
│   │   ├── business/      # 业务组件
│   │   └── layout/        # 布局组件
│   ├── pages/             # 页面组件
│   │   ├── Dashboard/
│   │   ├── TestCase/
│   │   └── Reports/
│   ├── hooks/             # 自定义Hook
│   ├── utils/             # 工具函数
│   ├── store/             # 状态管理
│   ├── styles/            # 样式文件
│   ├── types/             # TypeScript类型定义
│   ├── constants/         # 常量定义
│   └── main.jsx          # 入口文件
├── tests/                 # 测试文件
├── docs/                  # 文档
├── scripts/               # 构建脚本
├── .env.development       # 开发环境变量
├── .env.production        # 生产环境变量
├── package.json
├── vite.config.js
├── tsconfig.json
├── .eslintrc.js
├── .prettierrc
└── README.md

环境变量管理

# .env.development
VITE_APP_TITLE=测试平台(开发环境)
VITE_API_BASE_URL=http://localhost:8080/api
VITE_ENABLE_MOCK=true
VITE_LOG_LEVEL=debug

# .env.production
VITE_APP_TITLE=测试平台
VITE_API_BASE_URL=https://api.testplatform.com
VITE_ENABLE_MOCK=false
VITE_LOG_LEVEL=error

# .env.test
VITE_APP_TITLE=测试平台(测试环境)
VITE_API_BASE_URL=http://test-api.testplatform.com
VITE_ENABLE_MOCK=false
VITE_LOG_LEVEL=warn

// src/config/index.js
export const config = {
  appTitle: import.meta.env.VITE_APP_TITLE,
  apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
  enableMock: import.meta.env.VITE_ENABLE_MOCK === 'true',
  logLevel: import.meta.env.VITE_LOG_LEVEL,
  
  // 根据环境设置不同配置
  isDevelopment: import.meta.env.DEV,
  isProduction: import.meta.env.PROD,
  
  // 功能开关
  features: {
    enableNewUI: import.meta.env.VITE_ENABLE_NEW_UI === 'true',
    enableAnalytics: import.meta.env.VITE_ENABLE_ANALYTICS === 'true'
  }
}

五、代码质量保障：自动化的"质检员"

ESLint配置

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier' // 必须放在最后
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint',
    'react-hooks'
  ],
  rules: {
    // 自定义规则
    'react/react-in-jsx-scope': 'off', // React 17+不需要导入React
    'react/prop-types': 'off', // 使用TypeScript时关闭prop-types
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/no-explicit-any': 'warn',
    'prefer-const': 'error',
    'no-var': 'error',
    
    // 测试平台特定规则
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn'
  },
  settings: {
    react: {
      version: 'detect'
    }
  }
}

Prettier配置

// .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "jsxSingleQuote": true,
  "jsxBracketSameLine": false
}

Git Hooks集成

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "src/**/*.{css,scss,less}": [
      "prettier --write",
      "git add"
    ]
  }
}

TypeScript配置

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["DOM", "DOM.Iterable", "ES6"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    
    // 路径映射
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/components/*": ["src/components/*"],
      "@/utils/*": ["src/utils/*"],
      "@/api/*": ["src/api/*"],
      "@/types/*": ["src/types/*"]
    },
    
    // 严格检查
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src/**/*",
    "tests/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build"
  ]
}

六、自动化测试集成

Jest配置

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  moduleNameMapping: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
  },
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
  },
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/index.tsx',
    '!src/reportWebVitals.ts'
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    }
  }
}

测试示例

// src/components/__tests__/TestCaseCard.test.jsx
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import TestCaseCard from '../TestCaseCard'

describe('TestCaseCard', () => {
  const mockTestCase = {
    id: 1,
    name: '用户登录测试',
    status: 'passed',
    priority: 'high'
  }

  const mockOnExecute = jest.fn()
  const mockOnEdit = jest.fn()

  beforeEach(() => {
    jest.clearAllMocks()
  })

  test('renders test case information correctly', () => {
    render(
      <TestCaseCard
        testCase={mockTestCase}
        onExecute={mockOnExecute}
        onEdit={mockOnEdit}
      />
    )

    expect(screen.getByText('用户登录测试')).toBeInTheDocument()
    expect(screen.getByText('通过')).toBeInTheDocument()
    expect(screen.getByText('高')).toBeInTheDocument()
  })

  test('calls onExecute when execute button is clicked', () => {
    render(
      <TestCaseCard
        testCase={mockTestCase}
        onExecute={mockOnExecute}
        onEdit={mockOnEdit}
      />
    )

    fireEvent.click(screen.getByText('执行'))
    expect(mockOnExecute).toHaveBeenCalledWith(mockTestCase.id)
  })

  test('calls onEdit when edit button is clicked', () => {
    render(
      <TestCaseCard
        testCase={mockTestCase}
        onExecute={mockOnExecute}
        onEdit={mockOnEdit}
      />
    )

    fireEvent.click(screen.getByText('编辑'))
    expect(mockOnEdit).toHaveBeenCalledWith(mockTestCase.id)
  })
})

七、CI/CD流水线：自动化部署的"传送带"

GitHub Actions配置

# .github/workflows/deploy.yml
name: Deploy Test Platform

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x, 18.x]

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'

    - name: Install dependencies
      run: npm ci

    - name: Run ESLint
      run: npm run lint

    - name: Run tests
      run: npm run test:coverage

    - name: Upload coverage to Codecov
      uses: codecov/codecov-action@v3
      with:
        file: ./coverage/lcov.info

    - name: Type check
      run: npm run type-check

  build:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18.x'
        cache: 'npm'

    - name: Install dependencies
      run: npm ci

    - name: Build application
      run: npm run build
      env:
        VITE_API_BASE_URL: ${{ secrets.PROD_API_URL }}
        VITE_APP_TITLE: 测试平台

    - name: Upload build artifacts
      uses: actions/upload-artifact@v3
      with:
        name: build-files
        path: dist/

  deploy:
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
    - name: Download build artifacts
      uses: actions/download-artifact@v3
      with:
        name: build-files
        path: dist/

    - name: Deploy to server
      uses: appleboy/ssh-action@v0.1.5
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.SSH_KEY }}
        script: |
          cd /var/www/test-platform
          rm -rf dist/*

    - name: Upload files
      uses: appleboy/scp-action@v0.1.4
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.SSH_KEY }}
        source: "dist/*"
        target: "/var/www/test-platform/"

    - name: Restart Nginx
      uses: appleboy/ssh-action@v0.1.5
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.SSH_KEY }}
        script: sudo systemctl reload nginx

Docker化部署

# Dockerfile
# 多阶段构建
FROM node:18-alpine AS builder

WORKDIR /app

# 复制package文件
COPY package*.json ./

# 安装依赖
RUN npm ci --only=production

# 复制源代码
COPY . .

# 构建应用
RUN npm run build

# 生产阶段
FROM nginx:alpine

# 复制构建结果
COPY --from=builder /app/dist /usr/share/nginx/html

# 复制nginx配置
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露端口
EXPOSE 80

# 启动nginx
CMD ["nginx", "-g", "daemon off;"]

# nginx.conf
events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    # Gzip压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;

        # 处理SPA路由
        location / {
            try_files $uri $uri/ /index.html;
        }

        # API代理
        location /api/ {
            proxy_pass http://backend:8080/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # 静态资源缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }

        # 安全头
        add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-Content-Type-Options "nosniff" always;
        add_header X-XSS-Protection "1; mode=block" always;
    }
}

# docker-compose.yml
version: '3.8'

services:
  frontend:
    build: .
    ports:
      - "80:80"
    depends_on:
      - backend
    environment:
      - NODE_ENV=production
    networks:
      - test-platform

  backend:
    image: test-platform-api:latest
    ports:
      - "8080:8080"
    environment:
      - DATABASE_URL=postgresql://user:pass@db:5432/testdb
    depends_on:
      - db
    networks:
      - test-platform

  db:
    image: postgres:13
    environment:
      - POSTGRES_DB=testdb
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=pass
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - test-platform

volumes:
  postgres_data:

networks:
  test-platform:
    driver: bridge

八、性能优化策略

构建优化

// vite.config.js - 性能优化配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { splitVendorChunkPlugin } from 'vite'

export default defineConfig({
  plugins: [
    react(),
    splitVendorChunkPlugin() // 自动分包
  ],

  build: {
    rollupOptions: {
      output: {
        // 手动分包策略
        manualChunks: (id) => {
          // 将node_modules中的包分离
          if (id.includes('node_modules')) {
            // 大型库单独分包
            if (id.includes('antd')) return 'antd'
            if (id.includes('echarts')) return 'echarts'
            if (id.includes('moment')) return 'moment'

            // 其他第三方库
            return 'vendor'
          }

          // 按功能模块分包
          if (id.includes('/src/pages/')) {
            const page = id.split('/src/pages/')[1].split('/')[0]
            return `page-${page}`
          }
        },

        // 文件命名策略
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: (assetInfo) => {
          const info = assetInfo.name.split('.')
          const ext = info[info.length - 1]

          if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)$/.test(assetInfo.name)) {
            return `media/[name]-[hash].${ext}`
          }
          if (/\.(png|jpe?g|gif|svg)$/.test(assetInfo.name)) {
            return `images/[name]-[hash].${ext}`
          }
          if (/\.(woff2?|eot|ttf|otf)$/.test(assetInfo.name)) {
            return `fonts/[name]-[hash].${ext}`
          }

          return `assets/[name]-[hash].${ext}`
        }
      }
    },

    // 压缩配置
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true, // 移除console
        drop_debugger: true // 移除debugger
      }
    },

    // 资源内联阈值
    assetsInlineLimit: 4096,

    // 启用CSS代码分割
    cssCodeSplit: true
  }
})

运行时优化

// src/utils/performance.js
// 性能监控工具

// 页面加载性能监控
export function measurePageLoad() {
  if ('performance' in window) {
    window.addEventListener('load', () => {
      const perfData = performance.getEntriesByType('navigation')[0]

      const metrics = {
        // DNS查询时间
        dnsTime: perfData.domainLookupEnd - perfData.domainLookupStart,
        // TCP连接时间
        tcpTime: perfData.connectEnd - perfData.connectStart,
        // 请求响应时间
        requestTime: perfData.responseEnd - perfData.requestStart,
        // DOM解析时间
        domParseTime: perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart,
        // 页面完全加载时间
        loadTime: perfData.loadEventEnd - perfData.loadEventStart,
        // 首次内容绘制
        fcp: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,
        // 最大内容绘制
        lcp: performance.getEntriesByType('largest-contentful-paint')[0]?.startTime
      }

      console.log('页面性能指标:', metrics)

      // 发送到监控服务
      sendMetrics(metrics)
    })
  }
}

// 组件渲染性能监控
export function measureComponentRender(componentName) {
  return {
    start: () => performance.mark(`${componentName}-start`),
    end: () => {
      performance.mark(`${componentName}-end`)
      performance.measure(
        `${componentName}-render`,
        `${componentName}-start`,
        `${componentName}-end`
      )

      const measure = performance.getEntriesByName(`${componentName}-render`)[0]
      console.log(`${componentName} 渲染耗时:`, measure.duration)
    }
  }
}

// 资源加载监控
export function monitorResourceLoading() {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.duration > 1000) { // 超过1秒的资源
        console.warn('慢资源加载:', {
          name: entry.name,
          duration: entry.duration,
          size: entry.transferSize
        })
      }
    })
  })

  observer.observe({ entryTypes: ['resource'] })
}

// 内存使用监控
export function monitorMemoryUsage() {
  if ('memory' in performance) {
    const memory = performance.memory

    return {
      used: Math.round(memory.usedJSHeapSize / 1048576), // MB
      total: Math.round(memory.totalJSHeapSize / 1048576), // MB
      limit: Math.round(memory.jsHeapSizeLimit / 1048576) // MB
    }
  }

  return null
}

// 发送指标到监控服务
function sendMetrics(metrics) {
  // 这里可以集成Sentry、Google Analytics等监控服务
  if (window.gtag) {
    window.gtag('event', 'page_load_metrics', {
      custom_parameter: JSON.stringify(metrics)
    })
  }
}

九、监控与错误处理

Sentry集成

// src/utils/sentry.js
import * as Sentry from '@sentry/react'
import { BrowserTracing } from '@sentry/tracing'

export function initSentry() {
  Sentry.init({
    dsn: import.meta.env.VITE_SENTRY_DSN,
    environment: import.meta.env.MODE,

    integrations: [
      new BrowserTracing({
        // 路由变化追踪
        routingInstrumentation: Sentry.reactRouterV6Instrumentation(
          React.useEffect,
          useLocation,
          useNavigationType,
          createRoutesFromChildren,
          matchRoutes
        )
      })
    ],

    // 性能监控采样率
    tracesSampleRate: import.meta.env.PROD ? 0.1 : 1.0,

    // 错误过滤
    beforeSend(event) {
      // 过滤掉开发环境的错误
      if (import.meta.env.DEV) {
        return null
      }

      // 过滤掉网络错误
      if (event.exception?.values?.[0]?.type === 'NetworkError') {
        return null
      }

      return event
    },

    // 用户信息
    initialScope: {
      tags: {
        component: 'test-platform-frontend'
      }
    }
  })
}

// 错误边界组件
export const SentryErrorBoundary = Sentry.withErrorBoundary(
  ({ children }) => children,
  {
    fallback: ({ error, resetError }) => (
      <div className="error-boundary">
        <h2>出现了一些问题</h2>
        <p>{error.message}</p>
        <button onClick={resetError}>重试</button>
      </div>
    ),
    beforeCapture: (scope, error, errorInfo) => {
      scope.setTag('errorBoundary', true)
      scope.setContext('errorInfo', errorInfo)
    }
  }
)

✅ 构建工具：Vite、Webpack等现代构建工具的使用 ✅ 项目结构：规范化的项目组织和配置管理 ✅ 代码质量：ESLint、Prettier、TypeScript的集成 ✅ 自动化测试：Jest、Testing Library的配置和使用 ✅ CI/CD流水线：GitHub Actions、Docker的自动化部署 ✅ 性能优化：构建优化、运行时监控、错误处理

工程化最佳实践

渐进式采用：不要一次性引入所有工具，根据项目需要逐步完善
团队规范：制定并遵守代码规范、提交规范、分支策略
自动化优先：能自动化的流程尽量自动化，减少人工操作
监控驱动：建立完善的监控体系，及时发现和解决问题
文档先行：完善的文档是团队协作的基础

测试平台工程化建议

小型团队（1-3人）

使用Vite + ESLint + Prettier
简单的GitHub Actions部署
基础的错误监控

中型团队（3-10人）

完整的代码质量检查
自动化测试覆盖
Docker化部署
性能监控

大型团队（10人+）

微前端架构
完善的CI/CD流水线
多环境管理
全面的监控告警

🎯 下一步预告：掌握了前端工程化，我们已经具备了构建企业级前端应用的完整技能栈！最后一篇将对整个前端学习系列进行总结，提供技术选型指南和职业发展建议！

前端工程化让我们的开发更加高效、规范、可靠。让我们在最后一篇文章中总结这段精彩的学习之旅！🚀