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