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

2022，如何从零开始快速搭建一个合适的前端项目？准备工作首先需要在本地安装node环境和包管理工具。推荐直接使用pnpm，也可以直接通过pnpm管理nodejs版本。pnpm安装：#Mac或Linuxcurl-fsSLhttps://get.pnpm.io/install.sh|sh-#Windowsiwrhttps://get.pnpm.io/install.ps1-useb|iex使用pnpm安装nodejs的LTS版本：pnpmenv使用--globallts项目搭建这里我们以搭建一个React+TypeScript项目作为搭建脚手架的例子。脚手架方面，新项目可以考虑直接使用vite。我们使用如下命令创建一个基于vite的初始化工程：pnpmcreatevitemy-react-app--templatereact-ts进入目录，可以看到如下结构：.├──public├──src├──index.html├──package.json├──tsconfig.json├──tsconfig.node.json└──vite.config.tsESLintESLint可以通过静态分析查看代码中的错误，也是前端不可或缺的结束项目。这里我们选择社区比较流行的airbnb-styleESLint规则，通过如下命令安装基础配置和插件：pnpmaddeslinteslint-config-airbnb-baseeslint-plugin-import-D然后添加.eslintrc项目根目录下的.json文件：{"extends":["eslint:recommended","airbnb-base",],"plugins":["import"],}支持TS和React对于TypeScript和React项目，需要额外的解析器和插件来支持：#TypeScripteslintparsernpmadd@typescript-eslint/parser@typescript-eslint/eslint-plugin-D#Reacteslintpluginpnpmaddeslint-plugin-reacteslint-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":{"lint":"eslint--fix--quiet--ext.ts,.tsxsrc"}}prettierprettier是一个代码格式化工具，可以用来实现代码缩进，空行，等样式统一，使用以下命令安装：pnpmaddprettier-D然后在根目录添加.prettierrc.json配置文件：{"printWidth":80,"tabWidth":2,"semi":true,"singleQuote":true}结结合ESLint，我们可以使用prettier的ESLint插件来检查ESLint规则，同时也同步检查prettier代码风格规则：，注意需要设置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的组合：pnpmaddhuskylint-staged-D在根目录的package.json中添加相应的配置：{"lint-staged":{"**/*.{ts,tsx}":["eslint--fix--quiet","prettier--write","gitadd"]}}当匹配到.ts/.tsx后缀的文件时，它会执行ESLint和更漂亮的修复工作。您还需要在.husky中添加一个预提交文件以触发此lint阶段行为：#!/bin/sh。"$(dirname"$0")/_/husky.sh"npxlint-staged最后在package.json的scripts中添加husky初始化脚本，保证以上hooks可以正常触发：{"scripts":{"prepare":"huskyinstall"}}如果顺利的话，通过上面的配置，每次commit后，husky都会触发precommithook，lint-staged会匹配文件规则，执行相应的lint检查和修复。vitest单元测试是项目开发中比较重要的一个环节。通过单元测试，可以在一定程度上保证项目的代码质量和逻辑完整性。vite创建的项目，我们选择匹配度高的测试框架vitest来编写测试用例安装如下：pnpmcreatevitestjsdom-D在vite.config.ts中配置vitest，选择js-dom环境，这里在最上面添加vitest的类型声明，然后就可以在vitest中共享vite的插件等配置，不需要配置vitest.config.ts文件///import{defineConfig}来自'vite'；从'@vitejs/plugin-react'导入反应；导出默认defineConfig（{plugins:[react()],test:{testTimeout:20000,environment:'jsdom',},});使用@testing-library/react编写的一个简单的测试用例示例可以参考：react-typescriptgithubworkflowCI是项目自动化过程中比较重要的一个部分，CI可以帮助你自动执行一些任务。我们以github为例。这里我们配置一个CI相关的工作流。它的主要功能是当你push/pull_request代码到github时自动执行相关任务。ESLint检查、TypeScript类型检查和测试用例的执行。首先我们在根目录新建.github/workflows文件夹，然后新建一个ci.yml文件，主要内容为：name:CIon:push:branches:-mainpull_request:branches:-mainjobs:lint:runs-on：ubuntu-最新步骤：-使用：actions/checkout@v3-名称：设置节点v14使用：actions/setup-node@v3with：node-version：'14'-名称：安装运行：npminstall-名称:Lintrun:npmrunlinttypecheck:runs-on:ubuntu-lateststeps:-uses:actions/checkout@v3-name:Setnodev14使用：actions/setup-node@v3with:node-version:'14'-名称：安装运行：npminstall-名称：Typecheck运行：npmruntypechecktest：runs-on：ubuntu-lateststeps：-uses：actions/checkout@v3-name：Setnodev14uses：actions/setup-node@v3with:node-version:'14'-name:Installrun:npminstall-name:Buildrun:npmruntest这里我们创建了三个job：lint/typecheck/test，在触发push/pull_request操作后，会自动执行脚本中的lint/typecheck/test命令，这里之前没有写typecheck，主要内容其实就是如何快速构建tsc的目前的前端项目，上面提到的TypeScript、eslint、prettier、husky等基本都是标准配置，但是每次新建一个项目，重新进行这样一系列的配置还是比较耗时的，所以我开发了一个小项目，可以帮你快速创建一个配置了以上内容的项目，只需要一行代码：pnpmcreate@tooltik/capmy-cap-app--templatereact-ts项目地址：cap，欢迎来到尝试，提出问题和PR