重温react：从搭建企业级项目开始

背景

最近开始在开始面试，发现很多公司都需要react这个技术，我虽然会，但是不是很熟悉，就想着学习学习。

这要用到的技术是vite + react + react-redux + react-router-dom + @reduxjs/toolkit等技术

创建react项目

1. 安装项目:

npm init vite@latest

2.安装需要的依赖

npm install react-redux react-router-dom
npm install @reduxjs/toolkit
npm install @types/node -D
npm install vite-plugin-compression -D

store

1. 创建文件

src/store/index.ts
src/store/modules/mainReducer.ts

2.mainReducer.ts

import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from '../index';

interface CounterState { // 定义初始化状态的类型
  mainValue: number
}
const initialState: CounterState = { // 初始化状态
  mainValue: 1,
}
export const counterSlice = createSlice({
  name: 'mainCounter',
  initialState,
  reducers: {
    getMain: (state) => {
      state.mainValue += 1
    },
    setMain: (state) => {
      state.mainValue += 1
    },
  },
})

export const { getMain, setMain } = counterSlice.actions;
export const selectCount = (state: RootState) => state;
export default counterSlice.reducer; 

3.index.ts

import { configureStore } from '@reduxjs/toolkit';
import mainCounterSlice from './modules/mainReducer';

const store = configureStore({
    reducer: {
        mainCounter: mainCounterSlice
    },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

router

1. 创建文件

router/index.ts

2.index.ts

import { lazy } from "react";
import { RouteObject } from 'react-router-dom'
const Index = lazy(() => import('@/views/index'))

const Router: RouteObject[] = [
  {
    path: '/',
    element: <Index />
  }
]
export default Router;

占位符：

import { Outlet } from 'react-router-dom';

function Layout() {
  return (<div className='layout'>
    789
    <Outlet />
  </div>)
}

views/index

简单代码:

// views/index.tsx
import { useSelector, useDispatch } from 'react-redux';

function Home() {
  return (<div className='home'>你好!!!</div>)
};
export default Home

修改main.tsx

HashRouter 这个是hash值

import ReactDOM from 'react-dom/client';
import store from './store/index';
import {BrowserRouter} from 'react-router-dom';
import { Provider } from 'react-redux';
import App from "@/App";
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App></App>
    </BrowserRouter>
  </Provider>
);

修改App.tsx

import { Suspense } from "react";
import { useRoutes } from 'react-router-dom';
import routes from '@/router';

function App() {
  return <div className="App">
    <Suspense fallback="Loading...">
      <div className="main">
        {useRoutes(routes)}
      </div>
    </Suspense>
  </div>;
};

export default App;

使用store

import { useSelector, useDispatch } from 'react-redux';
import { setMain } from '@/store/modules/mainReducer';

function Home() {
  const counts = useSelector((state: any) => state.mainCounter);
  // 修改
  const dispatch = useDispatch();
  const handleBtnClick = () => {
    dispatch(setMain());
  }

  console.log('counts', counts);
  return (<div className='home'>
    <div className='box'>
      <div>{ counts.mainValue }</div>
      <button onClick={handleBtnClick}>增加</button>
    </div>
  </div>)
}
export default Home;

环境配置

根据自己的需求配置就行；

• .env.development
• .env.production
• .env.test

【获取环境变量的方式一】：

import.meta.env

【获取环境变量的方式二】：

import { defineConfig, loadEnv  } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';
import viteCompression from 'vite-plugin-compression';

export default ({ mode }: any) => {
  const env = loadEnv(mode, process.cwd());
  console.log('----',env);
  return defineConfig({
    plugins: [
      react(),
      viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  })
};

启动不同环境

以下增加了pre启动命令，当然；你也可以写更多的命令。

"scripts": {
    "dev": "vite",
    "pre": "vite --mode production",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
},

保存自动格式化

如果你觉得不需要的话可以不配置。

1. 安装依赖

npm install eslint -D
npm install prettier -D

2.配置.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true, // 解决 'module' is not defined报错。
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/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: {},
};

3.配置.eslintignore

dist/*
node_modules/*
*.json
public

4.配置.prettierrc.js

module.exports = {
  // 一行的字符数，如果超过会进行换行，默认为80
  printWidth: 100,
  // 行位是否使用分号，默认为true
  semi: true,
  // 字符串是否使用单引号，默认为false，使用双引号
  singleQuote: true,
  // 一个tab代表几个空格数，默认为2
  tabWidth: 2,
  // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  trailingComma: "none",
};

5.配置.prettierignore

node_modules/**
dist/**
public/**
doc/**

安装sass

npm install sass

配置@

tsconfig.app.json

"baseUrl": ".", //查询的基础路径
"paths": { "@/*": ["src/*"] }, //路径映射,配合别名使用

打包配置

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import path, { resolve } from 'path';
import viteCompression from 'vite-plugin-compression';

// https://vitejs.dev/config/
export default ({ mode }: any) => {
  const env = loadEnv(mode, process.cwd());
  console.log('----', env);
  return defineConfig({
    plugins: [
      react(),
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip',
        ext: '.gz',
      }),],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    build: {
      outDir: resolve(__dirname, 'dist'), // 指定输出路径
      chunkSizeWarningLimit: 1500,
      sourcemap: false, // 是否生成 source map
      emptyOutDir: true, //Vite 会在构建时清空该目录
      // 打包时清楚console和debugger
      terserOptions: {
        compress: {
          keep_infinity: true,
          drop_console: true,
          drop_debugger: true,
        },
      },
      rollupOptions: {
        output: {
          compact: true, //压缩代码，删除换行符等
          assetFileNames: '[ext]/[name]-[hash].[ext]', //静态文件输出的文件夹名称
          chunkFileNames: 'js/[name]-[hash].js', //chunk包输出的文件夹名称
          entryFileNames: 'js/[name]-[hash].js', //入口文件输出的文件夹名称
        },
      },
    },
  })
};

总结

以上的配置是主要框架的配置，一些细节方面的可能需要你根据自己的需求进行配置处理，比如：axios、swiper等一些需要东西。