webpack + flux + react 腳手架

簡單的flux腳手架

為什么要用腳手架

• 至少更容易在正確的路上摔倒...
</ul>

工作流

• 開發調試(dev)
• 構建(build)
• 生產發布(deploy)
</ul>

構建(build)

兩種選擇：

• bundle.js: 其實只是將JSX,ES6,css-loader等編譯，構建成bundle.js，能夠在瀏覽器上直接使用。

  </li>

• app + vendors: 將第三方的插件和本地代碼分開，生成app.js和vendors.js 實際上是更好的選擇。

  </li> </ul>

  生產發布(deploy)

  就是uglify后的構建(build)，由于只是腳手架，不牽涉到版本發布。

  開發調試(dev)

  兩個亮點：

  1. 改變代碼，瀏覽器即時刷新

     </li>

  2. 熱部署react組件

     </li> </ol>

     eg：熱部署組件的簡單解釋

     1. 點擊事件，改變state,渲染組件
     
     
     改動組件代碼，把名稱亂改,此時刷新頁面，仍保留之前state</pre> 
      
     本地瀏覽器自動刷新調試 
     運行npm run dev 
     將index.html放入build文件夾下,并且引入編譯后的js文件(實際上文件夾不存在，只是運行時有) 
     文件結構 
     整體架構 
     整體架構和官網給出的demo實現方式一致，不同的是引用了ES6的module。 
     一張圖讀懂flux1 
      
     測試 
     全部測試都采用jest 
     
     參數解釋 
     webpack-dev-server --devtool eval --progress --colors --content-base --hot build 
     
     progress 進度 
     colors 顏色 
     devtool eval 為代碼創建地址，報錯的時候可以定位文件和行號 
     content-base 設置輸出目錄 
     hot 即時刷新 
     
     
     
     
     
     
     https://github.com/quirkyshop/babyflux