webpack4를 사용하여 반응 프로젝트 프레임워크를 구축하는 방법

이 글은 webpack4를 사용하여 React 프로젝트 프레임워크를 구축하는 방법을 주로 소개합니다. 이제 필요한 모든 친구들과 공유할 수 있습니다.

소개#🎜 🎜#

프레임워크 소개, webpac을 사용하여 구축된 반응형 단일 페이지 애플리케이션 및 antd 통합. webpack-dev-server를 사용하여 로컬 서비스를 시작하고 핫 업데이트를 추가하여 개발 및 디버깅을 촉진하세요. 코드 커팅 및 레이지 로딩을 위해 번들 로더를 사용하세요

cli를 사용하지 않고 수동으로 빌드되었으며 많은 주석이 초보자가 웹팩을 이해하고 배우는데 적합하며 반응 프로젝트에 대한 심층적인 이해를 갖습니다

Startup

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

Package

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

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

를 사용합니다. 라우팅 구성

#🎜🎜 #프레임워크는 모듈에 따라 구분됩니다. 페이지 폴더 아래 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 <p onClick={this.handle}>ss</p>
    }
  }
  export default connect(state => ({
    test: state.user.memo.test
  }) )(demo)

About redux middleware

  // 与其说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)

#🎜 🎜#위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

D3.js를 사용하여 토폴로지 맵을 구현하는 방법

# 🎜🎜 #Vue 프로젝트에 동적 브라우저 헤더 제목을 추가하는 방법

위 내용은 webpack4를 사용하여 반응 프로젝트 프레임워크를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!