如何快速从零开始搭建一个前端项目

2022 年了，怎么快速从零开始建立一个适宜的前端项目？

准备作业

首要本地需求装置好 node 环境以及包办理工具，推荐直接运用 pnpm，也能够经过 pnpm 来直接办理 nodejs 版别。

pnpm 装置：

# Mac or Linux
curl -fsSL https://get.pnpm.io/install.sh | sh -
# Windows
iwr https://get.pnpm.io/install.ps1 -useb | iex

运用 pnpm 装置 nodejs 的 LTS 版别：

pnpm env use --global lts

项目建立

这儿咱们以建立一个 React + TypeScript 项目为例

脚手架

脚手架方面，新项目能够考虑直接运用 vite，咱们经过以下指令创立一个根据 vite 的初始化项目：

pnpm create vite my-react-app --template react-ts

进入目录能够看到如下的结构：

.
├── public
├── src
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

ESLint

ESLint 能够经过静态分析，来查看你代码中的过错，关于前端项目也是不可或缺的存在，这儿咱们挑选社区比较流行的 airbnb 风格的 ESLint 规矩，经过以下指令装置根底的装备与插件：

pnpm add eslint eslint-config-airbnb-base eslint-plugin-import -D

然后在项目根目录中增加 .eslintrc.json 文件：

{
  "extends": [
    "eslint:recommended",
    "airbnb-base",
  ],
  "plugins": [
    "import"
  ],
}

支撑 TS 和 React

关于 TypeScript 以及 React 项目，还需求额外的 parser 和 plugin 来支撑：

# TypeScirpt eslint parser
pnpm add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
# React eslint plugin
pnpm add eslint-plugin-react eslint-plugin-react-hooks -D

在 .eslintrc.json 文件中增加相应的规矩：

{
   "extends": [
    "eslint:recommended",
    "airbnb-base",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": [
    "import",
    "@typescript-eslint",
    "react",
  ],
  "parser": "@typescript-eslint/parser",
}

最终在 package.json 中增加对应的 scripts 就大功告成了：

{
  "scripts": {
     "lint": "eslint --fix --quiet --ext .ts,.tsx src"
  }
}

prettier

prettier 是一个代码格式化工具，能够经过它来完成代码缩进、空行等排版风格的统一，经过以下指令进行装置：

pnpm add prettier -D

然后在根目录中增加 .prettierrc.json 装备文件：

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

结合 ESLint 运用

咱们能够经过 prettier 的 ESLint 插件来完成查看 ESLint 规矩时也同步查看 prettier 代码风格的规矩：

pnpm add eslint-plugin-prettier eslint-config-prettier -D

装置后在 .eslintrc.json 中增加相应装备，留意需求设置 prettier/prettier 相关规矩为 error：

{
  "extends": [
    "eslint:recommended",
    "airbnb-base",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": [
    "import",
    "@typescript-eslint",
    "react",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "prettier/prettier": "error",
  }
}

husky + lint-staged

装备好 ESLint 和 prettier 之后，你需求一个作业流来触发 lint 的相关查看，这儿咱们挑选比较常用的 husky + lint-staged 的组合：

pnpm add husky lint-staged -D

在根目录的 package.json 中增加对应的装备：

{
  "lint-staged": {
    "**/*.{ts,tsx}": [
      "eslint --fix --quiet",
      "prettier --write",
      "git add"
    ]
  }
}

它会在匹配到 .ts/.tsx 后缀的文件时去履行 ESLint 和 prettier 的修正作业。

你还需求在 .husky 中增加 precommit 文件来触发 lint-staged 的这个行为：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged

最终在 package.json 的 scripts 中增加 husky 的初始化脚本，来保证上述钩子能够正常触发：

{
  "scripts": {
    "prepare": "husky install"
  }
}

顺利的话，经过以上装备，你在每次进行 commit 之后都会由 husky 触发 precommit 钩子并由 lint-staged 来匹配文件规矩，履行相应的 lint 查看与修正。

vitest

单元测试是项目开发中比较重要的一部分，经过单元测试能够必定程度上保障项目的代码质量以及逻辑的完整性，关于 vite 创立的项目，咱们挑选与之匹配度比较高的测试框架 vitest 来编写测试用例，装置如下：

pnpm create vitest jsdom -D

在 vite.config.ts 中装备 vitest，挑选 js-dom 环境，这儿在顶部增加 vitest 的类型声明引进后，即可在 vitest 中同享 vite 的 plugins 等装备，无需装备 vitest.config.ts 文件:

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
  test: {
    testTimeout: 20000,
    environment: 'jsdom',
  },
});

一个运用 @testing-library/react 编写的测试用例的简略比如能够参考：react-typescript

github workflow

CI 则是项目主动化中比较重要的一环，经过 CI 能够协助你主动履行一些使命，咱们以 github 为例，这儿装备一个 CI 相关的 workflow, 它的主要功能是在你 push/pull_request 代码到 github 时，主动履行相关的 ESLint 查看、TypeScript 类型查看以及对测试用例的履行。

首要咱们在根目录新建 .github/workflows 文件夹，然后创立一个 ci.yml 文件，主要内容为：

name: CI
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set node v14
        uses: actions/setup-node@v3
        with:
          node-version: '14'
      - name: Install
        run: npm install
      - name: Lint
        run: npm run lint
  typecheck:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set node v14
        uses: actions/setup-node@v3
        with:
          node-version: '14'
      - name: Install
        run: npm install
      - name: Typecheck
        run: npm run typecheck
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set node v14
        uses: actions/setup-node@v3
        with:
          node-version: '14'
      - name: Install
        run: npm install
      - name: Build
        run: npm run test

这儿咱们创立了三个 job：lint/typecheck/test，它们在触发了 push/pull_request 操作后会分别主动履行 scripts 中的 lint/typecheck/test 指令，其中 typecheck 前面没有写，主要内容其实便是 tsc

怎么快速建立

关于现在的前端项目而言，上述 TypeScript 以及 eslint、prettier、husky 等基本上归于标配了，但每次创立一个新项目都需求从头进行这样的一系列装备也比较消耗时间，因而我开发了一个小项目，能够协助你快速创立一个装备好以上内容的项目，只需求一行代码：

pnpm create @tooltik/cap my-cap-app --template react-ts

• 项目地址：cap，欢迎试用、提 issue 和 PR