能够自定义配置的React脚手架

react-webpack-boilerplate

A SPA boilerplate with React, built with love.

Features

• React 15.4.2

• Redux 3.6.0

• react-redux 5.0.2, 用来绑定 React 和 Redux.

• react-router 3.0.2, 当v4发布稳定版本时, 会进行相关的更新

• JSX

• ES6

• webpack 2.2

• Express, 测试服务器

• Hot-Reload, 支持 React 和 Redux!

• Proxy

• Environmental value

• ESlint, 使用 standard 和 standard-react 进行代码风格检查

• redux-devtools, 对 store 进行更加友好的调试

Usage

# 该模版依赖于 sao 模版系统，因此请先sao
npm install -g sao

# 下载模版
sao SidKwok/react-webpack-boilerplate new-project --install

# 安装所有依赖
cd new-project
npm install

# 运行测试环境, 默认端口: 8080
npm run dev

# 生产环境
npm run build

# 检查文件代码风格 (若是有使用 eslint 的话)
npm run lint

Doc

该模版大部分参考了 vue-cli/webpack 的设计。 若是你对 vue-cli 很熟悉的话, 你应该会对该模版很快上手。若是想看模版的结构，能够直接在full-features分支查看。

Pre-Processor

你可使用 less, sass 或者 stylus 做为你的CSS预处理器，不过你首先得安装相关的依赖。举个?，假如你要使用 less：

npm install less less-loader --save-dev

而后，你就能够在你的组件里 import 你的 less 文件。

Proxy

该模版使用 http-proxy-middleware 来代理接口.
举个?, 你想代理接口 /api/get-post 和 /api/get-id 到, 你能够在 config/index.js 中添加如下代码:

...
dev: {
    proxyTable: {
        '/api': {
            target: 'http://example.org',
            changeOrigin: true
        }
    }
}
...

你即可以在测试服务器中使用你所代理的接口。在这里查看更多的选项。

Env

vue-cli/webpack 的文档详细地介绍了环境变量地用法。

Hot-Reload

该模版使用了react-hot-loader v3来对React的组件进行热更新，甚至支持Redux的热更新！但愿你玩的开心。

ESlint

standard 和 standard-react 是该模版默认的代码风格，你也能够在 .eslintrc.js 中使用本身喜好的代码风格。

react-devtools

该模版已经默认开启了浏览器的redux-devtool，可是若是要让其工做起来，你须要下载相关的浏览器插件。

你也能够选择 Customized DevTools， 这个是创建在页面里面的一个组件，你能够在代码里自定义你须要的devtool。在这里查看更多的选项。

Production

生产环境的文件(也就是dist里的文件)是适用于真实的server的，因此你不该该直接访问index.html。若是要对dist内的文件进行测试，你可使用静态服务器：

npm install -g anywhere # 或者其余静态服务器

# 在 `./dist` 文件夹里
anywhere

TODO

• [x] eslint

• [ ] unit test

• [ ] e2e test

• [x] Redux comming soon!

• [x] hot-reload for redux

• [ ] better structure for redux

• [x] support redux-devtools-extension

• [ ] 使用happypack让构建更快

• [x] DevTools的选择：使用浏览器的仍是自定义的

Known Issues

• 当有使用react-router的时候，热更新会致使浏览器的console报告错误信息，这是react-router v3的已知issue，可是并不影响使用。我使用了随机数暂时解决了这个报错的问题，谢谢@chenz24提供的解决方案。v4彷佛不存在这个问题。

• 当有使用Redux的时候，热更新会致使浏览器报错<Provider> does not support changing store on the fly...，并且会致使redux热更新无效。