Generator-react-auto NPM

yeoman for react-auto

React项目脚手架，搭配yeoman使用

特点

React
React-router
Redux
Seamless-Immutable (配合Redux使用)
Modules-css
Redux-Actions (配合Redux使用)
Classnames
Sass
Webpack
ES6
Rem (若用于Pc端或不需要Rem单位请在template.html的中删除相关js脚本)

使用

// 安装yeoman
$ npm install -g yo

// 然后安装脚手架

$ npm install -g generator-react-auto

// 构建项目
$ mkdir myApp
$ cd myApp
$ yo react-auto

... // 根据提示配置一些信息

// 安装npm包
$ yarn

扩展项目

$ yo react-auto:create

目前可扩展的有

component
container
view reducer // 增加完之后要手动在src/redux/actions/index.js与src/redux/reducers/index.js中引入

Css Modules

支持css-modules，为了与scss能共同使用，css-modules的样式文件使用.mass

项目使用

1. NPM指令

  // cd 到根目录下 安装依赖
  $ yarn

  // 本地开发模式
  $ yarn run dev

  // 测试包构建模式
  $ yarn run build-dev

  // 上线包构建模式
  $ yarn run build

本地开发模式默认会本地代理 http://dev-web.autozuche.com 以便跨域 >但是在某些情况下我们依然会使用到原有的test1到5的环境这种情况下 >要在开发模式的命令下加入参数可以一键切换环境使用方式如下：
$ npm run dev test=1
// 或者
$ npm run dev --test=1
// 两种方法均可
// 切忌 test和=号之间 不得存在空格

2. 目录结构

|- config 环境配置目录
|   |- config dev.conf.js    开发模式下配置表
|   |- config prod.conf.js   生产模式下配置表
|   |- config dev.server.js  dev-server配置
|   |- config utils          环境相关工具
|- src 开发环境
|	|- app.jsx  入口js文件，注入基础的依赖与模板
|	|- app.scss 全局样式文件
|	|- assets  静态资源包
|       |- fonts
|       |- images
|       |- medias
|       |- mass    一些需要全局引入工具和重置的CSS类封装
|       |- js
|	|- redux
|		|- actions
|		|- reducers
|		|- store 配置的store
|		|- connect.js 连接组件与redux
|		|- index.js store与connect导出
|	|- router 路由
|		|- index.jsx    路由组件导出
|		|- routes.jsx   全部路由
|	|- views
|		|- [name] 以一级路由组件为文件夹名
|		    |- index.jsx  导出组件
|		    |- style.mass 组件样式
|   |- components
|       |- [name] 以无状态组件功能为名
|           |- index.jsx  组件导出
|           |- style.mass 组件样式
|   |- utils
|       |- AsyncComponent 异步加载高阶组件
|       |- mass           css-modules高阶组件
|       |- http           封装 axios 请求工具
|   |- template.html html文件模板
|- .eslintrc.js JS编码规范
|- .babelrc.js  es6/7转es5插件配置

3. 重要说明

开发时端口在config/devServer.conf.js中的port属性修改
antd UI组件库已经配置好按需加载具体按需使用方法请查阅ant官网
js与jsx编码规范请严格按照项目根目录下.eslintrc.js中所配置的规则内有详细注释编码前请仔细审阅
CSS类名需要遵守BEM命名规范
使用css-modules的样式表后缀名请使用.mass
样式表如果是全局通用请使用.scss .css .less后缀文件不会被css-modules解析
如果旧版本安卓机或者IOS10以下的苹果手机访问本地白屏使用如下两种方案即可解决
1. 自行手动降级webpack-dev-server版本
2. 关闭webpack-dev-server的热更新功能
同时使用connect与css-modules高阶组件请严格遵守先connect 后mass 否则会报错进而无法使用详细用法请看代码示例
因为后端接口前缀的不断变更我们取消了请求的BaseUrl 所以在填写请求URL时应当写入全部URL