react-molin
react-molin是一个全新的基于webpack2、react15、react-router4、antd-mobile的前端架构实现方案（h5）
react-molin的优势
-
@H_502_7@
基于最新的webpack2、react15、react-router4
@H_502_7@相比antd官方框架dva更加轻量级
@H_502_7@ @H_502_7@不同入口页面css/js单独合并压缩
@H_502_7@ @H_502_7@ @H_502_7@ES2015
@H_502_7@less替代css
@H_502_7@fetch替代Ajax
项目依赖
-
@H_502_7@
webpack^2.3.2
@H_502_7@antd-mobile^1.0.7
@H_502_7@react^15.4.2
@H_502_7@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
-
@H_502_7@
支持多入口（3.30 done）
common拆分（暂时不做）
静态文件加戳（3.31 done）
dev-server配置（4.6 done）
目录结构优化
@H_502_7@webpack配置拆分（暂时不需要）
使用react-router路由（3.30 done）
fetch语法支持（4.1 done）
打包后js文件过大（3.31 已做压缩处理 后期进一步优化）
热更新（4.5 done）
css打包存在问题（4.5 done）
验证多less文件的合并情况（4.6 done）
热更新响应太慢，可能和start时的Warning有关
@H_502_7@图片目录
future
github
思考
-
@H_502_7@
.babelrc 中 "presets": [["es2015","stage-0"]] 里面为什么不能加"react"
@H_502_7@react-router react-router-dom
@H_502_7@BrowserRouter 未调试成功，最后选用 HashRouter
@H_502_7@new webpack.optimize.CommonsChunkPlugin('common')拆分后，本地开发无法加载到css，两个入口的js大小不一样
@H_502_7@--inline 和 --hot 都可以实现热更新 区别？ 对于[hash]和[chunkhash]支持情况？同时加上plugins会内存泄漏？
