react项目从新建到部署的实现示例

2024-11-29 21:55:08

开展新项目

本文主要记录最近工作一个新项目从0-1的过程，主要记录3个节点，选型、运行时、上线。

项目选型

react 脚手架初始化，社区比较火的有cra（create-react-app）和umi，从以下几点进行对比最终选择了比较贴合项目的umi。

易用性，开箱即用。umi内置了许多功能，可是也带来很多限制，譬如对项目结构的规定提供自己生态的插件需要学习成本，cra初始化简洁选取模板即可开始，不需要额外的学习成本（即使vue玩家过来也没负担）。
可拓展性，修改webpack配置。cra提供eject（不可逆的操作）全部暴露出来自己控制，丧失了一开始想要简单配置的初衷，或者使用react-app-rewired和customize-cra可看这里。 umi需要修改webpack配置时可直接写文件（基于webpack-chain），还提供了一个运行态的配置。
生态，umi是阿里开源的，里面有许多插件都与他们的开源关联起来了，比如比较火的antd，qiankun，官网提供了大量的实践指导，而且是中文文档（有部分人会倾向于此），cra简洁只负责一个脚手架的工作（容易理解内部实现，出问题能快速定位解决）。

最终考虑到一个项目需要快速搭建需要许多成型的插件支持所以采用了umi。antd真香！！！@umijs/plugin-model，推荐这个插件看懂内部实践基本就掌握了数据管理了。

运行时

umi提供app.ts,运行时配置文件，可以扩展运行时的能力,简单理解就是渲染你页面的前置操作都可以放在这里。这个概念可以类

比storybook(preview.js),如果要自己实现可以在对应html插入script。这里会涉及一些项目关联内容，因为项目需要内嵌在已有项目中，所以我们采取iframe的方式，不可避免我们需要通信，以及iframe大小自适应。

iframe通信，因为域不一样所以采取了，window.postmessage。为了维护数据可读性建议定义对应的事件传输内容，避免后期维护难度上升，如果需要频繁通信更建议采取微前端方案。

iframe自适应， iframe-resizer插件帮我们解决，记住嵌入与被嵌入的都需要安装，不然无法通信不可能自适应。这里遇到一个问题页面嵌入的时候body节点一直无法由内部撑大所以需要使用iframe-resizer提供的自定义计算方法自己在子页面提供对应方法。代码如下：

子系统

import 'iframe-resizer/js/iframeResizer.contentWindow.js';
// 如果内嵌则运行时打开监听
const iframeInit = () => {
 if (parent !== window) {
  (window as any).iFrameResizer = {
   heightCalculationMethod: () => {
    return document.body.children[0].clientHeight;
   },
  };
  window.onmessage = (event: any) => {
   if (Array.isArray(event.data)) {
    if (event.data[0] === '事件名') {
     console.log(event.data[1]) // 事件参数
    }
   }
  };
  parent.postMessage({ msg: 'MessageFromIframePage' }, '*');
 }
};

iframeInit();

上线

经过一轮打包，终于到了上线了。这里主要讲讲nginx怎么配置转发请求。

在开发期间，如果需要对多个不同域的接口时，前端第一个反应就是配置proxy。上线时就有点懵了。

 proxy: {
  '/api': {
   target: 'http://aaa.com',
   changeOrigin: true,
   pathRewrite: { '^/api': '' },
  },
  '/b-api': {
   target: 'http://bbb.com/',
   changeOrigin: true,
   pathRewrite: { '^/b-api': '' },
  },
 },

nginx配置如下

server {
  listen 80;
  server_name 访问地址;
  set $rooturi "xxxx/dist";
  location ~ .*\.(jpg|jpeg|gif|png|webp|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|svg|proto)$ {
   expires 365d;
   root $rooturi;
  }
  location ^~/api/ {

   rewrite ^/api/(.*)$ /$1 break;
   proxy_pass http://aaa.com;
  }

  location ^~/b-api/ {

   rewrite ^/b-api/(.*)$ /$1 break;
   proxy_pass http://bbb.com;
  }

  location / {
   root $rooturi;
   try_files $uri $uri/ /index.html =404;
   add_header Cache-Control "no-cache";
   add_header Access-Control-Allow-Origin *;
  }

}

到此这篇关于react项目从新建到部署的实现示例的文章就介绍到这了,更多相关react 新建到部署内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

基于react项目打包css引用路径错误解决方案

没有去修改create-react-app默认的配置文件执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在根目录访问这样放在服务器目录就访问不到了报错为手动更改index.html的路径之后又报静态资源引入错误报错解决方案解决: 在package.json下面增加"homepage": ".". 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.
npx create-react-app xxx创建项目报错的解决办法

手头有一台大学时代的Windows电脑,它此前没有装过create-react-app,只装了node环境.版本信息:node -> 10.16.3,npm -> 6.9.0.前几日闲的无事想给它装个React,结果失败了,报了错,所以有了下面这出. 安装过程根据React官方文档(上图)可以发现,此时并不需要安装create-react-app工具,只要你的node >= 8.10 && npm >= 5.6,就可以直接使用npx create-react-ap
react项目如何运行在微信公众号

说明:项目是create-react-app结合antd-mobile写的H5,在微信公众号里运行. 1.使用a标签预览或下载PDF.写法如下,手机上点击无反应,电脑上点击网页崩溃. <a href='pdf或图片路径'> PDF或图片名称 </a> 原因是浏览器监测到访问非安全访问,给拦截下来了.于是根据报错提示,新增target和rel两个属性,写法如下: <a href='pdf或图片路径' target='_blank' rel="noreferrer&qu
解决VSCode调试react-native android项目错误问题

如果运行react-native android项目出现如下错误: 解决办法如下: 一.执行adb devices,判断adb有没有断, 二.如果是adb断了就使用一下步骤 adb reverse tcp:8081 tcp:8081 npm start 如果adb没断,直接 npm start 如果执行gradle ass打包命令进行打包之后,出现如下错误: 1.检查react-native项目工程目录下的index.js里面的AppRegistry.registerComponent(appN
记一次react前端项目打包优化的方法

前文之前一年多前接手的一个react项目,前段时间因为做业务中台项目,对公司现有的应用项目做中台化改造,这期间将项目部署到uat环境,测试期间,测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久,白屏时间超过30s,体验很差,生产不至于这么慢但也是白屏时间挺长的,所以减少白屏时间增加用户体验成为了当务之急.复制代码分析通过控制台判断加载资源时间还有资源大小通过开发者工具可以看到白屏的主要原因在于bundle.js这个打包后的文件过大,达到3.6M加上uat环境带宽等问题的话,光
vue或react项目生产环境去掉console.log的操作

在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了删除console的插件,在vue-cli3里面是这样用的: 首先安装terser-webpack-plugin npm install terser-webpack-plugin -D 然后在vue.config.js文件里写插件的配置: module.exports = { configureW
使用 React 和 Threejs 创建一个VR全景项目的过程详解

最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目实现的是加载一张 2:1 的720全景分享一下我的创建过程一.搭建框架并安装需要的插件 npx create-react-app parano // 创建一个 React 项目 npm install -S typescript // 安装 typescript,这个是类型辅助插件,与全景项目关系不大 npm install -S @types/three // 安装 typescript 支持的
在react项目中使用antd的form组件,动态设置input框的值

问题: 创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了原因: 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了. 解决办法: 不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了. if
使用webpack5从0到1搭建一个react项目的实现步骤

前言在这之前,每开始一个新项目我都是使用现有的脚手架,这非常便于快速地启动一个新项目,而且通用的脚手架通常考虑地更加全面,也有利于项目的稳定开发:不过对于一个小项目,根据需求自己搭建可能会更好,一方面小项目不需要脚手架那么丰富的功能,另一方面可以提高对项目的掌控度以方便后期的扩展. 这篇文章是在实践中总结的,具有实操性,读者可跟着一步步进行搭建,中间我会穿插一些原理,当然因为笔者的能力有限,不会特别深入. 预备知识熟悉Javascript && HTML && CSS
react项目从新建到部署的实现示例

开展新项目本文主要记录最近工作一个新项目从0-1的过程,主要记录3个节点,选型.运行时.上线. 项目选型 react 脚手架初始化,社区比较火的有cra(create-react-app)和umi,从以下几点进行对比最终选择了比较贴合项目的umi. 易用性,开箱即用.umi内置了许多功能,可是也带来很多限制,譬如对项目结构的规定提供自己生态的插件需要学习成本,cra初始化简洁选取模板即可开始,不需要额外的学习成本(即使vue玩家过来也没负担). 可拓展性,修改webpack配置.cra提供ej
React项目使用ES6解决方案及JSX使用示例详解

目录不使用 ES6 绑定 JSX如何? 不使用 ES6 然而,在纯浏览器端使用ES6语法时,浏览器支持存在差异,这需要特殊处理才能正常运行. 支持ES2015桌面浏览器 Chrome:从51版开始,它可以支持ES6 97%的新功能. Firefox:53版本支持97%的ES6新功能. Safari:从版本10开始,ES6 99%的新功能都可以得到支持. IE:Edge 15可以支持96%的ES6新功能. Edge 14可以支持93%的新ES6功能.(IE7~11基本不支持ES6) class
Windows下React Native的Android环境部署及布局示例

搭建基础环境 JDK(必须,不解释) SDK(建议使用Android Studio,集成SDK以及模拟器) genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装) NVM(node版本控制器,需要node4.0以上版本) 以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真
React项目动态设置title标题的方法示例

在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的.那么怎么让title随着路由的切换动态变化呢? 1.在定义路由时增加title属性. { path: "/regularinvestment", component: Loadable({ loader: () => import('./../../business/Regularinvestment/index'), loading: Page
Rainbond调用Vue React项目的后端接口

目录前言解决跨域对于不同的场景有以下几种方法: 接口没有统一接口统一源码部署后端 Dockerfile源码构建部署Mysql Docker镜像部署Redis Java源码构建部署 SpringBoot Rainbond中怎么部署 Vue .React 项目请参考 Rainbond部署Vue.React项目前言以往我们在部署前端项目后,调用后端接口有以下几种场景: 后端接口没有统一,比较分散,例如:/system/user,/tool/gen . 通常我们会在项目的全局配置文件.env
vue、react等单页面项目应该这样子部署到服务器

最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.sosout.com ,根路由就是 '/'.
nginx上部署react项目的实例方法

测试项目:react-demo 克隆你的react-demo项目到服务器上(默认使用Github管理我们的项目) 如果需要,请安装项目环境,比如:node.js,yarn等进入项目目录,执行npm run build,开始构建项目构建成功之后,会生成一个dist文件夹(取决于你的项目配置),这个文件夹里的静态文件,就是我们的项目的访问文件了, 配置Nginx,Linux服务器是进入到:/etc/nginx/sites-enabled,然后以管理员身份,新建一个你的react项目的配置文件,比
聊聊jenkins部署vue/react项目的问题

目录准备工作 1.安装参数化部署插件 2.安装好插件后,配置Nodejs环境创建项目构建 centOS安装jenkins 1.安装JDK 2.安装jenkins 3.配置jenkis的端口 4.启动jenkins jenkins安装请参考文末centOS安装jenkins. 准备工作 1.安装参数化部署插件 Git Parameter Plug-In git参数化构建,可选择分支.标签构建Extended Choice Parameter Plug-In 自定义参数化构建,可根据需要任意添
jenkins分环境部署vue/react项目的方法步骤

vue/react部署请参考上一篇文章:https://www.jb51.net/article/238583.htm 项目开发正常都需要开发环境.测试环境.生产环境,每个环境部署都比较麻烦,可以使用jenkins自动化部署 1.安装自定义参数化插件 Extended Choice Parameter Plug-In 2.配置自定义参数 3.配置shell脚本 shell脚本内容 #!/bin/bash // 判断环境 if [ $env == "dev" ]; then url=&q
从零开始搭建一个react项目开发

本文介绍了从零开始搭建一个react项目开发,分享给大家,具体如下: 1.npm init 生成 package.json 文件. 2.安装各种需要的依赖: npm install --save react - 安装React. npm install --save react-dom 安装React Dom,这个包是用来处理virtual DOM.这里提一下用React Native的话,这里就是安装react-native. npm install --save-dev webpack

react项目从新建到部署的实现示例

开展新项目

项目选型

运行时

上线

相关推荐

随机推荐