Molin123 / React Molin
react-molin是一个全新的基于webpack3、react15、react-router4、antd-mobile的前端架构实现方案(h5)
Stars: ✭ 184
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Molin
Frasco
Quick starter for Jekyll including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, ESLint, imagemin, Browsersync, etc.
Stars: ✭ 123 (-33.15%)
Mutual labels: webpack, eslint
Book
《现代化前端工程师权威指南》https://guoyongfeng.github.io/book/
Stars: ✭ 141 (-23.37%)
Mutual labels: webpack, eslint
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+787.5%)
Mutual labels: webpack, eslint
Redux React Starter
DEPRECATED use the new https://github.com/didierfranc/react-webpack-4
Stars: ✭ 137 (-25.54%)
Mutual labels: webpack, eslint
Lecture Frontend Dev Env
"[인프런] 프론트엔드 개발환경의 이해와 실습" 강의 실습 자료입니다.
Stars: ✭ 108 (-41.3%)
Mutual labels: webpack, eslint
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (-21.2%)
Mutual labels: webpack, eslint
Iceberg
Front-End Boilerplate built with React + Babel + Webpack + SASS
Stars: ✭ 144 (-21.74%)
Mutual labels: webpack, eslint
Reeakt
A modern React boilerplate to awesome web applications
Stars: ✭ 116 (-36.96%)
Mutual labels: webpack, eslint
Awesome Vue Cli3 Example
🦅 Awesome example for rapid Vue.js development using vue-cli3 .
Stars: ✭ 160 (-13.04%)
Mutual labels: webpack, eslint
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (-37.5%)
Mutual labels: webpack, eslint
Vue Spa Project
vue.js + vuex + vue-router + fetch + element-ui + es6 + webpack + mock 纯前端SPA项目开发实践
Stars: ✭ 118 (-35.87%)
Mutual labels: webpack, eslint
React Starter
A basic template that consists of the essential elements that are required to start building a React (v16.3) application using Webpack (v4)
Stars: ✭ 108 (-41.3%)
Mutual labels: webpack, eslint
React Pages Boilerplate
Deliver react + react-router application to gh-pages
Stars: ✭ 134 (-27.17%)
Mutual labels: webpack, eslint
React Start Kit
A boilerplate of SPA, built with React.js, Webpack, ES6+, Redux, Router, Babel, Express, Ant Design...
Stars: ✭ 107 (-41.85%)
Mutual labels: webpack, ant-design
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-23.37%)
Mutual labels: webpack, eslint
Express Webpack React Redux Typescript Boilerplate
🎉 A full-stack boilerplate that using express with webpack, react and typescirpt!
Stars: ✭ 156 (-15.22%)
Mutual labels: webpack, eslint
react-molin
react-molin是一个全新的基于webpack3、react15、react-router4、antd-mobile的前端架构实现方案(h5)
react-molin的优势
- 基于最新的webpack3、react15、react-router4
- 相比antd官方框架dva更加轻量级
- 支持多个单页面应用同时开发
- 不同入口页面css/js单独合并压缩
- 静态文件自动添加版本号
- 高清脚本解决方案,完美支持1px
- ES2015
- less替代css
- fetch替代Ajax
- ESlint在代码提交前进行规范检测
项目依赖
- webpack^3.0.0
- antd-mobile^1.0.7
- react^15.4.2
- react-router-dom^4.0.0
运行
git clone https://github.com/Molin123/react-molin.git
cd react-molin
npm install(如果报错,请使用cnpm)
npm run start/npm run start-win
然后即可以访问http://127.0.0.1:1024/home.html#/index看到页面了
编译
npm run build/npm run build-win
编译后的文件会生成到output
目录下,直接将这个目录下的文件部署到服务器上即可。
目录结构
.
├── src
│ ├── app
│ │ ├── images/
│ │ ├── index.js
│ │ └── list.js
│ ├── home
│ │ ├── images/
│ │ ├── index.js
│ │ └── list.js
│ ├── home.js
│ ├── app.js
│ ├── bundle.js
│ └── template.ejs
├── output
│ ├── images/
│ ├── **.html
│ ├── **.css
│ └── **.js
├── config
│ ├── config.page.js
│ ├── config.server.js
│ ├── config.deploy.js
│ └── config.proxy.js
├── mock
│ └── **.json
├── .babelrc
├── .eslintrc
├── gulpfile.js
├── package.json
└── webpack.config.js
- 其中
home
和app
是两个单独的页面 -
src/template.ejs
为生成HTML文件的模板,可自由修改 -
src/bundle.js
是代码分割模型 -
output/
目录下是build后的生成文件,可直接部署到服务器
多页面入口配置
如果想在项目里面增加入口,只需要在./config/config.page.js
中增加配置即可
module.exports = {
"list": [{
"name": "app",
"entry": "./app.js",
"title": "app页面",
"filename": "app.html",
"template": "template.ejs",
"chunks": "app"
}, {
"name": "home",
"entry": "./home.js",
"title": "home页面",
"filename": "home.html",
"template": "template.ejs",
"chunks": "home"
}]
}
todoList
支持多入口(3.30 done)common拆分(暂时不做)静态文件加戳(3.31 done)dev-server配置(4.6 done)目录结构优化(4.7 done)webpack配置拆分(暂时不需要)使用react-router路由(3.30 done)fetch语法支持(4.1 done)静态文件输出(3.31 done)打包后js文件过大(3.31 做压缩处理 4.20 做代码拆分)热更新(4.5 done)css打包存在问题(4.5 done)验证多less文件的合并情况(4.6 done)图片目录(4.7 done)css压缩(4.24 done)代码拆分(4.20 done)
更新日志
1.0.1版本 2017/06/12
更新内容:
- 修改webpack配置,开发环境下不压缩js/css,缩短热更新时间。
- 增加代码部署功能
gulp deploy --env serverName
1.0.2版本 2017/06/20
更新内容:
- 升级webpack版本到3.0.0
- 使用webpack3.0.0新功能——范围提升(Scope Hoisting ),提高JavaScript在浏览器中执行速度。
1.0.3版本 2017/07/13
更新内容:
- 新增功能可自动将样式表中的px转换为rem。
hot和inline的区别
webpack-dev-server的inline和hot参数都可以在代码改变的时候实现浏览器页面自动更新,具体的区别请参考webpack-dev-server中inline和HMR的区别
react-router4如何做Code Splitting
react-router4做按需加载,需要使用bundle-loader来实现。具体请参考react-router4实现按需加载
如何在react项目中使用ESlint检测代码规范
ESLint是js中目前比较流行的插件化的静态代码检测工具。通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误。使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大、越来越多的人参与进来时,需要加强一些最佳实践。
代码部署
使用gulp-sftp实现文件上传到服务器上的指定目录。需要全局安装gulpnpm install -g gulp
。
在config/config.deploy.js
中增加部署服务器的配置,可添加多个。
module.exports = {
"testServer": {
"host": '123.206.221.185',
"remotePath": '/root/www',
"user": 'root',
"pass": 'password'
},
"testServer2": {
"host": '123.206.221.185',
"remotePath": '/root/www',
"user": 'root',
"pass": 'password'
}
}
然后在build之后执行gulp deploy --env testServer
即可将./output
下的代码部署到对应的服务器上。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].