最新 react 開發框架（webpack二、react1五、react-router四、antd-mobile）

react-molin

react-molin是一個全新的基於webpack二、react1五、react-router四、antd-mobile的前端架構實現方案（h5）

react-molin的優點

• 基於最新的webpack二、react1五、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會內存泄漏？