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

最新推荐文章于 2024-09-18 14:52:34 发布

zayyo

最新推荐文章于 2024-09-18 14:52:34 发布

阅读量1.1k

点赞数 20

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45215308/article/details/140421595

版权

通过这篇文章你可以学到

如何使用使用 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.初始化项目

按步骤提示初始化：

使用 React-cli 创建命令


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


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

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

选择一个框架（react）

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

使用 typescript

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

启动项目

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.配置别名

给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 文件夹
    }
  }
})

给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

使用

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

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "endOfLine": "lf"
}

配置一个忽略文件不让prettier格式化

我们需要创建完成.prettierrc文件创建后，我们还需创建.prettierignore文件，文件的作用是声明在项目中不需要prettier格式化的文件。

/build/*
.local
.output.js
.eslintrc.js
.editorconfig
/node_modules/**

**/*.svg
**/*.sh

/public/*

在package.json中配置prettier的运行命令

在script字段中添加配置项： “prettier”:“prettier --write .”

只要我们在控制台运行npm run prettier 即可把所有文件使用prettier格式化

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "prettier": "prettier --write .",
  },

在vscode 配置默认prettier（仅仅针对vscode编辑器）

vscode 配置默认prettier 快捷键‘ctrl+, ’ 搜索editor default 勾选code fomatter为prettier （要先在vscode下载插件prettier）

5.配置eslint

安装

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

npm install eslint --save-dev

使用

安装完成后，我们需要创建一个.eslintrc.cjs文件。并且配置一些我们项目所需要的校验

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  settings: {
    react: {
      version: 'detect'
    }
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended'
  ],
  overrides: [
    {
      env: {
        node: true
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script'
      }
    }
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint', 'react'],
  rules: {
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-explicit-any': 'off'
  }
}

```3. 在`package.json`中配置Eslint的运行命令

    在script字段中添加配置项：  "lint": "eslint ."

    只要我们在控制台运行npm run lint 即可检测所有文件的格式是否正确

```js
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "prettier": "prettier --write .",
    "lint": "eslint ."
  },

结合eslint和prettier

安装

npm install eslint-plugin-prettier eslint-config-prettier -D

使用

我们需要在.eslint.js配置添加插件配置

extends ： "plugin:prettier/recommended"

此时就能成功实现prettier显示报错并结合eslint

6.配置路由：

安装

 npm install react-router-dom

使用

声明一个ts组件，来匹配我们的路由。首先我们需要在项目的src文件夹中创建views文件夹，然后在views文件夹中创建home文件和index.tsx文件，在home文件夹中创建Component文件夹，在Component文件夹里创建Home.tsx

配置我们的home页组件

Home.tsx

import React, { memo } from 'react'
import type { ReactNode, FC } from 'react'

interface IProps {
  children?: ReactNode
}

const Home: FC<IProps> = () => {
  return <div>我是home页</div>
}

export default memo(Home)

配置我们的home页index出口文件

index.tsx

import Home from './Component/Home'

export default Home

然后我们需要在项目的src文件夹中创建route文件夹，然后在route文件夹中建立index.tsx文件。
因为我们要引入组件，所有我们需要创建tsx而不是ts文件。
配置我们的路由文件

//route/index.tsx

import React from 'react'
import { createBrowserRouter } from 'react-router-dom'
import { lazy } from 'react'
//引入懒加载的形式:
const Home = lazy(() => import('@/views/home/index.tsx'))

const routes = createBrowserRouter([
  {
    path: '/',
    element: <Home />, //(xxx组件)
    children: [
      //xxx  多级路由配置
    ]
  }
])

export default routes

在我们的App.tsx中引入路由，进行使用

//App.tsx

import React from 'react'
import { RouterProvider } from 'react-router-dom'
import routes from '@/router'

  return <RouterProvider router={routes} />
}

export default App

7.配置redux

安装

npm install @reduxjs/toolkit

使用

声明一个ts组件，来存放我们的数据。首先我们需要在项目的src文件夹中创建store文件夹，然后在store文件夹中创建index.ts文件，

配置我们的Redux文件

index.ts

import { configureStore } from '@reduxjs/toolkit'
// 初始化数据
const initialState = {
  name: 'zayyo',

}
// Reducer：定义如何更新状态
const rootReducer = (state = initialState, action: any) => {
  // 根据 action 类型来更新状态
  // 返回新的状态
  return state
}
// 创建store
const store = configureStore({
  reducer: rootReducer
})
export default store

然后配置我们的App.tsx文件，使得我们整个项目都能使用Redux

App.tsx

import React from 'react'
import { RouterProvider } from 'react-router-dom'
import routes from '@/router'
//引入provide组件进行包裹
import { Provider } from 'react-redux'
import store from './store'

function App() {
  return (
 //引入provide组件进行包裹
    <Provider store={store}>
      <RouterProvider router={routes} />
    </Provider>
  )
}

export default App

在组件中使用我们的Redux数据
Home.tsx

import React, { memo } from 'react'
import type { ReactNode, FC } from 'react'
//导入useSelector可以将Redux 的状态集成到 React 组件中，使得组件能够订阅特定的状态，并在状态发生变化时进行更新
import { useSelector } from 'react-redux'

interface IProps {
  children?: ReactNode
}
interface RootState {
  name: string
  // 其他属性...
}

const Home: FC<IProps> = () => {
  const data = useSelector((state: RootState) => state.name) // 替换为您的状态属性路径

  return (
    <div>
      我是home页
      <div>{data}</div>
    </div>
  )
}

export default memo(Home)

8.引入Ant Design组件

安装

安装Ant Design包

$ npm install antd --save

使用

我们在Home。tsx组件中进行使用

import React, { memo } from 'react'
import type { ReactNode, FC } from 'react'
import { useSelector } from 'react-redux'
//引入我们要使用的组件
import { Button } from 'antd'

interface IProps {
  children?: ReactNode
}
interface RootState {
  name: string
  // 其他属性...
}

const Home: FC<IProps> = () => {
  const data = useSelector((state: RootState) => state.name) // 替换为您的状态属性路径

  return (
    <div>
      我是home页
      <div>{data}</div>
      //使用组件
      <Button type="primary">Button</Button>
    </div>
  )
}

export default memo(Home)