# cra5-craco6-react18-router6-antd4-mobx6

**Repository Path**: ldoll/cra5-craco6-react18-router6-antd4-mobx6

## Basic Information

- **Project Name**: cra5-craco6-react18-router6-antd4-mobx6
- **Description**: cra5-craco6-react18-router6-antd4-mobx6
吧cra创建的项目进行优化  不破坏webpack配置  
create-react-app@5.0.1  
@craco/craco@6
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-25
- **Last Updated**: 2022-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: CRA, create-react-app, craco, react-admin, React

## README

cra5-craco6-react18-router6-antd4-mobx6  

吧cra创建的项目进行优化  不破坏webpack配置  
2022.7.15  
create-react-app@5.0.1  
目前craco对cra5版本支持还不是很好  

# 创建项目
npx create-react-app my-app  
# @craco/craco@6
https://github.com/dilanx/craco  
cnpm i -D @craco/craco  
新建 craco.config.js  
参考 https://juejin.cn/post/6871148364919111688  

# 修改绝对路径别名@指向src
配置文件加上 alias 

# react-router-dom@6
cnpm i -S react-router-dom  
v5与v6区别 参考网站 https://blog.csdn.net/weixin_57935165/article/details/122844132  
api参考 https://reactrouter.com/docs/en/v6

# antd@4
cnpm i -S antd @ant-design/icons  
cnpm i -D babel-plugin-import // antd按需加载   
配置文件 加上 babel  
  
# scss
cnpm i node-sass -D  
模块化scss不需要特别的配置  
常用写法参考 https://www.jianshu.com/p/a99764ff3c41  

# sass-resources-loader
cnpm i -D craco-sass-resources-loader   
修改配置文件  
 
 # 浏览器自动增加前缀
 cnpm i postcss autoprefixer -D  
 修改配置 postcss  


# mobx
cnpm i mobx mobx-react -S  
参考网站 https://blog.csdn.net/u010059669/article/details/122476596  


# 路由异步加载


# 打包清理文件
无需配置

# css打包到单独文件
无需配置

# css js压缩
无需配置

# less 取消modules