如何从 0 到 1 搭建前端基建？

从 0 到 1 搭建前端基建，意味着你要为一个新的项目或者团队，构建一个健全、可扩展的前端开发环境和工具链。以下是一个从零开始搭建前端基础设施的步骤，涵盖了项目初始化、代码质量控制、开发流程优化、构建部署等方面。

1. 项目初始化

搭建前端基建的第一步是初始化项目，通常可以选择适合团队和项目需求的工具和框架。

1.1 选择技术栈

• 前端框架：React、Vue、Angular 或者是简单的 Vanilla JS。
• 状态管理：Redux、Pinia、Vuex 等。
• UI 库：Ant Design、Material-UI、Bootstrap 等。

1.2 初始化项目

选择适合的脚手架工具进行初始化，如：

• 使用 Vite、Webpack 或 Create React App 初始化项目。
• 如果项目需要 Vue，可以使用 Vue CLI 或 Vite。
• 如果是 Angular 项目，使用 Angular CLI。

# React + Vite 项目初始化
npm create vite@latest my-app --template react

# Vue 3 + Vite 项目初始化
npm create vite@latest my-app --template vue

# Angular 项目初始化
ng new my-app

1.3 安装常用依赖

• 开发依赖：如 Babel、TypeScript、ESLint、Prettier。
• UI 组件库：如 Ant Design、Material-UI、Tailwind CSS。
• 路由：如 React Router、Vue Router。
• 状态管理：如 Redux、Pinia。

# 安装基础依赖
npm install react-router-dom @reduxjs/toolkit axios
npm install --save-dev typescript eslint prettier

2. 代码质量控制

搭建前端基建时，确保代码质量的可维护性非常重要。这需要配置一些开发工具和规范。

2.1 配置 ESLint 和 Prettier

• ESLint 用于检查代码风格、语法错误等，Prettier 用于自动格式化代码。

# 安装 ESLint 和 Prettier
npm install --save-dev eslint prettier eslint-plugin-react eslint-config-prettier

在项目中配置 .eslintrc.js 和 .prettierrc 文件。

// .eslintrc.js 示例
module.exports = {
  parser: "@babel/eslint-parser",
  extends: ["eslint:recommended", "plugin:react/recommended", "prettier"],
  rules: {
    "react/prop-types": "off"
  }
};

// .prettierrc 示例
{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all"
}

2.2 设置 Git Hook

使用 Git Hook 来在提交时执行 lint 检查和代码格式化。例如，可以使用 Husky 和 lint-staged 来实现。

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

在 package.json 中配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix",
    "*.css": "prettier --write"
  }
}

3. 代码构建与优化

配置前端构建工具，确保代码在开发和生产环境中都能高效运行。

3.1 选择构建工具

• Webpack：功能强大，适合大型项目，可以处理 JS、CSS、图片、字体等资源的打包。
• Vite：更现代、更快速，适合中小型项目，支持热更新和快速构建。

对于 Vite 项目，可以直接使用默认配置。

# 安装 Vite
npm install --save-dev vite

对于 Webpack 项目，可以选择合适的配置（如 React、Vue 配置等）。

3.2 配置 Babel 转译

Babel 是现代 JavaScript 转译工具，可以将 ES6+ 的代码转换为兼容性更好的 ES5 代码，确保在旧版浏览器中也能运行。

# 安装 Babel 和相关插件
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

配置 .babelrc 或 babel.config.js：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

3.3 配置代码分割

代码分割可以提升加载性能，减少初次加载的包体积。使用 Webpack 或 Vite 的内建功能进行配置。

在 Webpack 中：

optimization: {
  splitChunks: {
    chunks: "all"
  }
}

在 Vite 中，通常默认启用了代码分割，直接使用即可。

3.4 配置缓存和压缩

为生产环境启用缓存、Gzip 或 Brotli 压缩，减小静态资源文件大小。

在 Webpack 中，可以使用 webpack-bundle-analyzer 和 compression-webpack-plugin 插件。

npm install --save-dev webpack-bundle-analyzer compression-webpack-plugin

4. 自动化构建与部署

为了实现持续集成和持续部署（CI/CD），可以使用 GitHub Actions、GitLab CI、Jenkins 等工具。

4.1 配置 CI/CD

例如，使用 GitHub Actions 设置自动化流程：

• 自动运行测试。
• 构建生产环境的代码。
• 将构建后的代码部署到服务器或云平台（如 Netlify、Vercel、AWS、GCP 等）。

4.2 配置 Docker

如果项目需要容器化部署，可以创建一个 Dockerfile 和 docker-compose.yml 文件，将项目打包成 Docker 镜像进行部署。

# 基于 Node 镜像构建
FROM node:16

# 设置工作目录
WORKDIR /app

# 复制依赖文件并安装
COPY package*.json ./
RUN npm install

# 复制项目代码
COPY . .

# 运行构建命令
RUN npm run build

# 启动应用
CMD ["npm", "start"]

5. 测试框架和工具

搭建前端基建时，务必配置自动化测试工具，确保代码质量。

5.1 单元测试

使用 Jest 和 React Testing Library（React 项目）或 Mocha 和 Chai 来进行单元测试。

# 安装 Jest 和 React Testing Library
npm install --save-dev jest @testing-library/react @testing-library/jest-dom

5.2 E2E 测试

使用 Cypress 或 Playwright 来进行端到端（E2E）测试。

# 安装 Cypress
npm install --save-dev cypress

5.3 测试覆盖率

使用 Istanbul 或 Jest 自带的覆盖率功能，确保代码的测试覆盖率。

# 使用 Jest 进行测试覆盖率
jest --coverage

6. 监控和性能优化

上线后，需要监控应用的性能和用户的体验。

6.1 性能分析

使用 Lighthouse 或 Web Vitals 来进行性能分析。

npm install --save-dev web-vitals

6.2 错误追踪

集成 Sentry 或 LogRocket 等工具，追踪生产环境中的错误。

题目要点：

搭建前端基建是一个包含多个步骤的过程。简要总结：

1. 项目初始化：选择适合的技术栈、初始化项目。
2. 代码质量控制：配置 ESLint、Prettier、Git Hook，确保代码质量。
3. 构建工具和优化：选择适合的构建工具（Vite、Webpack），配置代码分割、缓存、压缩等。
4. 自动化构建与部署：配置 CI/CD 流程和 Docker 容器化部署。
5. 测试：配置单元测试、E2E 测试，确保代码健壮性。
6. 监控与性能优化：使用性能分析工具、错误追踪工具，确保应用性能和可靠性。

搭建前端基建的目标是为开发提供一个高效、可扩展、稳定的开发环境，并确保应用上线后的可靠性与性能。