基于webpack4搭建的react项目框架的方法


Posted in Javascript onJune 30, 2018

介绍

框架介绍,使用webpac构建的react单页面应用,集成antd。使用webpack-dev-server启动本地服务,加入热更新便于开发调试。使用bundle-loader进行代码切割懒加载

手动搭建,不使用cli,大量注释适合初学者对webpack的理解学习,对react项目的深入了解

启动

git clone https://gitee.com/wjj0720/react-demo.git
 cd react-demo
 yarn
 yarn start

打包

yarn build

目录结构

+node_modules
 -src
  +asset
  +Layout
  +pages
  +redux
  +utils
  +app.js
  +index.html
  +index.js
 .babelrc 
 package.json 
 postcss.config.js
 webpack.config.js //webpack 配置

bundle-loader 懒加载使用

// webpack.config.js 配置
 module: {
  rules: [
   {
    test: /\.bundle\.js$/,
    use: {
     loader: 'bundle-loader',
     options: {
      name: '[name]',
      lazy: true
     }
    }
   }
  ]
 }
 // 页面引入组件
 import Home from "bundle-loader?lazy&name=[name]!./Home";

 // 组件使用 因为组件懒加载 是通过异步的形式引入 所以不能再页面直接以标签的形式使用 需要做使用封装 
 import React, {Component} from 'react'
 import { withRouter } from 'react-router-dom'
 class LazyLoad extends Component {
  state = {
   LoadOver: null
  }
  componentWillMount() {
   this.props.Loading(c => {
    this.setState({
     LoadOver: withRouter(c.default)
    })
   })
  }
 
  render() {
   let {LoadOver} = this.state;
   return (
    LoadOver ? <LoadOver/> : <div>加载动画</div>
   )
  }
 }
 export default LazyLoad

 // 通过封装的懒加载组件过度 增加加载动画
 <LazyLoad Loading={Home} />

路由配置

框架按照模块划分,pages文件夹下具有route.js 即为一个模块

// 通过require.context读取模块下路由文件
 const files = require.context('./pages', true, /route\.js$/)
 let routers = files.keys().reduce((routers, route) => {
  let router = files(route).default
  return routers.concat(router)
 }, [])

 // 模块路由文件格式
 import User from "bundle-loader?lazy&name=[name]!./User";
 export default [
  {
   path: '/user',
   component: User
  },
  {
   path: '/user/:id',
   component: User
  }
 ]

redux 使用介绍

// ---------创建 --------
 // 为了不免action、reducer 在不同文件 来回切换 对象的形式创建

 // createReducer 将书写格式创建成rudex认识的reducer
 export function createReducer({state: initState, reducer}) {
  return (state = initState, action) => {
   return reducer.hasOwnProperty(action.type) ? reducer[action.type](state, action) : state
  }
 }

 // 创建页面级别的store
 const User_Info_fetch_Memo = 'User_Info_fetch_Memo'
 const store = {
  // 初始化数据
  state: {
   memo: 9,
   test: 0
  },
  action: {
   async fetchMemo (params) {
    return {
     type: User_Info_fetch_Memo,
     callAPI: {url: 'http://stage-mapi.yimifudao.com/statistics/cc/kpi', params, config: {}},
     payload: params
    }
   },
   ...
  },
  reducer: {
   [User_Info_fetch_Memo] (prevState = {}, {payload}) {
    console.log('reducer--->',payload)
    return {
     ...prevState,
     memo: payload.memo
    }
   },
   ...
  }
 }

 export default createReducer(store)
 export const action = store.action

 // 最终在模块界别组合 [当然模块也有公共的数据(见Home模块下的demo写法)]
 import {combineReducers} from 'redux'
 import info from './Info/store'
 export default combineReducers({
  info,
  。。。
 })

 // 最终rudex文件夹下的store.js 会去取所有模块下的store.js 组成一个大的store也就是我们最终仓库

 // --------使用------
 // 首先在app.js中将store和app关联
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 // reducer即我们最终
 import reducer from './redux/store.js'
 // 用户异步action的中间件
 import middleware from './utils/middleware.js'
 let store = createStore(reducer, middleware)
 <Provider store={store}>
  。。。
 </Provider>


 // 然后组件调用 只需要在组件导出时候 使用connent链接即可
 import React, {Component} from 'react'
 import {connect} from 'react-redux'
 // 从页面级别的store中导出action
 import {action} from './store'

 class Demo extends Component {
  const handle = () => {
   // 触发action
   this.props.dispatch(action.fetchMemo({}))
  }
  render () {
   console.log(this.props.test)
   return <div onClick={this.handle}>ss</div>
  }
 }
 export default connect(state => ({
  test: state.user.memo.test
 }) )(demo)

关于redux中间件

// 与其说redux中间件不如说action中间件
 // 中间件执行时机 即每个action触发之前执行

 // 
 import { applyMiddleware } from 'redux'
 import fetchProxy from './fetchProxy';

 // 中间件 是三个嵌套的函数 第一个入参为整个store 第二个为store.dispatch 第三个为本次触发的action 
 // 简单封装的中间件 没有对请求失败做过多处理 目的在与项错误处理机制给到页面处理
 const middleware = ({getState}) => next => async action => {
  // 此时的aciton还没有被执行 
  const {type, callAPI, payload} = await action
  // 没有异步请求直接返回action
  if (!callAPI) return next({type, payload})
  // 请求数据
  const res = await fetchProxy(callAPI)
  // 请求数据失败 提示
  if (res.status !== 200) return console.log('网络错误!')
  // 请求成功 返回data
  return next({type, payload: res.data})
 }
 export default applyMiddleware(middleware)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
常用jQuery代码分享
Jul 14 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
AngularJs分页插件使用详解
Jun 30 #Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 #Javascript
vue检测对象和数组的变化分析
Jun 30 #Javascript
浅析vue.js数组的变异方法
Jun 30 #Javascript
详解vue添加删除元素的方法
Jun 30 #Javascript
vue.js删除列表中的一行
Jun 30 #Javascript
vue v-model动态生成详解
Jun 30 #Javascript
You might like
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python编写屏幕截图程序方法
2015/02/18 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Django框架模板介绍
2019/01/15 Python
python字符串循环左移
2019/03/08 Python
Python标准库itertools的使用方法
2020/01/17 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
2019年.net常见面试问题
2012/02/12 面试题
电子商务专员岗位职责
2013/12/11 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
六查六看剖析材料
2014/10/06 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
暑期实践个人总结
2015/03/06 职场文书
肖申克救赎观后感
2015/06/02 职场文书
党员读书活动心得体会
2016/01/14 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP