基于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 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
jQuery each()方法的使用方法
Mar 18 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
js浏览器html5表单验证
Oct 17 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
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
一个查看session内容的函数
2006/10/09 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
js读取配置文件自写
2014/02/11 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
深入理解node.js http模块
2018/01/24 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
python创建n行m列数组示例
2019/12/02 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python实现猜数游戏
2020/03/27 Python
学生打架检讨书1000字
2014/01/16 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
中学生自我评价2015
2015/03/03 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android
MySQL创建管理子分区
2022/04/13 MySQL
tree shaking对打包体积优化及作用
2022/07/07 Java/Android