轻松开发reactSpa项目：mobx数据流，react-router4结合权限处理，webpack4高效开发环境

#1

mobx_antd_react

中后台spa完整项目脚手架。
项目地址 https://github.com/Tianlikai/mobxSpa

写在前面

使用 webpack4.xx，区分开发环境和生产环境，开发环境打包编译超快，生产环境的优化基本都有。
mobx 做状态管理，灵活方便
antd 做 ui 易于维护
axios 请求 api
mock 数据前端独立开发

写得不容易
大家喜欢的话随手感谢给个星

文件目录

├── node_modules:                   模块文件夹
|   └── ...
├── dist:                           打包生成目录
├── src:                            开发目录
|   ├── components:                 公共组件
|   ├── layouts:                    布局组件
|   ├── libs:                       全局工具函数
|   ├── mocker:                     模拟接口
|   ├── pages:                      项目view
|   |   ├── myAgent:                我的代理模块
|   |   ├── operationLog:           日志模块
|   |   ├── orgAdmin:               我的机构模块
|   |   ├── styles:                 home/sign的样式
|   |   ├── Home.js:                项目骨架
|   |   └── SignIn.js:              登陆模块
|   ├── static:                     静态文件
|   ├── store:                      mobx store文件
|   ├── setting:                    配置文件
|   |   ├── api.js:                 API配置文件
|   |   ├── consts.js:              常量文件
|   |   └── routeAndPermissions.js: 权限/路由配置
|   ├── index.ejs:                  模版文件
|   └── index.js:                   入口文件
├── .babelrc                        babel配置文件
├── .eslintignore                   eslint忽略
├── .eslintrc.json                  eslint
├── .gitignore                      git忽略文件
├── env.js                          开发变量配置
├── jsconfig.json                   代码兼容装饰器写法
├── package.json                    项目依赖 npm
├── README.MD                       项目信息
├── webpack.config.js               webpack配置文件
└── webpack.dll.config.js           dll分离公共库

技术栈

  • react 16.3xx
  • react-dom
  • react-router 4.xx
  • mobx 数据流
  • webpack 4.xx
  • ESLint 代码规范
  • axios 异步请求
  • antd ui
  • mock 模拟接口数据

开发环境

生产环境

  • npm run build

项目理解指南

  • 此处先了解项目如何启动并如何运行所以请先忽略 webpack 等工具
  • 首先请看明白之前的“文件目录”
  • 看懂项目主要是看懂项目骨架
  • /src/index.js 先看项目入口
  • /src/pages/Home.js 主文件骨架 进入文件看注释（结合/src/settings/routeAndPermissions.js 看）
  • /src/settings/routeAndPermissions.js 配置文件 （结合/src/pages/Home.js 看）
  • /src/pages/myAgent/index.js 项目子模块 进入文件看注释 （结合/src/settings/routeAndPermissions.js 看）

待优化项

  • 权限/路由/目录 三者之间项目映射 简化配置
  • mobx 性能优化
  • 编写单元测试
  • 异步请求优化
  • 动态加载组件 react-loadable

未来展望

  • css in js style-component
  • 脚本生成组件模块以及测试用例
  • 离线优先

注意

  • windows 平台下“git clone”项目可能会出现丢失 src 目录下部分代码
  • windows 平台下可以通过 Download Zip 形式下载
  • 解压后部分“import”文件名或出错，通过“npm i” -> "npm run dev“ 会抛出所有错误文件目录定位
  • 找到修改为正确的文件目录即可
基于mobx，抽离查询表格业务
React 源码分析，实现一个简易版的React
轻松开发reactSpa项目，实现lint-staged统一代码库风格
#2

本项目，绝对对于基本的中后台项目来说，绝对干货。

#3

我把整个项目git clone下来，但是报错。。。。。

#4

window开发平台，项目根本没有办法启动。。。。

#5

你那边报什么错呢

#6

#7

src/index.js 16行标点符号报错

#8

#9

晚上回家我用windows试一下，你现在可以先试一下更新一下最新的nodejs版本，有可能是还没支持“…”这种语法

1 Like
#10

看了下代码感觉好难啊。。太菜了 楼主威武

#11

好吧，那我把node升级到最新的稳定版本

#12

然而，并没有什么不一样，还是项目没有办法启动

#13

我把node10.9的版本降到node 8.11再试一下。。。one more try。。。。。。

#14

然而，并没有什么卵用。。。

#15

。。。。win10 上，不可以运行你这个项目。。。。sorry。。。。。

#16

你好，我今天实际操作了一下
应该是windows下在执行“git Clone”的时候， src文件目录下面的部分文件缺失啦，你看一下是不是有几个文件没有clone下来。 “git Clone”这个我问题暂时没有解决

替代方案：
1 下载代码的压缩包
2 解压后执行“npm i”
3 然后执行“npm run dev” （控制台会抛出少量文件名不对，找到对应的文件修改）
4 打开项目目录，根据错误提示找到文件，进行手工自改（亲测主要错误在“src/settings/routeAndPermissions.js”文件中修改为正确目录即可）
5 再次“npm run dev”, 可以成功启动
6 还有一个问题：npm run build:dll 里面的“rm” 删除文件window不支持 （可以npm i rimraf --save-dev 替代“rm”）自己看rimraf.js

#17

这样肯定能跑起来 ONE MORE TRY…

#18

呵呵，这也可以，git clone，居然会吧src 下面的文件搞丢失了。。。。
好吧，我有空的时候，下载一下代码压缩包，试试看，我会继续关注你的项目的，
感谢你的解答。。。。

#19

不容易啊，终于可以正常运行了。。。。。

#20

这个文件夹下的路径会不正确，修改好后，就可以正常运行了