能夠自定義配置的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熱更新無效。