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

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