搭建react的应用架构,使用webpack4,babel7,eslint,json-server,material-ui,react-router-dom,redux等技术栈
git clone https://github.com/lzhengms/react-app.git
npm i
npm start
访问 http://localhost:9000/和http://localhost:9000/about可看效果
npm build
- 使用json_server模拟数据
- API
webpack
: 为webpack配置目录;webpack.config.js
: 为webpack配置入口文件;package.json
: 为项目依赖管理文件;package-json.lock
: 为项目依赖版本锁文件;.babelrc
: babel的配置文件,使用babel编译React和JavaScript代码;eslintrc, eslintignore
: 分别为eslint语法检测配置及需要忽略检查的内容或文件;postcss.config.js
: CSS后编译器postcss的配置文件;public
: 一些静态文件,里面包含生成index.html的模板文件README.md
: 项目说明文档;src
: 开发代码目录- ├──
mocks
模拟的服务端数据 - ├──
styles
样式 - ├──
components
展示型组件 - ├──
config
全局配置 - ├──
constants
常量 - ├──
containers
容器组件 - ├──
store
redux store相关 - ├──
origins
应用请求的服务器的地址配置 - ├──
routes
应用路由模块 - ├──
services
应用的请求服务模块 - ├──
index.html
应用入口html - ├──
index.js
项目根组件文件
- webpack4, babel7, eslint, postcss
- react,react-dom: react的基本包
- redux,react-redux, react-router-redux:状态管理容器,把react,router和redux链接起来
- redux-devtools: 开发调试工具
- redux-saga: 异步请求管理
- axios: 请求包
- json-server:实现restfulapi,模拟服务端
- concurrently: 实现多命令同时运行
- react-router-dom:实现引用路由管理
- react-loadable: 做异步路由
解决方法:
在webpack中的scss-loader中加入exclude,如下图:
解决方法:
去掉babel中的@babel/plugin-transform-runtime插件
- 加入immutable支持不可变数据
- 加入redux-persit支持redux状态树的持久化
- 加入jest集成应用测试