React seed構(gòu)建過(guò)程
寫(xiě)在前面
Facebook發(fā)布react之后，一直想找機(jī)會(huì)學(xué)一下,從官網(wǎng)到博客到問(wèn)答，積累了點(diǎn)零散的知識(shí),在github找了很多學(xué)習(xí)react的工程,不是項(xiàng)目太大就是配置太多,于是最近參考了vue-cli以及github上的一些開(kāi)源項(xiàng)目,根據(jù)自己的喜好，包括目錄結(jié)構(gòu),命名,文件存放,弄了一個(gè)react-starter
地址:
https://github.com/guoxiangwen/react-starter
目錄結(jié)構(gòu)
集成的東西
webpack2,react-router,less,nightwatch,jest,babel,沒(méi)有集成redux因?yàn)椴皇撬许?xiàng)目都會(huì)用到它,如果你的項(xiàng)目要用，自行npm i就行了
開(kāi)發(fā)環(huán)境
開(kāi)發(fā)環(huán)境下還是用的webpack-dev-server,并沒(méi)有自己像vue-cli那樣自己根據(jù)express來(lái)配置.這樣已經(jīng)夠用了，而react官網(wǎng)的create-react-app是把所有配置都封裝在了react-scripts中.對(duì)開(kāi)發(fā)者來(lái)說(shuō)不是很透明,也不知道發(fā)生了什么.
npm start
生產(chǎn)環(huán)境
生產(chǎn)環(huán)境大家可以自己跑一個(gè)靜態(tài)server，例如:
http-server,anywhere，用來(lái)訪問(wèn)build文件夾,項(xiàng)目的根目錄中還準(zhǔn)備了一個(gè)nginx.conf。用來(lái)配置nginx.大家只需要修改location的root就行了npm run build
location / {
root G:\\workspace\\github\\react-starter\\build;
index index.html index.htm;
try_files $uri $uri/ /index.html =404; #客戶端開(kāi)啟html5mode
}
測(cè)試
unit測(cè)試
這里用的是react官網(wǎng)推薦的jest
npm run unit
e2e測(cè)試
雖然平時(shí)寫(xiě)e2e寫(xiě)得少，不過(guò)這里還是用到了nightwatch。
npm run e2e
最后
大家如果有什么建議可以到issue里面提.
