基于 React、Mobx、Webpack 和 React-Router 的项目模板。
LiuJiang · 2020-10-19 10:35:52 +08:00 · 1643 次点击这是一个创建于 1503 天前的主题，其中的信息可能已经有所发展或是发生改变。
前言
自己利用业余时间，基于 React 、Ant 、Webpack 、Mobx 、React-Router 、TS 写了一个后台管理模板，目前已在公司内部搭建了几套项目，并都已上线，希望帮助自己梳理各技术最新知识点，同时也希望对看到的人有所帮助。
项目效果：
登录页：
404 页：
列表页：
分支
main hooks + ts
class class + ts
js class + js
如何快上手
源码地址
在线预览地址
技术栈
- React
- Ant
- React-Router
- Mobx
- Webpack
- ES6
- Babel
- Axios
- Eslint
- Stylelint
- TS
项目结构
.
├── LICENSE
├── README.md
├── README2.md
├── declaration.d.ts
├── package.json
├── prettier.config.js
├── public
│ └── index.html
├── script
│ ├── webpack.base.conf.js
│ ├── webpack.dev.js
│ └── webpack.prod.js
├── src
│ ├── app.tsx
│ ├── assets
│ ├── components
│ ├── config.ts
│ ├── index.tsx
│ ├── locales
│ ├── mobx
│ ├── mock
│ ├── pages
│ ├── request.tsx
│ ├── routeConfig.tsx
│ ├── servers
│ ├── styles
│ ├── typings
│ └── utils
├── stylelint.config.js
└── tsconfig.json
各大库版本
"dependencies": {
"@ant-design/icons": "^4.2.2",
"@babel/cli": "^7.8.0",
"@babel/core": "^7.8.0",
"@babel/plugin-proposal-class-properties": "^7.8.0",
"@babel/plugin-proposal-decorators": "^7.8.0",
"@babel/plugin-proposal-json-strings": "^7.8.0",
"@babel/plugin-proposal-optional-chaining": "^7.10.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.0",
"@babel/plugin-syntax-import-meta": "^7.8.0",
"@babel/plugin-transform-runtime": "^7.8.0",
"@babel/polyfill": "^7.8.0",
"@babel/preset-env": "^7.8.2",
"@babel/preset-react": "^7.8.0",
"@babel/preset-stage-2": "^7.8.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
"@sentry/react": "^5.18.1",
"@types/react": "^16.9.48",
"@types/react-dom": "^16.9.8",
"@typescript-eslint/eslint-plugin": "^3.10.1",
"@typescript-eslint/parser": "^3.10.1",
"antd": "^4.5.3",
"antd-dayjs-webpack-plugin": "^1.0.0",
"awesome-typescript-loader": "^5.2.1",
"axios": "^0.19.2",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.0",
"babel-plugin-import": "^1.13.0",
"babel-plugin-react-css-modules": "^5.2.6",
"classnames": "^2.2.6",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^3.0.1",
"copy-webpack-plugin": "^5.1.1",
"core-js": "^3.6.4",
"cross-env": "^6.0.3",
"css-loader": "^3.2.0",
"dayjs": "^1.8.15",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-config-standard": "^14.1.0",
"eslint-loader": "^3.0.4",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-standard": "^4.0.1",
"file-loader": "^5.0.2",
"history": "^4.7.2",
"html-webpack-plugin": "^3.2.0",
"install": "^0.12.2",
"is-promise": "^2.1.0",
"less": "^3.8.1",
"less-loader": "^5.0.0",
"lint-staged": "^10.0.8",
"mini-css-extract-plugin": "^0.8.0",
"mobx": "^5.15.6",
"mobx-react": "^6.1.4",
"mobx-react-router": "^4.1.0",
"mockjs": "^1.1.0",
"npm": "^6.10.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"pre-commit": "^1.2.2",
"progress-bar-webpack-plugin": "^1.12.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-intl-universal": "^2.2.5",
"react-refresh": "^0.8.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.0.0",
"socket.io-client": "^2.3.0",
"source-map-loader": "^1.0.2",
"speed-measure-webpack-plugin": "^1.3.1",
"style-loader": "^1.2.1",
"stylelint": "^13.0.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^19.0.0",
"terser-webpack-plugin": "^2.2.1",
"trtc-js-sdk": "^4.6.3",
"ts-import-plugin": "^1.6.6",
"typescript": "^4.0.2",
"webpack": "^4.41.2",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
最后
如果你觉得还不错或者有帮助的同学，欢迎关注，多多 star ；欢迎关注我的Blog
 |
1
fewok 2020-10-20 10:58:19 +08:00
这个么，先 star 吧。类似的很多，比如 https://umijs.org 、https://github.com/ykfe/egg-react-ssr
所以，对于 react 脚手架是越来越复杂了，React 、Mobx 、React-Router 是基本，然后能不能增加 SSR 、CSR 以及多页面 |
 |
2
yhyh 2020-10-20 14:00:49 +08:00
好活，我顶。 决定搬运你的 webpack 配置 自己玩玩
|
Select Language