基于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

打bmzFFT包

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 ? :

)

}

}

export default LazyLoad

// 通过封装的懒加载组件过度 增加加载动画

路由配置

框架按照模块划分，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 = http://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)

。。。

// 然后组件调用 只需要在组件导出时候 使用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

}

}

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

// 简单封装的中间件 没有对请求失败做过多处理 目的在与项错误处理机制给到页面处理

http://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)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。