最新 react 開發框架（webpack2、react15、react-router4、antd-mobile）

Molin發表於2017-04-06
React框架Web

react-molin

react-molin是一個全新的基於webpack2、react15、react-router4、antd-mobile的前端架構實現方案（h5）

react-molin的優勢

  • 基於最新的webpack2、react15、react-router4

  • 相比antd官方框架dva更加輕量級

  • 支援多個單頁面應用同時開發

  • 不同入口頁面css/js單獨合併壓縮

  • 靜態檔案自動新增版本號

  • 高清指令碼解決方案，完美支援1px

  • ES2015

  • less替代css

  • fetch替代Ajax

專案依賴

  • webpack^2.3.2

  • antd-mobile^1.0.7

  • react^15.4.2

  • react-router-dom^4.0.0

執行

git clone https://github.com/Molin123/react-molin.git
npm install --registry https://registry.npm.taobao.org info underscore 
npm run start -- 127.0.0.1

然後即可以訪問http://127.0.0.1:1024/home.html#/看到頁面了

編譯

npm run build

編譯後的檔案會生成到output目錄下，直接將這個目錄下的檔案部署到伺服器上即可。

目錄結構

.
├── src
│   ├── app
│   │   ├── index.jsx
│   │   └── list.jsx
│   ├── home
│   │   ├── index.jsx
│   │   └── list.jsx
│   ├── home.jsx
│   ├── app.jsx
│   └── template.ejs
├── output
│   ├── css
│   ├── image
│   └── js
├── .babelrc
├── package.json
└── webpack.config.js

todoList

  1. 支援多入口（3.30 done）

  2. common拆分（暫時不做）

  3. 靜態檔案加戳（3.31 done）

  4. dev-server配置（4.6 done）

  5. 目錄結構優化

  6. webpack配置拆分（暫時不需要）

  7. 使用react-router路由（3.30 done）

  8. fetch語法支援（4.1 done）

  9. 靜態檔案輸出（3.31 done）

  10. 打包後js檔案過大（3.31 已做壓縮處理 後期進一步優化）

  11. 熱更新（4.5 done）

  12. css打包存在問題（4.5 done）

  13. 驗證多less檔案的合併情況（4.6 done）

  14. 熱更新響應太慢，可能和start時的Warning有關

  15. 圖片目錄

future

  1. redux

  2. deploy

  3. 。。。

github

react-molin

思考

  1. .babelrc 中 “presets”: [[“es2015”, “stage-0″]] 裡面為什麼不能加”react”

  2. react-router react-router-dom

  3. BrowserRouter 未除錯成功，最後選用 HashRouter

  4. new webpack.optimize.CommonsChunkPlugin(`common`)拆分後，本地開發無法載入到css，兩個入口的js大小不一樣

  5. –inline 和 –hot 都可以實現熱更新 區別？ 對於[hash]和[chunkhash]支援情況？同時加上plugins會記憶體洩漏？

相關文章