之前vue的學習中使用Vue-cli 可以快速創(chuàng)建vue項目，所以在學習React的時候我就在想有沒有類似于cli的腳手架可以幫助我們快速構(gòu)建React項目。然后我就找到了...很多！官方有一個cerate-react-app被吐槽不好用，還有大神基于Vue-cli改造了一個！React Demo 。

更多則是基于Yeoman的，這里找到兩個不錯的腳手架，分別是generator-reactpackage和generator-react-webpack。前者適合小型項目，默認使用sass。后者功能更為完善，部署時提供css，sass，less選項，適合大中型項目。

順帶提一下找到的一個不錯的模板：react-seed，雖然作者說是腳手架，但個人感覺更像一個模板，配置相當全面，克隆下來改改就能直接上手，也是十分方便快速的。

這里就以generator-reactpackage為例簡要介紹一下React腳手架配置。

有興趣自己開發(fā)腳手架的可以移步：開發(fā)屬于自己的yeoman腳手架（generator-reactpackage） ，這篇博客對yeoman開發(fā)腳手架做了詳細的介紹。

檢查Node.js版本為最新

這里不多說，不知道怎么升級的參照：一行命令搞定node.js 版本升級，或者干脆直接去官網(wǎng)下載最新版本覆蓋安裝。

替換npm源為淘寶源

npm config set registry “https://registry.npm.taobao.org”

之前的開發(fā)中多是使用cnpm，后來實際上手中發(fā)現(xiàn)generator-reactpackage在創(chuàng)建好項目后會自動執(zhí)行npm install去安裝依賴，如果不事先將npm源替換為淘寶源，因為網(wǎng)絡(luò)的問題，install的過程會巨慢而且易出錯。

安裝腳手架

因為這個腳手架是使用yeoman開發(fā)，所以需要先安裝yeoman，這里使用全局安裝：

npm install -g yo

然后安裝腳手架，依然是全局安裝：

npm install -g generator-reactpackage

創(chuàng)建React項目

先在工作目錄新建項目文件夾，使用命令行定位到該文件夾下，鍵入：

yo reactpackage

隨后reactpackage會在改目錄中創(chuàng)建項目所需文件，完成后顯示：I'm all done.字樣，并隨后自動執(zhí)行npm install && bower install去安裝項目中的依賴。安裝完成后鍵入：

npm run dev

項目即開始自動處理，手動打開瀏覽器輸入：loaclhost:8888 即可看到頁面，支持熱加載。

如果想在啟動項目后自動打開瀏覽器，可以參照這個：webpack 啟動后自動打開瀏覽器插件：open-browser-webpack-plugin