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

~~支持多入口（3.30 done）~~
~~common拆分（暂时不做）~~
~~静态文件加戳（3.31 done）~~
~~dev-server配置（4.6 done）~~
目录结构优化
~~webpack配置拆分（暂时不需要）~~
~~使用react-router路由（3.30 done）~~
~~fetch语法支持（4.1 done）~~
~~静态文件输出（3.31 done）~~
~~打包后js文件过大（3.31 已做压缩处理后期进一步优化）~~
~~热更新（4.5 done）~~
~~css打包存在问题（4.5 done）~~
~~验证多less文件的合并情况（4.6 done）~~
热更新响应太慢，可能和start时的Warning有关
图片目录

future

redux
deploy
。。。

github

react-molin

思考

.babelrc 中 "presets": [["es2015", "stage-0"]] 里面为什么不能加"react"
react-router react-router-dom
BrowserRouter 未调试成功，最后选用 HashRouter
new webpack.optimize.CommonsChunkPlugin('common')拆分后，本地开发无法加载到css，两个入口的js大小不一样
--inline 和 --hot 都可以实现热更新区别？对于[hash]和[chunkhash]支持情况？同时加上plugins会内存泄漏？

最新 react 开发框架（webpack2、react15、react-router4、antd-mobile）相关推荐

React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言一如既往,实战出真理. 有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 免得浪费您的时间效果图基于antd的sidebar组件封装折腾记的技术栈选型 Mobx & mobx-react ...
视频教程-19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频-ReactJS
19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/j ...
React学习：脚手架搭建、antd引入-学习笔记
文章目录 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建项目目录结构 antd引入 antd附加:数据可放置的三个位置 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建 ...
基于Dav快速搭建React开发框架
1. dva-cli 安装 dva-cli,具体教程快速上手dva 2.改写上面示例中的Products.js 将函数组件改成React类组件 import React from "rea ...
React 全家桶（react脚手架 redux react-redux react-router-dom ui库 reactHook）含自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物为何学习 React React 初体验来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
深入了解React新引擎：React Fiber
Facebook正在以流行的JavaScript框架React为基础开发一个全新的架构.这个名为React Fiber的全新设计改变了检测变更的方法和时机,借此可改进浏览器端和其他渲染设备的响应速度. ...
Web前端：React Native Web与React — 比较指南
React 是Facebook开发的用于构建交互式用户界面的JavaScript库.React 在 Apache 许可下作为开源软件提供,可用于个人和商业网站.客户端 Web 应用程序和服务器应用 ...
React系列(一) -邂逅React开发
一. 认识React 1.1. React是什么? React是什么呢?相信每个做前端的人对它都或多或少有一些印象. 这里我们来看一下官方对它的解释:用于构建用户界面的 JavaScript 库. 我 ...
React、react生命周期、react生命周期运行过程、shouldComponentUpdate的用法
React.react生命周期.react生命周期运行过程 1.创建阶段 constructor(){super()console.log('执行构造函数')this.state={num:1}}UN ...
React（二）react脚手架的搭建
目录一.搭建本地开发环境二.创建 React 脚手架项目三.VS Code 启动脚手架项目 React脚手架我们所用的其中一个是Create React App,Create React App ...

最新 react 开发框架（webpack2、react15、react-router4、antd-mobile）

react-molin

react-molin的优势

项目依赖

运行

编译

目录结构

todoList

future

github

思考

最新 react 开发框架（webpack2、react15、react-router4、antd-mobile）相关推荐

最新文章

热门文章