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