React 项目架构:
单页应用:
React + webpack + gulp + redux + mocha + dev-server
React 依赖:
- es6-promise
- react
- react-router
- react-router-redux
- redux
- react-redux
- react-dom
- react-saga/react-thunk
- whatwg-fetch
中间件:
- redux-logger
UI组件:
- node-sass
- style-loader
- css-loader
- sass-loader
- autoprefixer :自动加浏鉴器兼容前缀
- classnames : css classnames 书写模式优化
- postcss-loader
- jsx-loader
- material-ui 集成UI套件
ES6 Babel:
- babel-core
- babel-eslint
- babel-loader
- babel-preset-react
- babel-preset-es2015
- babel-preset-stage-0
- babel-plugin-transform-runtime
- babel-plugin-transform-react-jsx
eslist 代码规范:
- eslint
- eslint-loader
- eslint-config-airbnb
- eslint-plugin-react
- eslint-plugin-import
- eslint-plugin-jsx-a11y
Gulp 使用:
- sass/less 构建
- image 压缩
- html/jade 模板
webpack:
- js文件导入
- 访问路径配置
测试工具:
- chai
- mocha
- karma
1. clone项目后,执行 cnpm install node-sass , npm install
2. 安装全局运行环境:
npm install webpack -g,
npm install webpack-dev-server -g ,
npm install babel-cli babel-core babel-preset-es2015 -g,
npm install gulp -g,
3. 执行 gulp 命令,构建项目,
4. 执行 npm run dev 命令,启动server,默认端口为8080,
5. 执行 npm run test 命令,启动测试功能,可以进行单元测试。