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
- 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 插件配合使用。
支持 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#规则定义
...
MIT