基于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 相关文章推荐
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
Angular的$http与$location
Dec 26 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 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
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
php网页病毒清除类
2014/12/08 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
个人工作表现评价材料
2014/09/21 职场文书
避暑山庄导游词
2015/02/04 职场文书
城管个人总结
2015/02/28 职场文书
生产实习心得体会范文
2016/01/22 职场文书
mysql知识点整理
2021/04/05 MySQL
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
Go语言读取txt文档的操作方法
2022/01/22 Golang
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript