之前vue的學(xué)習(xí)中使用Vue-cli 可以快速創(chuàng)建vue項(xiàng)目桑孩，所以在學(xué)習(xí)React的時(shí)候我就在想有沒(méi)有類似于cli的腳手架可以幫助我們快速構(gòu)建React項(xiàng)目畔规。然后我就找到了...很多峭沦！官方有一個(gè)cerate-react-app被吐槽不好用，還有大神基于Vue-cli改造了一個(gè)！React Demo 。
更多則是基于Yeoman的苗分，這里找到兩個(gè)不錯(cuò)的腳手架，分別是generator-reactpackage和generator-react-webpack牵辣。前者適合小型項(xiàng)目摔癣，默認(rèn)使用sass。后者功能更為完善纬向，部署時(shí)提供css择浊，sass，less選項(xiàng)罢猪，適合大中型項(xiàng)目近她。
順帶提一下找到的一個(gè)不錯(cuò)的模板：react-seed，雖然作者說(shuō)是腳手架膳帕，但個(gè)人感覺(jué)更像一個(gè)模板，配置相當(dāng)全面薇缅，克隆下來(lái)改改就能直接上手危彩，也是十分方便快速的。
這里就以generator-reactpackage為例簡(jiǎn)要介紹一下React腳手架配置泳桦。
有興趣自己開發(fā)腳手架的可以移步：開發(fā)屬于自己的yeoman腳手架（generator-reactpackage） 汤徽，這篇博客對(duì)yeoman開發(fā)腳手架做了詳細(xì)的介紹。
檢查Node.js版本為最新
這里不多說(shuō)灸撰，不知道怎么升級(jí)的參照：一行命令搞定node.js 版本升級(jí)谒府，或者干脆直接去官網(wǎng)下載最新版本覆蓋安裝拼坎。
替換npm源為淘寶源
npm config set registry “https://registry.npm.taobao.org”
之前的開發(fā)中多是使用cnpm，后來(lái)實(shí)際上手中發(fā)現(xiàn)generator-reactpackage在創(chuàng)建好項(xiàng)目后會(huì)自動(dòng)執(zhí)行npm install去安裝依賴完疫，如果不事先將npm源替換為淘寶源泰鸡，因?yàn)榫W(wǎng)絡(luò)的問(wèn)題，install的過(guò)程會(huì)巨慢而且易出錯(cuò)壳鹤。
安裝腳手架
因?yàn)檫@個(gè)腳手架是使用yeoman開發(fā)盛龄，所以需要先安裝yeoman，這里使用全局安裝：
npm install -g yo
然后安裝腳手架芳誓，依然是全局安裝：
npm install -g generator-reactpackage
創(chuàng)建React項(xiàng)目
先在工作目錄新建項(xiàng)目文件夾余舶，使用命令行定位到該文件夾下，鍵入：
yo reactpackage
隨后reactpackage會(huì)在改目錄中創(chuàng)建項(xiàng)目所需文件锹淌，完成后顯示：I'm all done.字樣匿值，并隨后自動(dòng)執(zhí)行npm install && bower install去安裝項(xiàng)目中的依賴。安裝完成后鍵入：
npm run dev
項(xiàng)目即開始自動(dòng)處理赂摆，手動(dòng)打開瀏覽器輸入：loaclhost:8888 即可看到頁(yè)面挟憔，支持熱加載。
如果想在啟動(dòng)項(xiàng)目后自動(dòng)打開瀏覽器库正，可以參照這個(gè)：webpack 啟動(dòng)后自動(dòng)打開瀏覽器插件：open-browser-webpack-plugin
