1.0.0 • Published 6 years ago
speed-animation v1.0.0
speed-react
react+webpack+gulp开发环境搭建
模板下载:
git clone https://github.com/efe-team/speed-react.git
1.进入目录
cd speed-react
2.安装依赖包
npm install
3.打包构建
// 静态服务 实时刷新页面
gulp start
// 命令完成后,浏览器访问页面 如:http://127.0.0.1:8080/index.html (ip 和 port 可配)
or
//调试模式
gulp debug
//执行gulp命令打包文件(实时刷新页面)
or
//发布环境
gulp
//执行gulp命令打包文件(压缩合并操作)
目录结构
|- public //静态资源开发目录
| |- base
| | |- imgs //公用图片
| | |- style //公用样式
| | |- scripts //公用js
| | |- others //其他资源文件,如json、pdf、docx等
| |- components //组件目录
| | |- test //实例组件(正式开发请删除)
| | | |- imgs
| | | |- test.jsx
| | | |- test.less
| |- routes //页面路由入口
| | |- pageA //pageA
| | | |- imgs
| | | |- PageA.jsx
| | | |- PageA.less
| | |- pageB //pageB
| | | |- imgs
| | | |- PageB.jsx
| | | |- PageB.less
| |- views //页面入口
| | |- template //页面模板
| | | |- tpl.html
| | |- pages //页面目录
| | | |- index //实例页面index
| | | | |- imgs
| | | | |- index.jsx
| | | | |- index.less
| | | |- admin //实例页面admin
| | | | |- imgs
| | | | |- index.jsx
| | | | |- index.less
|- .babelrc // babel配置文件
|- .editorconfig // 文件编辑配置
|- .eslintrc.js // eslint配置
|- .gitignore // git提交忽略配置
|- gulpfile.js // gulp配置
|- package.json // 包管理属性
|- postcss.config.js // postcss-loader 配置
|- README.md // readme介绍
|- webpack.config.js // webpack release配置
|- webpack.dev.config.js // webpack debug 配置
功能概述 1. 支持css、sass、less等多种css写法; 2. 支持单、多页面开发方式(推荐单页面+react-router模式) 3. 支持react-router懒加载,参考pages下的index.jsx页面中懒加载pageB 4. 支持eslint检测js、jsx文件的语言规范(webpack配置) 5. 支持webpack-dev-server热加载(gulp debug模式)
1.0.0
6 years ago