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

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 
1
2
3
4
5

使用 pnpm 安装 nodejs 的 LTS 版本：

pnpm env use --global lts 
1

项目搭建

这里我们以搭建一个 React + TypeScript 项目为例

脚手架

脚手架方面，新项目可以考虑直接使用 vite，我们通过以下命令创建一个基于 vite 的初始化项目：

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

进入目录可以看到如下的结构：

.
├── public
├── src
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts 
1
2
3
4
5
6
7
8

ESLint

ESLint 可以通过静态分析，来审查你代码中的错误，对于前端项目也是不可或缺的存在，这里我们选择社区比较流行的 airbnb 风格的 ESLint 规则，通过以下命令安装基础的配置与插件：

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

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

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

支持 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-
1
2
3
4