vite + react + ts + redux template
git clone git@github.com:qqxs/react-antd-typescript-starter.git
cd react-antd-typescript-starter
pnpm install
# 安装项目依赖
# only allow pnpm
pnpm install
# 开启开发环境react 编译
# start development environment
pnpm run dev
# 开始编译生产环境
# production environment
pnpm run build
# 开始编译生产环境并输出分析
# production environment analyzer
pnpm run analyzer
# 对部分不符合eslint 语法进行修复
# 注意⚠️: 不是所有的错误都会修复,部分还是要手动修复
# eslint fix code
pnpm run fix
# 进行eslint语法检查, 如果有错会在控制中指出
# eslint lint code
pnpm run lint
# 使用prettier 代码进行格式化
# prettier format code
pnpm run fmt
# test
pnpm run test
# 首先要安装nginx镜像
# docker nginx deploy
# http://localhost:8000
docker-compose up -d
.
├── assets # @/assets/xxx assets source
│ ├── FE.png
│ └── react.svg
├── components # @/components common components
│ ├── Auth # auth
│ ├── ErrorBoundary # ErrorBoundary
│ └── Layout # layout
├── constant # @/constant constant
├── hooks # @/hooks
│ └── redux.ts # redux hook
├── main.tsx # entry
├── services # @/services api
├── pages # pages
│ ├── error # error page
│ ├── home # home page
│ ├── login # login page
│ └── register # register page
├── router.tsx # router tree
├── sentry.ts # sentry config
├── store # redux store
│ ├── index.ts
│ └── reducer
├── styles
│ ├── antd-theme.scss # antd theme
│ └── theme.scss # custom theme
├── utils
│ ├── Axios.ts # axios
│ └── auth.ts
└── vite-env.d.ts
自定义组件放在src/components
下
Place custom components under src/components
如果需要修改antd5 主题,请更改src/styles/antd-theme.scss文件
If it is necessary to modify the antd5 theme, Please modify the src/styles/antd-theme.scssfile.
如果使用less
, 请安装 less-vars-to-js 按照下面 👇 代码自行调试。
If using less
, please install less-vars-to-js According to the following 👇 Code self debugging.
import lessToJs from 'less-vars-to-js';
import { lowerCamel } from '@skax/camel';
import fs from 'fs';
/**
* less 变量转成 json 格式 (更改 antd 主题样式更新需要重启)
* Convert the less variable to JSON format
*
* @example
*
* ```less
* $color-primary: #00b96b;
* $border-radius: 2px;
* ```
*
* ```js
* lessVar2JSON() // -> {"colorPrimary": "#00b96b", "borderRadius": "2px"}
* ```
*
* @returns {Object}
*/
function lessVar2JSON() {
// Read the less file in as string
const paletteLess = fs.readFileSync('./src/styles/antd-theme.less', 'utf-8');
// Pass in file contents
const palette = lessToJs(paletteLess, {
resolveVariables: true,
stripPrefix: true,
});
return Object.keys(palette).reduce((pre, cur) => {
pre[lowerCamel(cur, '-')] = palette[cur];
return pre;
}, {});
}
export default lessVar2JSON;
在vite.config.ts中开启OPEN_SENTRY=true
, 并在src/sentry.tsx 中配置 __DSN__
。