前端技术分享
0%

前端工程化实践

发表于 分类于

什么是前端工程化？

前端工程化是用工程方法管理前端开发过程。包括代码规范、自动化构建、测试、部署等，让团队更高效协作。

代码规范

1. ESLint

检查代码质量。

1
npm install eslint --save-dev

创建 .eslintrc.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  rules: {
    'no-unused-vars': 'error',
    'no-console': 'warn'
  }
};

2. Prettier

自动格式化代码。

1
npm install prettier --save-dev

.prettierrc：

1
2
3
4
5
6
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80
}

版本控制

用 Git 管理代码。

1
2
3
git init
git add .
git commit -m "初始提交"

CI/CD

持续集成/持续部署。

GitHub Actions 示例

.github/workflows/ci.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
name: CI
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - run: npm ci
    - run: npm test
    - run: npm run build

包管理

用 npm 或 yarn 管理依赖。

1
2
npm init -y
npm install lodash

模块化

用 ES6 模块或 CommonJS。

1
2
3
4
5
6
7
// ES6
import { sum } from './math.js';
export { sum };

// CommonJS
const sum = require('./math');
module.exports = { sum };

构建工具

  • Webpack：打包和优化
  • Vite：快速开发服务器
  • Parcel：零配置打包

测试

  • 单元测试：Jest
  • E2E 测试：Cypress

文档

用 JSDoc 或 TypeScript 生成文档。

1
2
3
4
5
6
7
8
9
/**
 * 计算两个数的和
 * @param {number} a 第一个数
 * @param {number} b 第二个数
 * @returns {number} 和
 */
function sum(a, b) {
  return a + b;
}

性能监控

用 Lighthouse 或 Web Vitals 监控性能。

团队协作

  • 代码审查
  • 标准化工作流
  • 知识分享

总结

工程化让前端开发更专业。从规范代码开始，逐步引入工具。记住，工具是为开发服务，不是反过来。