可以自定義配置的React腳手架

xialong 發(fā)布于2019-08-20 14:49 / 1861人閱讀

摘要：和是該模版默認(rèn)的代碼風(fēng)格，你也可以在中使用自己喜愛的代碼風(fēng)格。你也可以選擇，這個是建立在頁面里面的一個組件，你可以在代碼里自定義你需要的。

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, 當(dāng)v4發(fā)布穩(wěn)定版本時, 會進(jìn)行相關(guān)的更新

JSX

ES6

webpack 2.2

Express, 測試服務(wù)器

Hot-Reload, 支持 React 和 Redux!

Proxy

Environmental value

ESlint, 使用 standard 和 standard-react 進(jìn)行代碼風(fēng)格檢查

redux-devtools, 對 store 進(jìn)行更加友好的調(diào)試

Usage

# 該模版依賴于 sao 模版系統(tǒng)，所以請先sao
npm install -g sao

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

# 安裝全部依賴
cd new-project
npm install

# 運行測試環(huán)境, 默認(rèn)端口: 8080
npm run dev

# 生產(chǎn)環(huán)境
npm run build

# 檢查文件代碼風(fēng)格 (如果有使用 eslint 的話)
npm run lint

Doc

該模版大部分參考了 vue-cli/webpack 的設(shè)計。如果你對 vue-cli 很熟悉的話, 你應(yīng)該會對該模版很快上手。如果想看模版的結(jié)構(gòu)，可以直接在full-features分支查看。

Pre-Processor

你可以使用 less, sass 或者 stylus 作為你的CSS預(yù)處理器，不過你首先得安裝相關(guān)的依賴。舉個?，假如你要使用 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
        }
    }
}
...

你便可以在測試服務(wù)器中使用你所代理的接口。在這里查看更多的選項。

Env

vue-cli/webpack 的文檔詳細(xì)地介紹了環(huán)境變量地用法。

Hot-Reload

該模版使用了react-hot-loader v3來對React的組件進(jìn)行熱更新，甚至支持Redux的熱更新！希望你玩的開心。

ESlint

standard 和 standard-react 是該模版默認(rèn)的代碼風(fēng)格，你也可以在 .eslintrc.js 中使用自己喜愛的代碼風(fēng)格。

react-devtools

該模版已經(jīng)默認(rèn)開啟了瀏覽器的redux-devtool，但是如果要讓其工作起來，你需要下載相關(guān)的瀏覽器插件。

你也可以選擇 Customized DevTools，這個是建立在頁面里面的一個組件，你可以在代碼里自定義你需要的devtool。在這里查看更多的選項。

Production

生產(chǎn)環(huán)境的文件(也就是dist里的文件)是適用于真實的server的，所以你不應(yīng)該直接訪問index.html。如果要對dist內(nèi)的文件進(jìn)行測試，你可以使用靜態(tài)服務(wù)器：

npm install -g anywhere # 或者其他靜態(tài)服務(wù)器

# 在 `./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讓構(gòu)建更快

[x] DevTools的選擇：使用瀏覽器的還是自定義的

Known Issues

當(dāng)有使用react-router的時候，熱更新會導(dǎo)致瀏覽器的console報告錯誤信息，這是react-router v3的已知issue，但是并不影響使用。我使用了隨機數(shù)暫時解決了這個報錯的問題，謝謝@chenz24提供的解決方案。v4似乎不存在這個問題。

~~當(dāng)有使用Redux的時候，熱更新會導(dǎo)致瀏覽器報錯 does not support changing store on the fly...，而且會導(dǎo)致redux熱更新無效。~~