React腳手架搭建

DevWiki 發布于2019-08-23 18:24 / 2393人閱讀

摘要：在技術中，已作為一個重要的組成部分在使用。為人詬病的缺點之一，就是不能請求。有方案提出提出，通過的方法來模擬。嚴格的單向數據流是架構的設計核心。服務集成可選服務登陸采用的是來記錄狀態。就這樣，一個簡單的腳手架宣告完成。

前言

之前的 multi-spa-webpack-cli 只是為 React + antd 模板提供了開發時必要的環境，對于實際的開發并沒有什么用處。
為了更貼近實際開發，本次 React + antd 模板完善了一些功能。

封裝 fetch，新增請求錯誤提示；

集成 react-router-dom 路由管理；

集成 react-redux 狀態管理；

必不可少的 antd 集成；

node 服務集成（可選）。

node 服務和 React+antd 模板是沒有多大的關系的。本文只是想通過一個簡單的登陸邏輯來演示以上的功能，所以 node 服務不是必須的。

multi-spa-webpack-cli 已經發布到 npm，只要在 node 環境下安裝即可。

npm install multi-spa-webpack-cli -g

使用步驟如下:

# 1. 初始化項目
multi-spa-webpack-cli init spa-project

# 2. 進入文件目錄
cd spa-project

# 3. 安裝依賴
npm install

# 4. 打包不變的部分
npm run build:dll

# 5. 啟動項目（手動打開瀏覽器：localhost:8090）
npm start

# 6. 啟動服務(可選)
cd server
npm install
npm start

預覽：

封裝 fetch

現在處理異步的方式，大多數基于 Promise 的。而 fetch 是天然支持 Promise 的，所以無需再手動封裝。在 PWA 技術中，已作為一個重要的組成部分在使用。

fetch 為人詬病的缺點之一，就是不能 Abort 請求。有方案提出提出，通過 Promise.race 的方法來模擬 timeout。實際上該執行的已然執行，只是表象上達到了預期的效果。不過瀏覽器現以實驗性開始支持 AbortController 。

import { notification } from "antd";

const env = process.env.NODE_ENV;
const baseURL = APP_CONFIG[env].ip;
// timeout ;
// const controller = new AbortController();
// const signal = controller.signal;
const defaultConfig = {
  credentials: "include",
  headers: {
    Accept: "application/json"
  },
  // signal
};
const codeMessage = {
  301: "永久移動",
  302: "臨時移動",
// ...
  504: "網關超時。"
};

const checkStatus = response => {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const errortext = codeMessage[response.status] || response.statusText;
  notification.error({
    message: `請求錯誤 ${response.status}: ${response.url}`,
    description: errortext
  });
};

export default async function Fetch(url, config) {
  let newUrl = baseURL + url;
  let newConfig = {
    ...defaultConfig,
    ...config
  };
  // const timeoutId = setTimeout(() => controller.abort(), 5000);
  if (
    newConfig.method.toLocaleLowerCase() === "post" ||
    newConfig.method.toLocaleLowerCase() === "put" ||
    newConfig.method.toLocaleLowerCase() === "delete"
  ) {
    if (!(newConfig.body instanceof FormData)) {
      newConfig.headers["Content-Type"] = "application/json; charset=utf-8";
      newConfig.body = JSON.stringify(newConfig.body);
    }
  }
  try {
    const response = await fetch(newUrl, newConfig);
    // clearTimeout(timeoutId);
    return checkStatus(response).json();
  } catch (error) {
    notification.error({
      message: `請求錯誤 : ${newUrl}`,
      description: error.message
    });
    throw error;
  }
}

集成 react-router-dom 路由管理

自 raect-router v4 之后，便不再支持集中式管理路由，不過也可以自己手動去實現。React + antd 模板采用的是官網推薦的方式，layouts 目錄下的文件用來管理路由。

集成 react-redux 狀態管理

Redux 作為狀態管理工具，除了 React，也可以用在其他地方（意思是說，和 React 沒半毛錢關系）。在React中使用時，我們需要借助 React-redux 工具，這樣使用起來更加方便。

嚴格的單向數據流是 Redux 架構的設計核心。

redux 數據流向：

就是把 action（行為） dispatch（丟給）reducer（更新 state）。

node 服務集成（可選）

node 服務登陸采用的是 session 來記錄狀態。

就這樣，一個簡單的腳手架宣告完成。

不過，這才只是個開始。

云服務器 GPU云服務器腳手架腳手架使用項目腳手架 js腳手架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105181.html

webpack4詳細教程，從無到有搭建react腳手架（二）

摘要：相關鏈接詳細教程，從無到有搭建腳手架一配置插件，這兩個插件基本上是必配的了介紹每次打包時清理上次打包生成的目錄官網指南關于這個插件部分內容已經過時沒有更新，按照官網配置會出錯，所以參考上這個插件文檔來配置，文檔地址生成打相關鏈接 webpack4詳細教程，從無到有搭建react腳手架（一）配置插件 clean-webpack-plugin、 html-webpack-plugin...

cuieney 2019-08-23 18:35 評論0 收藏0
React入門之腳手架搭建項目

摘要：前言寫此系列博客的目的是對所學知識點的總結和梳理，包括填坑方案分享，希望能幫助到還并不會使用的開發者入門官方文檔中文文檔社區項目搭建按照官方提供的搭建項目全局安裝或全局安裝后可以使用這條命令創建名為的項目啟動前言寫此系列博客的目的是對所學React知識點的總結和梳理，包括填坑方案分享，希望能幫助到還并不會使用React的開發者入門React React官方文檔React中文文檔R...

BingqiChen 2019-08-23 13:39 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（四）

摘要：相關鏈接詳細教程，從無到有搭建腳手架一詳細教程，從無到有搭建腳手架二詳細教程，從無到有搭建腳手架三管理打包后目錄結構打包結構如下修改配置通過相對目錄對資源命名前加上目錄名，效果后面的步驟在這里需要安裝一個大型的包，以為例安裝為第三相關鏈接 webpack4詳細教程，從無到有搭建react腳手架（一） webpack4詳細教程，從無到有搭建react腳手架（二） webpack4詳細...

chnmagnus 2019-08-23 18:35 評論0 收藏0
學習從零開始搭建React腳手架

摘要：寫在前面準備學習一下和相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建全家桶框架教程步驟上都差不多第一步，依賴總覽完成到我現在半成品的過程中，目前完成開發模式的相關操作，添加了按需加載的地步。寫在前面準備學習一下react和webpack相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建React全家桶框架教程;...

cod7ce 2019-08-23 11:25 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（一）

摘要：是一個現代應用程序的靜態模塊打包器，前端模塊化的基礎。作為一個前端工程師切圖仔，非常有必要學習。官網的文檔非常的棒，中文文檔也非常給力，可以媲美的文檔。建議先看概念篇章，再看指南，然后看和配置總覽。 webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器，前端模塊化的基礎。作為一個前端工程師（切圖仔），非常有必要學習。 showImg(https://segment...

zhkai 2019-08-23 18:35 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（三）

摘要：相關鏈接詳細教程，從無到有搭建腳手架一詳細教程，從無到有搭建腳手架二安裝配置創建，效果安裝配置創建效果配置模式修改配置現在編譯后的由動態內聯在中，需要分離到單獨的文件安裝插相關鏈接 webpack4詳細教程，從無到有搭建react腳手架（一） webpack4詳細教程，從無到有搭建react腳手架（二） Css 安裝loader yarn add style-loader css...

Sunxb 2019-08-23 18:35 評論0 收藏0