手把手教你用vite+React18+TS+redux+prettier+eslint+Ant打造企业级前端项目

通过这篇文章你可以学到

• 如何使用使用 webpack 搭建项目
• 如何在 webpack中集成 typescript
• 如何在 webpack 中集成 React Router 和 Redux
• 如何使用 React 的组件库 Ant Design
• 如何在项目中集成 eslint 和 prettier 保证代码质量
• 如何为团队开发专属的项目模板

环境依赖版本

• node：v18.13.0npm -v
• vite：^4.4.5
• React：^18.2.0
• typescript：^5.0.2
• Redux：^4.2.1
• React-router：^6.15.0"
• Ant-design：^5.8.3
• eslint：^8.47.0
• prettier：^3.0.1
• normalize.css：^8.0.1
• npm:9.8.1

快速查看

• 仓库地址

1.初始化项目

按步骤提示初始化：

1. 使用 React-cli 创建命令

npm init vite@latest  xxxx（项目名） --template react-ts


//示例：
npm init vite@latest vite-React-ts-Redux --template react-ts

注意：我们这里要把命令中的项目名改成自己将要创建的项目名

2. 选择一个框架（react）

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

3. 使用 typescript

? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC

4. 启动项目

vite-React-ts-Redux && pnpm install && pnpm run dev

快速初始化（建议使用）：

# pnpm
pnpm init vite@latest project-name --template react-ts

# npm 
npm init vite@latest project-name --template react-ts

2.配置别名

1. 给vite.config.js文件添加路径别名配置

import {
    defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path' //导入Path模块

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [react()],
      // 路径别名
  resolve: {
   
    alias: {
   
      '@': path.resolve(__dirname, 'src') // 配置 @ 别名指向 src 文件夹
    }
  }
})

2. 给tsconfig.json文件添加路径别名声明，以便ts识别路径别名

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    // 路径别名
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

3.重置浏览器默认样式的 CSS 文件，兼容不同平台

安装

安装 normalize.css文件

npm install normalize.css

使用

安装之后 引入到我们的项目中.在我们的main.tsx文件中进行引入

@import 'normalize.css';

代码质量风格的统一

这里我们使用prettier 和 eslint 实现我们的格式化和校验

4.配置prettier

安装

首先我们要在项目中安装 prettier

npm install prettier -D

使用

1. 安装完成后，我们需要创建.prettierrc文件，并且配置一些我们项目所需要的格式