React搭建项目及配置

使用vite快速搭建脚手架

• 注：这里我使用vite因为打包速度更快，不想用vite的话也可以选择使用webpack，这个看个人习惯

npm create vite 项目名
yarn create vite 项目名

#使用模版的
npm create vite 项目名 --template react-ts
yarn create vite 项目名 --template react-ts

这里我选择yarn来进行搭建，这样会快一点

• 选择yarn create vite react-demo
• 回车之后可以看到多个选项然后选择React
• 下一步选择TypeScript，也可以使用JavaScript这个看个人习惯
• cd react-demo 进入到文件夹中
• 接着输入yarn来安装依赖包，下完依赖包输入yarn dev就可以启动初始项目了

vite.config.ts文件的配置

• 注：这里先要使用yarn add sass --save -D来安装sass，这里面全局配置了sass不安装的话可能会造成报错
• 不强制使用sass，装less也可以看个人习惯

import { UserConfig, ConfigEnv, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
import { proxy } from "./build/proxy";
const root: string = process.cwd();

// https://vitejs.dev/config/
export default ({ mode }: ConfigEnv): UserConfig => {
  // 获取当前环境的配置
  const {
    VITE_PORT,
    VITE_PUBLIC_PATH,
    VITE_OUT_DIR,
    VITE_ASSET_DIR,
    VITE_BASEURL,
  }: any = loadEnv(mode, root);
  return {
    base: VITE_PUBLIC_PATH,
    plugins: [react()],
    resolve: {
      alias: [
        {
          find: "@", //字符串｜正则
          replacement: resolve(__dirname, "src"),
        },
      ],
    },
    // css相关
    css: {
      // 引入全局scss |less 指定传递给 CSS 预处理器的选项。
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/styles/mixin.scss";',
        },
      },
    },
    // 服务相关
    server: {
      https: false,
      port: VITE_PORT,
      proxy: proxy(VITE_BASEURL),
    },
    // .构建相关【打包相关】
    build: {
      outDir: VITE_OUT_DIR,
      assetsDir: VITE_ASSET_DIR,
      sourcemap: false,
      // 消除打包大小超过500kb警告
      chunkSizeWarningLimit: 4000,
    },
  };
};

配置环境env

• 配置环境就可以打包之后使用对应的域名（正式环境或者测试环境）

公共的 .env 
开发环境 .env.development 
生产环境 .env.production 
预发布环境 .env.staging

# 端口 
VITE_PORT= 3100 

# 开发环境读取配置文件路径 
VITE_PUBLIC_PATH = '/' 

# 开发环境代理 
VITE_PROXY_DOMAIN = '/api'

# 开发环境路由历史模式 
VITE_ROUTER_HISTORY = "hash" 

# 开发环境后端地址 
VITE_PROXY_DOMAIN_REAL = "http://127.0.0.1:3000"

• 配置config文件可以用于判断某些内容是测试环境中使用还是正式环境中使用
• 在config文件夹中创建env.mode.ts文件要使用时通过impoet {mode} from '@/config/env.mode.ts'引入进行使用就可以了

const _mode = import.meta.env.MODE
// 当前环境
export const mode = {
  IS_DEV: _mode === 'development',
  IS_STAGING: _mode === 'staging',
  IS_PROD: _mode === 'production',
}
// 当前环境的请求api接口域名
export const baseUrl = import.meta.env.VITE_BASEURL

tsconfig.json以及tsconfig.node.json的配置

• tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "types/**/*.d.ts"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

• tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

配置TailwindCss

• 这个插件用于我们更方便得书写css样式，只需要在className里面使用即可

1. 安装依赖

npm install -D tailwindcss@latest
或者使用
yarn add tailwindcss -D

1. 创建tailwind.config.js文件，与src文件同级

module.exports = {
  content: ["./src/**/*.{html,js,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    // 为了阻止与antd样式冲突
    preflight: false,
  },
};

1. 需要在src里面创建tailwind.css文件

/* ./src/index.css */

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

1. 接着创建postcss.config.cjs文件

module.exports = {
    plugins: [
        require("postcss-import"),
        require("tailwindcss"),
        require("postcss-100vh-fix")
    ]
}

1. 最后一步在main.tsx文件中引入进行全局使用就可以了

// 引入tailwind样式
import "./tailwind.css";

1. 使用方法

• 直接在标签里面进行使用就可以了

const Home = () => {
  return (
    <div className="flex justify-between items-center"></div>
  );
};

样式初始化

• 页面一开始默认有内外边距样式的问题，为了处理这个问题这里推荐一个插件就是reset-css

1. 安装依赖
npm install reset-css
或者使用
yarn add reset-css

2. 最后直接在main.tsx文件中全局引入就生效了
// 样式初始化
import "reset-css";