从零搭建现代前端工程化体系

在现代前端开发中，一套完善的工程化体系是团队效率和代码质量的基石。本文将从实际项目经验出发，分享如何从零开始搭建一套覆盖构建、代码规范、测试和部署的完整工程化方案。

为什么需要工程化

当项目从几个页面增长到几十个模块时，如果没有统一的工程化方案，很快就会面临以下问题：

• 代码风格不统一，Code Review 充满格式争论
• 构建配置散落各处，新人上手成本高
• 没有类型约束，运行时错误频发
• 部署流程依赖手工操作，容易出错

核心工具链选型

构建工具：Vite vs Webpack

Vite 利用浏览器原生 ES Module 实现按需加载，开发体验极佳。对于新项目，推荐直接使用 Vite；对于已有 Webpack 项目，可以逐步迁移。

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

代码规范：ESLint + Prettier

ESLint 负责代码质量检查，Prettier 负责代码格式化。两者配合使用可以做到质量与格式双保障。

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'no-console': 'warn',
    'react/prop-types': 'off'
  }
}

类型安全：TypeScript

TypeScript 是现代前端项目的标配。它不仅在编码时提供类型提示，还能在编译阶段拦截大量潜在错误。

// types.ts
interface User {
  id: number
  name: string
  email: string
  role: 'admin' | 'user'
}

function getUserInfo(user: User): string {
  return `${user.name} (${user.email})`
}

Git Hooks 与自动化

使用 Husky + lint-staged 可以在代码提交前自动执行格式化和检查，从源头保证代码质量。

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,md}": ["prettier --write"]
  }
}

每一个 bug 都是成长的机会。好的工程化体系不是限制创造力，而是让你更专注于业务逻辑本身。

CI/CD 流水线

通过 GitHub Actions 可以实现推送代码后自动构建、测试和部署：

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install
        run: npm ci
      - name: Build
        run: npm run build
      - name: Deploy
        run: npm run deploy

总结

搭建工程化体系不是一蹴而就的事情，需要根据团队规模和项目特点逐步迭代。核心原则是：先用起来，再优化。不要追求完美的配置，而是先建立基础流程，在实践中不断调整。

希望这篇文章对你有帮助。如果你在搭建过程中遇到问题，欢迎留言交流。