React脚手架搭建

DevWiki 发布于2019-08-23 18:24 / 2340人阅读

摘要：在技术中，已作为一个重要的组成部分在使用。为人诟病的缺点之一，就是不能请求。有方案提出提出，通过的方法来模拟。严格的单向数据流是架构的设计核心。服务集成可选服务登陆采用的是来记录状态。就这样，一个简单的脚手架宣告完成。

前言

之前的 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脚手架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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