react-redux-boilerplate

A boilerplate with react, redux, redux-saga, react-router, webpack, babel, css-modules ...

环境准备

先安装依赖

$ npm install

想要更好的开发体验，还需安装两个 Chrome 插件：Redux DevTools 和 LiveReload 。

启动调试

$ npm start
$ open http://localhost:8989/

构建代码

$ npm run build

// 构建但不压缩
$ npm run build -- --no-compress

目录结构

.
├── /dist/               # 构建输出的文件会在这里
├── /node_modules/       # 第三方类库和工具
├── /src/                # 应用源码
│ ├── /components/       # React components
│ ├── /constants/        # 常量 (比如 action types 等)
│ ├── /containers/       # React containers
│ ├── /entries/          # 应用入口
│ ├── /reducers/         # reducers
│ ├── /routes/           # 路由信息
│ ├── /sagas/            # redux-sagas
│ └── /services/         # 处理和服务器的交互
├── proxy.config.js      # 配置 dora-plugin-proxy，用于 mock 和在线调试
├── webpack.config.js    # 扩展 webpack 配置
└── package.json         # 配置入口文件、依赖和 scripts

系统组织

详见：React + Redux 最佳实践

内置类库

• react
• redux
• redux-saga
• redux-actions
• react-router
• reselect
• classnames
• isomorphic-fetch
• react-router
• react-router-redux

工具特性

热替换和 LiveReload

基于 Webpack Vanilla HMR，支持 components, containers, reducers, routers 目录的模块热替换，其余目录的修改则会自动刷新页面。

CSS 的自动刷新需通过 LiveReload Chrome 插件配合使用。

• Why Vanilla HMR

支持 css-modules

后缀为 .module.less 或 .module.css 的会被解析为 css-modules

内置支持 jsx-control-statements

jsx 里可以通过 If, Else 和 For 标签来实现控制语句

运行错误和语法错误的提醒

通过 redbox-react 和 webpack hmr overlay 提示运行错误和语法错误

自动引入 reducer 和 saga

通过 webpack 的 require.context 黑魔法批量引入 reducer 和 saga，新增、删除和重命名时会更方便

自动安装 npm 依赖

数据 mock 和线上调试

通过 dora-plugin-proxy 实现，详见：https://github.com/dora-js/dora-plugin-proxy#规则定义

...

License

MIT