iamzwq / react-a

管理系统：react18+antd5.x+react-router-dom6.x+zustand

1. 创建项目

pnpm create vite@latest

选择 React + TypeScript + SWC

2. 配置项目

安装 vscode 插件:

• ESLint
• Prettier - Code formatter

2.1. 安装 vite-plugin-legacy-swc 配置打包浏览器兼容

为使用SWC的生产构建提供旧版浏览器支持。

pnpm add vite-plugin-legacy-swc -D

// vite.config.ts

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import legacy from "vite-plugin-legacy-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ["defaults", "not IE 11"],
    }),
  ],
});

2.2. 安装 vite-plugin-chunk-split 代码拆包插件

pnpm add vite-plugin-chunk-split -D

// vite.config.ts

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import { chunkSplitPlugin } from "vite-plugin-chunk-split";
import legacy from "vite-plugin-legacy-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ["defaults", "not IE 11"],
    }),
    chunkSplitPlugin(),
  ],
});

2.3. 安装并配置 prettier

prettier

pnpm add --save-dev --save-exact prettier

进入项目根目录并创建.prettierrc文件：

{
  "arrowParens": "avoid",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 90,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleAttributePerLine": false,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

再创建.prettierignore文件:

.DS_Store

node_modules
dist

*.local

将prettier和eslint集成

pnpm add eslint-config-prettier eslint-plugin-prettier -D

• eslint-config-prettier：解决eslint和prettier冲突

• eslint-plugin-prettier：将prettier作为eslint规则运行，并将差异作为ESLint问题报告。

  eslint-plugin-prettier 这个插件附带一个 plugin:prettier/recommended 配置，可以一次性设置插件和 eslint-config-prettier。你需要添加 plugin:prettier/recommended 作为你的.eslintrc.json 中的最后一个扩展名

{
  "extends": ["plugin:prettier/recommended"]
}

plugin:prettier/recommended 做了什么

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

2.4. 安装 husky + lint-staged 配置代码格式检查

pnpm add husky lint-staged -D

初始化下git：

git init

再执行：

pnpm exec husky init

然后修改.husky\pre-commit:

npx lint-staged

在package.json添加配置:

"lint-staged": {
  "*.{ts,tsx,json,scss}": "eslint --cache --fix"
}

2.5. 配置环境变量

// .env

VITE_APP_BASE_URL = "/"
VITE_APP_API_URL = "http://localhost:5050"
VITE_APP_API_PREFIX = "/api"

添加typescript的智能提示，打开src/vite-env.d.ts文件，添加环境变量ts基础定义：

// src/vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_APP_BASE_URL: string;
  readonly VITE_APP_API_URL: string;
  readonly VITE_APP_API_PREFIX: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

2.6. 配置路径别名

pnpm add @types/node -D

进入项目根目录配置vite.config.ts：

// vite.config.ts

import react from "@vitejs/plugin-react-swc";
import path from "node:path";
import { defineConfig } from "vite";
import { chunkSplitPlugin } from "vite-plugin-chunk-split";
import legacy from "vite-plugin-legacy-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ["defaults", "not IE 11"],
    }),
    chunkSplitPlugin(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

tsconfig.json添加:

{
  "compilerOptions": {
    // ...
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

2.7. 配置项目反向代理

进入项目根目录配置vite.config.ts：

import react from "@vitejs/plugin-react-swc";
import path from "node:path";
import { defineConfig, loadEnv } from "vite";
import { chunkSplitPlugin } from "vite-plugin-chunk-split";
import legacy from "vite-plugin-legacy-swc";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // 根据开发、生产环境模式动态读取环境变量
  const configEnv = loadEnv(mode, process.cwd(), "");

  return {
    base: configEnv.VITE_APP_BASE_URL,
    plugins: [
      react(),
      legacy({
        targets: ["defaults", "not IE 11"],
      }),
      chunkSplitPlugin(),
    ],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    server: {
      proxy: {
        [configEnv.VITE_APP_API_PREFIX]: {
          target: configEnv.VITE_APP_API_URL,
          changeOrigin: true,
          rewrite: path => path.replace(configEnv.VITE_APP_API_PREFIX, ""),
        },
      },
    },
  };
});

3. 项目开发

3.1. 安装tailwindcss

pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

修改tailwind.config.js文件，添加如下内容：

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {},
  corePlugins: {
    // Remove the Tailwind CSS preflight styles so it can use custom base style (src/theme/base.css)
    preflight: false, // https://tailwindcss.com/docs/preflight#disabling-preflight
  },
  plugins: [],
};

修改index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;