js-banana / vite-react-ts

Vite、React、Zustand、Typescript、Antd、Less

Vite + React + Typescript + Antd

一个使用vite2.x搭建的react17.x项目，支持TypeScript4.x、Antd4.x，以及eslint/prettier/stylelint/commitlint等工程化管理~

开发

• 使用 Gitpod 体验在线开发环境

• 克隆到本地

# clone
git clone https://github.com/JS-banana/vite-react-ts.git

# install
yarn install

# dev serve
yarn dev

特性

• 支持Typescript
• 支持React、JSX语法
• 支持ES6语法
• 支持Less module
• 支持Eslint、Prettier、Pre-commit hook
• 支持HMR快速热更新
• 支持Antd按需引入与主题样式覆盖
• 支持Proxy代理、alias别名
• 兼容传统浏览器
• 开发启动速度要够快，以秒计算
• 支持懒加载和chunk分割

目录结构

├── dist                                // 默认的 build 输出目录
├── config                              // 全局配置文件
└── src                                 // 源码目录
    ├── assets                          // 公共的文件（如image、css、font等）
    ├── components                      // 项目组件
    ├── constants                       // 常量/接口地址等
    ├── layout                          // 全局布局
    ├── routes                          // 路由
    ├── store                           // 状态管理器
    ├── utils                           // 工具库
    ├── pages                           // 页面模块
        ├── Home                        // Home模块，建议组件统一大写开头
        ├── ...
    ├── App.tsx                         // react顶层文件
    ├── main.ts                         // 项目入口文件
    ├── typing.d.ts                     // ts类型文件
├── .editorconfig                       // IDE格式规范
├── .env                                // 环境变量
├── .eslintignore                       // eslint忽略
├── .eslintrc                           // eslint配置文件
├── .gitignore                          // git忽略
├── .npmrc                              // npm配置文件
├── .prettierignore                     // prettierc忽略
├── .prettierrc                         // prettierc配置文件
├── .stylelintignore                    // stylelint忽略
├── .stylelintrc                        // stylelint配置文件
├── index.html                          // 项目入口文件
├── LICENSE.md                          // LICENSE
├── package.json                        // package
├── pnpm-lock.yaml                      // pnpm-lock
├── postcss.config.js                   // postcss
├── README.md                           // README
├── tsconfig.json                       // typescript配置文件
└── vite.config.ts                      // vite

计划

• 路由重构：当前5.x路由版本结合react-router-config使用的写法有待改善，后续考虑直接上6.x版本，以及路由模块的重构

版本

• v0.0.1：2021-07-23更新
• v0.0.2：2021-08-12更新
  • .stylelint配置调整，pre-commit调整为.husky及其他细节优化
• v0.0.3：2021-08-15 至 2021-09-01
  • 解决antd按需加载在开发环境下的自定义样式被覆盖问题
  • 重构路由及layout模块，优化路由页面
  • 增加mock请求数据，整理目录结构
  • 分离vite plugin及其配置、环境变量，优化写法并全局统一管理
  • 使用 react-route-config 统一管理路由
  • 调整部分样式
• 2022-04-29更新：
  • 依赖@vitejs/plugin-react-refresh变更为@vitejs/plugin-react，前者已被弃用（https://www.npmjs.com/package/@vitejs/plugin-react-refresh）
  • 路由调整，路由写法需要调整（目前版本5.x，考虑升级6.x）

vite-react-ts's Issues

打不出包来啦

https://github.com/JS-banana/vite-react-ts/runs/6223829334?check_suite_focus=true

WARN deprecated @vitejs/plugin-react-refresh

Hi!
Thanks for the awesome template. I am inspired by him in my project.
I noticed a message after installation
npm WARN deprecated @vitejs/[email protected]: This package has been deprecated in favor of @vitejs/plugin-react
Maybe update the dependencies?

v0.0.3 版本更新说明

日期：

• 👀2021-09-01

功能：

• ✅解决 antd 按需加载在开发环境下的自定义样式被覆盖问题
• ✅重构路由及 layout 模块，优化路由页面，使用 react-route-config 统一管理路由
• ✅增加 mock 模拟请求数据
• ✅分离 vite plugin 及其配置，优化写法并全局统一管理
• ✅调整了部分样式