第13章工程化实践_第13章工程化实践课

off999 2025-09-24 02:32 57 浏览 0 评论

13.1 ESLint + Prettier代码规范

统一代码风格配置

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    es6: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    '@vue/standard'
  ],
  rules: {
    'vue/multi-word-component-names': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100
}

自动化修复与提交检查

# 安装Husky + lint-staged
npm install husky lint-staged --save-dev

# 配置package.json
{
  "scripts": {
    "prepare": "husky install",
    "lint": "eslint --ext .js,.vue src",
    "format": "prettier --write src/**/*.{js,vue}"
  },
  "lint-staged": {
    "*.{js,vue}": ["eslint --fix", "prettier --write"]
  }
}

# 添加Git钩子
npx husky add .husky/pre-commit "npx lint-staged"

13.2 自动化测试（Jest + Puppeteer）

单元测试配置（Jest）

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testMatch: ['**/tests/unit/**/*.spec.js'],
  transform: {
    '^.+\\.vue#39;: 'vue-jest'
  },
  collectCoverage: true,
  coverageDirectory: 'coverage'
}

// 示例测试用例（测试Vue组件）
import { mount } from '@vue/test-utils'
import Button from '@/components/Button.vue'

test('按钮点击事件触发', async () => {
  const wrapper = mount(Button)
  await wrapper.trigger('click')
  expect(wrapper.emitted('click')).toBeTruthy()
})

端到端测试（Puppeteer）

// tests/e2e/home.spec.js
const puppeteer = require('puppeteer')

describe('首页测试', () => {
  let browser, page

  beforeAll(async () => {
    browser = await puppeteer.launch({ headless: true })
    page = await browser.newPage()
    await page.goto('http://localhost:8080')
  })

  afterAll(async () => {
    await browser.close()
  })

  test('页面标题正确', async () => {
    const title = await page.title()
    expect(title).toBe('首页 - 我的应用')
  })
})

多平台测试策略

13.3 CI/CD持续集成方案

GitHub Actions配置

# .github/workflows/build.yml
name: UniApp CI/CD

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

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        platform: [mp-weixin, h5, app-plus]

    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install Dependencies
        run: npm ci
        
      - name: Build for Platform
        run: npm run build:${{ matrix.platform }}
        env:
          VUE_APP_API: ${{ secrets.API_BASE }}
          
      - name: Upload Artifact
        uses: actions/upload-artifact@v2
        with:
          name: ${{ matrix.platform }}-build
          path: dist/${{ matrix.platform }}

Docker多阶段构建

# 构建阶段
FROM node:16 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build:h5

# 生产阶段
FROM nginx:alpine
COPY --from=builder /app/dist/h5 /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

13.4 错误监控与日志分析体系

Sentry集成方案

// main.js
import * as Sentry from '@sentry/vue'
import { Integrations } from '@sentry/tracing'

if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    Vue,
    dsn: 'https://your-dsn@sentry.io/12345',
    integrations: [new Integrations.BrowserTracing()],
    tracesSampleRate: 0.2
  })
}

// 捕获未处理异常
uni.onUnhandledRejection(error => {
  Sentry.captureException(error)
})

日志分级与收集

// utils/logger.js
const logLevels = ['debug', 'info', 'warn', 'error']

export const logger = {
  debug(msg) {
    if (process.env.NODE_ENV !== 'production') {
      console.log(`[DEBUG] ${msg}`)
    }
    this._sendLog('debug', msg)
  },
  error(msg) {
    console.error(msg)
    this._sendLog('error', msg)
    Sentry.captureException(msg)
  },
  _sendLog(level, msg) {
    uni.request({
      url: '/api/logs',
      method: 'POST',
      data: { level, message: msg }
    })
  }
}

实时监控看板

指标	工具	功能
错误发生率	Sentry	实时错误追踪与聚合
性能指标	Google Analytics	页面加载时间、交互延迟
用户行为	Hotjar	会话回放与热力图分析
服务健康状态	Grafana	接口响应时间监控