专栏首页random基于webpack4搭建的react项目框架

基于webpack4搭建的react项目框架

介绍

框架介绍,使用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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • node服务端渲染(完整demo)

    项目源码 git clone https://gitee.com/wjj0720/nod...

    random_wang
  • 关于vueX的应用

    random_wang
  • WebRTC实现p2p视频通话

    random_wang
  • npm并行&串行执行多个scripts命令

    通过npm run <commander> 可以运行 package.json 中脚本,Npm 命令不能提供立即运行多个脚本的方式,同时运行需要打开多个终端窗口

    奋飛
  • 前端20个问题【中篇】

    原理: 在window这个全局对象下面,挂载属性,那么全局都可以拿到这个属性的值,原则上一个js文件作为一个模块,就是一个IIFE函数

    Peter谭金杰
  • 对登录中账号密码进行加密之后再传输的爆破的思路和方式

    一. 概述 渗透测试过程中遇到web登录的时候,现在很多场景账号密码都是经过js加密之后再请求发送(通过抓包可以看到加密信息)如图一burp抓到的包,reque...

    FB客服
  • [Java 8 HashMap 详解系列]7.HashMap 中的红黑树原理

    国内第一Kotlin 开发者社区公众号,主要分享、交流 Kotlin 编程语言、Spring Boot、Android、React.js/Node.js、函数式...

    一个会写诗的程序员
  • Vue 新增不参与打包的接口地址配置文件

    vue工程项目,npm run build webpack方式打包,每次打包后如果需要更改后台接口地址(项目中,接口地址设置成变量,存放在js文件中,需要用到的...

    授客
  • CSS瞬间黑暗模式

    最近微信也逃脱不了黑暗时代的到来,网页也很多都做了黑暗模式的兼容和主题。如果我们在做的一个网站想瞬间实现黑暗模式可以怎么实现呢?

    前端开发博客
  • thinkjs学习笔记

    thinkjs的配置有很多,系统默认配置 -> 应用配置 -> 调试配置 -> 模式配置 基本上只用到应用配置,应用配置的路径是App/Conf/config....

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券