从零开始搭建React+vite企业级项目框架

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

现在的前端生态环境真的是百花齐放，繁荣异常，各个大厂以及社区都沉淀出了最佳的解决方案，今天就带大家从零开始，搭建一个企业级的项目工程。

现在的构建工具也是非常之多，之前我一直使用的是webpack，知道尤大大团队推出vite,第一次上手的时候，真的被vite秒开的启动速度震惊到了，所以今天我们的项目采用vite作为构建工具。

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

包管理工具我使用的yarn，使用npm或者pnpm的请自行根据官方文档切换。

创建

通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + React-ts 项目，运行:

yarn create vite react-ts-app --template react-ts
 

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

根据提示命令，进入项目目录，下载依赖，启动项目

cd react-ts-app && yarn && yarn dev

然后就可以看到默认页面：http://127.0.0.1:5173/

代码质量

Eslint安装

eslint初始化过程中按照自己的开发习惯配置就好

? How would you like to use ESLint? //你想如何使用Eslint?
  To check syntax only //仅检查语法
❯ To check syntax and find problems //检查语法并且发现问题
  To check syntax, find problems, and enforce code style //检查语法、发现问题并强制执行代码样式
  
？What type of modules does your project use? //您的项目使用什么类型的模块？
❯ JavaScript modules (import/export) //JavaScript 模块（导入/导出）
  CommonJS (require/exports) CommonJS（导入/导出）
  None of these //都不是
  
? Which framework does your project use? //您的项目使用哪个框架？
❯ React
  Vue.js
  None of these
  
  //项目中是否使用TypeScript？
? Does your project use TypeScript? › No / Yes
 
? Where does your code run? //你的项目在哪里运行？
✔ Browser  //浏览器
✔ Node  //node
 
//您希望配置文件采用什么格式？
? What format do you want your config file to be in?
❯ JavaScript
  YAML
  JSON
 
// 是否现在安装依赖？
✔ Would you like to install them now? · No / Yes
 
// 你想使用哪个包管理器？
? Which package manager do you want to use? 
  npm
❯ yarn
  pnpm

至此,Eslint安装完毕。会在项目根目录下生成.eslintrc.cjs配置文件：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

可以看到生成的配置文件继承了 "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended" ，我们如果需要配置自己的 lint 规则可以在 rules 中添加。

Prettier安装

一般 ESLint 用于检测代码风格代码规范，Prettier 用于对代码进行格式化。

首先安装依赖

yarn add prettier -D

紧接着在根目录下创建 .prettierrc.js 配置文件,并且根据自己的代码风格进行规则配置，下面是我的配置规则：

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  singleQuote: true,
  semi: false,
  trailingComma: "none",
  bracketSpacing: true
}

解决eslint与prettier冲突问题

通过使用eslint-config-prettier,eslint-plugin-prettier插件来解决格式不一致的冲突问题。

安装相关依赖包

yarn add eslint-config-prettier eslint-plugin-prettier -D

然后重新配置.eslintrc.cjs配置文件，将刚才安装的插件配置上去。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
+       "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
+       "prettier"
    ],
    "rules": {
+       "prettier/prettier": "error",
+       "arrow-body-style": "off",
+       "prefer-arrow-callback": "off"
    }
}

接下来在 package.json 的 scripts 中添加命令。

"script": {
          "lint": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./"
        }

在 Vite 的配置文件vite.config.ts中引入 ESLint 插件，以便在开发阶段就可以发现问题，从而进行修复。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteEslint from 'vite-plugin-eslint'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    viteEslint({
      failOnError: false
    })
  ]
})

Husky + lint-staged 安装

代码质量，以及代码规范是项目的重点，但是我们手动进行规范检查的话，效率太低，所以有没有自动替我们进行校验的办法呢？

当然有，那就是我们接下来要说的，git hooks钩子函数，通过Husky在git commit的时候，自动进行代码检查。

安装husky

yarn add husky -D

然后在 package.json 中添加脚本 prepare 并运行

npm pkg set scripts.prepare="husky install"
 
npm run prepare

运行命令后会在项目根目录创建 .husky 文件夹。

现在给 Husky 添加一个 Hook

npx husky add .husky/pre-commit "npm run lint"

大功告成，添加 hook 之后，每次 git commit 之前都会先运行 npm run lint，通过之后才会提交代码。

但是...问题来了，每次提交都检测所有代码并不是一个好的决定，比如你只修改了文件1，结果文件2报错了，但是文件2并不是你负责的，淦...改还是不改？

因此，我们可以通过 lint-staged 只对暂存区的代码进行检验。

首先安装lint-staged

yarn add lint-staged -D

然后在 package.json 添加相关配置。

{
  "lint-staged": {
    "*.{js,jsx,tsx,ts}": [
      "npm run lint"
    ]
  }
}

并在 .husky/pre-commit 中替换 npm run lint 为 npx lint-staged,自此之后，我们每次提交代码前都只会对我们改动的文件进行 Lint 检查。

自定义规范提交

辅助 commit 提交信息 ,通过选择输入,规范提交信息。

安装cz-customizable:

yarn add cz-customizable -D

然后在项目根目录下新建.cz-config.js配置文件，内容如下：

module.exports = {
  types: [
    {
      value: ':sparkles: feat',
      name: '✨ feat:     新功能',
    },
    {
      value: ':bug: fix',
      name: '🐛 fix:      修复bug',
    },
    {
      value: ':tada: init',
      name: '🎉 init:     初始化',
    },
    {
      value: ':pencil2: docs',
      name: '✏️  docs:     文档变更',
    },
    {
      value: ':lipstick: style',
      name: '💄 style:    代码的样式美化',
    },
    {
      value: ':recycle: refactor',
      name: '♻️  refactor: 重构',
    },
    {
      value: ':zap: perf',
      name: '⚡️ perf:     性能优化',
    },
    {
      value: ':white_check_mark: test',
      name: '✅ test:     测试',
    },
    {
      value: ':rewind: revert',
      name: '⏪️ revert:   回退',
    },
    {
      value: ':package: build',
      name: '📦️ build:    打包',
    },
    {
      value: ':rocket: chore',
      name: '🚀 chore:    构建/工程依赖/工具',
    },
    {
      value: ':construction_worker: ci',
      name: '👷 ci:       CI related changes',
    },
  ],
  messages: {
    type: '请选择提交类型(必填)',
    customScope: '请输入文件修改范围(可选)',
    subject: '请简要描述提交(必填)',
    body: '请输入详细描述(可选)',
    breaking: '列出任何BREAKING CHANGES(可选)',
    footer: '请输入要关闭的issue(可选)',
    confirmCommit: '确定提交此说明吗？',
  },
  allowCustomScopes: true,
  allowBreakingChanges: [':sparkles: feat', ':bug: fix'],
  subjectLimit: 72,
};

最最重要的一步，在package.json文件下的scripts中配置commit命令：

"scripts":{
    "commit": "git add . && cz-customizable"
}

如此以后提交代码时，直接使用yarn commit命令即可。

更新日志 standard-version

一个项目中更新日志是必不可少的一环，一个好的日志可以快速定位代码现状，也可以快速定位bug位置.

安装standard-version

yarn add standard-version -D

紧接着在package.json文件下的scripts中配置日志命令：

"scripts":{
    "release": "standard-version"
}

直接使用yarn release命令，会在根目录下生成CHANGELOG.md日志文件，之后每一次运行，都会在文件中追加每次提交过的更新信息。