Méthodes pour créer un cadre de projet React basé sur Webpack4

Cet article présente principalement la méthode de construction d'un framework de projet React basé sur webpack4. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Introduction

Introduction au framework, une application de réaction d'une seule page construite à l'aide de webpac, intégrant antd. Utilisez webpack-dev-server pour démarrer les services locaux et ajouter des mises à jour à chaud pour faciliter le développement et le débogage. Utilisez bundle-loader pour la découpe de code et le chargement paresseux

Construction manuelle, sans utiliser cli, un grand nombre de commentaires adaptés aux débutants pour comprendre et apprendre le webpack, et avoir une compréhension approfondie des projets React

Lancement

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

Forfait

yarn build

Structure du répertoire

 +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- Le chargement paresseux du chargeur utilise

 // 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/> : <p>加载动画</p>
   )
  }
 }
 export default LazyLoad

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

configuration de routage

Le framework est divisé selon les modules, Route.js dans le dossier pages est un module

 // 通过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
  }
 ]

Introduction à l'utilisation de 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 &#39;react&#39;
 import {connect} from &#39;react-redux&#39;
 // 从页面级别的store中导出action
 import {action} from &#39;./store&#39;

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

À propos du middleware 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)

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos des trois façons de créer des composants dans React et de leurs différences

Fichier restreint de configuration d'optimisation du Webpack recherche Introduction au champ d'application

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!