README.md · 沐辰/react17-webpack4-reactRouter5-mobx

https://gitee.com/ldoll/react17-webpack4-react-router5-mobx

参考以下教程

https://www.jianshu.com/p/04e436cf75ba

https://github.com/liuboshuo/small-apes-mgr

2022.6.21  手动创建react项目  
webpack@4    
babel@7  
react@17  
react-router-dom@5  
antd@3  
mobx@5

npm init  
git init  
cnpm i -S axios  
cnpm i  webpack@4 webpack-dev-server@3 webpack-cli@3 -D // webpack@4 配置用@3  
cnpm i  html-webpack-plugin@4 -D // 解析html文件 和webpack大版本一致  
cnpm i webpack-merge@4 -D // 合并webpack配置 和webpack大版本一致  
cnpm i react@17 react-dom@17 -S  
cnpm i -D @babel/core@7 @babel/preset-env@7 @babel/preset-react@7 // @7版本 preset-env转换es6语法  
cnpm i -D @babel/plugin-transform-runtime@7 @babel/runtime@7 @babel/runtime-corejs2@7 // plugin-transform-runtime转换es6新的语法，这些es5没得的,比如Array.includes() runtime-corejs2用于兼容老ie  
新建.babelrc配置文件  
cnpm i -D babel-loader // 配置webpack编译babel规则  
cnpm i -D style-loader@2 css-loader@5 less less-loader@7 //编译css文件 高版本为了适应webpack@5修改了配置，所以用低版本  
cnpm i -D url-loader file-loader // 文件编译 图片字体等   
cnpm i -D copy-webpack-plugin@5 // 高版本报错 webpack处理static下静态文件 将单个文件或整个目录复制到构建目录

#  eslint-plugin-react-hooks 配置

cnpm i eslint -D  
cnpm init @eslint/config  
cnpm i eslint-plugin-react -D  
cnpm i eslint-plugin-react-hooks -D  
配置.eslintrc.js文件

# 按需加载antd

cnpm i -S antd@3 // 高版本图标写法不一样  
cnpm i -D babel-plugin-import // antd按需加载  
配置babel.config.json // antd 按需加载,不需要引入css  
/views/antd 使用

# router
cnpm i -S react-router-dom@5 // 高版本写法不一样

# mobx
cnpm i -S mobx@5 mobx-react@6  //mobx6写法不一样，MobX5不支持 E11  
cnpm i -D @babel/plugin-proposal-decorators // 配置装饰器  
cnpm i -D @babel/eslint-parser  // 解决eslint报错 Parsing error: Unexpected character '@'eslint   
App.js 引入store  
/src/store 建立仓库文件  
/viwes/mobx 使用mobx  
修改.eslintrc.js配置  "parser": "@babel/eslint-parser", // 指定解析器  
# 引入全局less
cnpm i style-resources-loader -D  
修改webpack.base.conf.js

# mock
见 /mock/README.md  
相关文件  
/mock  
/src/views/mock  
/src/api/user.js  
/src/store/user

# 优化
## webpack优化
cnpm i -D clean-webpack-plugin // 每次打包清理文件  
cnpm i -D webpack-bundle-analyzer //打包完成，可视化查看每个文件大小  
修改/build/webpack.prod.conf.js  
## react路由的异步加载
cnpm i -S react-loadable  
/src/utils/loadable.js  
修改各个路由组件引入路径 参考/src/views/App.js

## css处理
cnpm i mini-css-extract-plugin@1 -D // css打包到单独的文件 高版本为了适应webpack@5修改了配置，所以用低版本  
cnpm i optimize-css-assets-webpack-plugin -D //css压缩  
cnpm i -D cssnano@3 // 高版本有问题  4版本也可以，但是3感觉打包的文件更小  
修改/build/webpack.prod.conf.js

cnpm i postcss-loader@4 autoprefixer -D // 兼容不同浏览器 自动增加前缀 如 -webkit-  
修改/build/webpack.base.conf.js   
package.json 增加 'browserslist'

## js处理
cnpm i -D uglifyjs-webpack-plugin // 压缩js代码  
修改/build/webpack.prod.conf.js

## webpack 美化输出内容
cnpm i webpackbar -D

# less 取消modules  
现在的模块化less都需要less文件名称为XX.module.less 可不可以直接修改为XX.less 然后还是运用模块化啦  
目前没找到方案

# 全局路由跳转 目前要跳转的地方都要引用withRouter  
不能像vue那样用this.$router就可以全局跳转

# 其他页面刷新页面找不到页面  
webpack的 devServer 的host去掉就行了

# SplitChunks  分包优化

# jest

# happypack 多线程打包

# mobx-react-router

# 多标签keepalive
react没得官方的keepalive 可以采用  React Keeper 和 react-router-cache-route

# 打包后 访问页面请求资源路径有问题
cnpm i cross-env -D
修改package.json scripts内容设置 NODE_ENV  
在webpack配置文件可以获取process.env.NODE_ENV 的值了  
修改路由模式为HashRouter

# hooks 函数组件

# snoar

沐辰/react17-webpack4-reactRouter5-mobx

简介

发行版

贡献者

语言

近期动态

沐辰/react17-webpack4-reactRouter5-mobx .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

语言

近期动态

搜索帮助

沐辰/react17-webpack4-reactRouter5-mobx