react-redux-antd-ie8

特性

• react
• redux
• react-router
• react-router-redux
• webpack
• babel
• antd

Code Style

https://github.com/airbnb/javascript

npm 命令

创建logs文件夹

  mkdir logs

npm run <script>	解释
build-dev	服务启动在 http://127.0.0.1:4002，代码热替换开启。
build-prod	构建项目

启用node 服务

  node server.js

npm run build-prod 构建文件正常显示：

程序目录

.
├── build                             # 所有打包配置项
├── src                               # 程序源文件
│   ├── api                           # superagent 处理，基于node的Ajax组件
│   ├── components                    # 可复用的直观组件(Presentational Components)
│   ├── constants                     # 常量管理
│   ├── entries                       # 主页入口
│   │   ├── index.htlm                # 主入口 HTML 文件
│   │   ├── index.js                  # 主要 JS 文件
│   │   └── index.less                # 主入口 css 文件
│   ├── feature                       # 配置json文件
│   ├── routes                        # 主路由和异步分割点
│   │   └── index.js                  # 用store启动主程序路由
│   ├── services                      # 模拟服务
│   ├── store                         # Redux指定块
│   │   ├── middlewares               # 中间件管理
│   │   ├── modules                   # reducers/actions的集合
│   │   │   └── menu                  # 根据规则定制管理目录
│   │   │       ├── menu_action.js    # Action管理
│   │   │       ├── menu_reducer.js   # Reducer管理
│   │   │       └── menu_state.js     # State管理
│   │   ├── createStore.js            # 创建和使用redux store
│   │   ├── reducers.js               # Reducer注册和注入
│   │   └── types.js                  # 管理 Action、Reducer 公用的 types
│   ├── util                          # 工具包 
│   └── views                         # 业务页面管理
│       └── Home                      # 不规则路由
│           ├── index.js              # 路由定义和代码异步分割
│           ├── index.less            # 路由定义和代码异步分割
│           └── components            # 直观React组件
└── tests                             # 单元测试

兼容性

antd 官方介绍

Open src/entries/index.html

对于 IE8/9 等浏览器，需要提供 es5-shim 等 Polyfills 的支持，推荐使用 babel-polyfill。特别对于 IE8 需要配合使用 [email protected] 版本。

  <!--[if lt IE 10]>
  <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
  <![endif]-->

Environment

node >= 4

Redux

+  "react-redux": "^4.4.0",
+  "redux": "^3.3.1",
+  "redux-logger": "^2.6.1",
+  "redux-thunk": "^2.0.1"

Extension

+  "fetch-ie8": "^1.4.0",
+  "object-assign": "^4.0.1",

react-antd-webpack

react antd webpack 精简版脚手架