[react]脚手架create-react-app/vite与reac项目

[react]脚手架create-react-app/vite与reac项目

  • 环境
  • 问题描述
  • create-react-app 脚手架
    • 根据脚手架修改项目结构
      • 安装脚手架
      • 注入配置文件-config文件夹
      • package.json文件变更
      • 删除 serviceWorker.js
      • 新增reportWebVitals.js文件
      • 更新index.js文件
    • 脚手架creat-react-app 缺点
  • vite 脚手架
    • 初始化脚手架 & 项目
    • 初始化项目包
    • 迁移

本人是在react项目升级的过程迁移的脚手架,原项目使用的creat-react-app,脚手架升级变更对项目的基本结构修复后,项目已经可以正式启动了,记录一下

环境

  • node -v.18.15.0
  • react - 16.9.0

问题描述

随着本地node版本的提升,运行以前的项目遇到了以下问题:

Error: error:0308010C:digital envelope routines::unsupported

网上描述都是因为 node 版本升级导致的,运行的项目比较早会报错,而网上提供的方案大多都是降低 node 版本,实际上我觉的应该是从其它方面修复而不是降低版本???!!!因为我们以后开发的版本都是越来越高的,不可能每次遇到早期的版本都降级node!!!

然后运行命令查看最新的包的情况:

npm outdated

同时发现react也是老版本, react最新版本已经升级到 18.2.0 版本,但是使用的却还是16.9.0 ,那么既然都是升级,也可以顺便升级一下 react 的代码

考虑到react都升级了,当初创建项目的脚手架应该也升级了,所以项目的基本结构可能发生变化,因此先升级脚手架看一下结构是否变化

create-react-app 脚手架

根据脚手架修改项目结构

考虑到基础框架的内容可能也存在变更,并且之前使用的create-react-app脚手架,那么先升级了全局的create-react-app脚手架

安装脚手架

npm i create-react-app -g
create-react-app -V 

发现输出版本是5.0.1是最新版本

然后使用脚手架创建新的项目

create-react-app <react-project-name>

此时比对项目的基本结构,因为demo只是最基础的东西,所以需要查看的仅仅包括 package.json 的变化,一些基础文件的变化,基本不包括业务相关代码

在这里插入图片描述

注入配置文件-config文件夹

npm run eject

考虑到之前config文件夹就是自动注入的,并且没有其它额外的配置,所以将项目中老版本的config文件夹也删除,如果之后需要的话,再生成,也就是可以暂时忽略配置文件,因为没有使用到配置文件的修改

package.json文件变更

根据 package.json 的比对发现运行的脚本发生了变化

首先将运行的脚本:

  "scripts": {"start": "node scripts/start.js","build": "node scripts/build.js","test": "node scripts/test.js",}

替换为:

  "scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"}

并且根目录下的 scripts 文件夹可以删除了,新版本已经不使用该文件夹了

其次,依赖的变化,以下是新版本demo中的几个依赖,可以此时更新或添加也可以等之后用到的时候再添加,本人采用直接先更新这几个依赖包:

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

运行以下命令:

npm i react@18.2.0 react-dom@18.2.0 -D
npm i web-vitals@2.1.4 react-scripts@2.1.4 -D

其它package.json的变化先不考虑了

删除 serviceWorker.js

该文件也是之前脚手架自动生成的一个文件,新脚手架生成的文件中已经没有该文件了,所以删除该文件src/serviceWorker.js,并删除index.js文件对该文件的引用,即以下代码

import * as serviceWorker from './serviceWorker';
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

新增reportWebVitals.js文件

对比发现新增了一个src/reportWebVitals.js文件

reportWebVitals.js

const reportWebVitals = (onPerfEntry) => {if (onPerfEntry && onPerfEntry instanceof Function) {import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {getCLS(onPerfEntry);getFID(onPerfEntry);getFCP(onPerfEntry);getLCP(onPerfEntry);getTTFB(onPerfEntry);});}
};export default reportWebVitals;

然后,在index.js文件中添加该文件的使用

import reportWebVitals from "./reportWebVitals";
reportWebVitals();

感觉就是reportWebVitals文件替换了之前的serviceWorker文件

更新index.js文件

import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
//变更为
import { createRoot } from "react-dom/client";
import App from "./App";const root = createRoot(document.getElementById("root"));
root.render(<App />);

然后可以启动一下项目,根据错误提示进一步修改项目

脚手架creat-react-app 缺点

发现该脚手架并不是非常好用,路由、样式需要自己单独初始化与使用

不可定制使用css的解析器

eject时候注入内容是强制全部添加的

修改某些路由文件的时候都不能实现热部署,需要手动启动这个就比较麻烦了

因此打算找一些其它的脚手架,如果好用就弃用creat-react-app

vite 脚手架

但是开始修复升级的 react-router,redux等其它依赖包时,总是需要手动重启项目就比较麻烦,想到框架变更并不影响业务代码,只是变更的打包等功能,以及框架的文件,因此直接将脚手架换成vite,在之后的调试过程中不用在手动启动项目,比较方便调试包的升级

初始化脚手架 & 项目

npm create vite
等价于
npm i create-vite -g
create-vite <project-name>

初始化项目包

npm i

此时项目已经可以运行,直接将业务代码迁移即可

迁移

  • index.js对应于vite中的main.jsx;基本不用改动;
  • app.js对应于vite中的 app.jsx;直接复制到app.jsx即可;
  • src文件夹中的内容,排除App.test.js, reportWebVitals.js等原脚手架生成的文件,其它业务代码直接复制即可
  • 运行项目,将缺少的包安装即可,最好不要直接复制package.json文件,因为除了脚手架的依赖包,有些配置也不相同了

发现现在react的依赖包也开始区分开发环境与非开发环境了,所以安装依赖包的时候:

# 线上需要的包
npm i <pk> 
# 开发环境需要的包
npm i <pk> -D

此时项目可以直接运行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/589765.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Springboot实现天天生鲜销售电商平台

SSM毕设分享 基于Springboot实现天天生鲜销售电商平台 1 项目简介 Hi&#xff0c;各位同学好&#xff0c;这里是郑师兄&#xff01; 今天向大家分享一个毕业设计项目作品【】 师兄根据实现的难度和等级对项目进行评分(最低0分&#xff0c;满分5分) 难度系数&#xff1a;3分 …

中文字符占用字节即相关原理(实现中文(中英混合)字符串的反转)

如有不对欢迎指正。 目录 一.ASCLL字符和中文字符 1.使用无符号数表示的原因(对于中文字符)&#xff1a; 2.但是并不是所有情况都是用无符号数(以下目前只是猜测,如有问题欢迎指正) &#xff1a; 1. 什么时候使用无符号数表示: 2. 不需要使用的情况&#xff1a; …

vue源码(一)

搭建环境 获取地址&#xff1a;GitHub - vuejs/vue: This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core 安装依赖&#xff1a;npm i 安装 rollup&#xff1a; npm i -g -rollup 修改dev脚本&#xff1a;添加 --sourcemap "dev": &q…

【最优化方法】精确一维搜索方法

文章目录 0.618 法示例 Newton 法示例 0.618 法 0.618 法是一种一维线性搜索的算法&#xff0c;也称为黄金分割法&#xff08;Golden Section Method&#xff09;。它是一种迭代方法&#xff0c;用于确定目标函数在一个区间上的最小值。 以下是 0.618 法的基本步骤&#xff1…

Access数据库C#读写验证

1、数据库简介 Access数据库是一个相当古老的文件型数据库&#xff0c;主打一个简单方便&#xff0c;没有复杂的安装过程&#xff0c;没有庞大的后端管理&#xff0c;整个数据库就是一个文件。可以像普通文件一样复制和修改&#xff0c;可以同时读写。 在小型系统中&#xff0c…

子组件如果向父组件传递数据是怎么做到

在 Vue.js 中&#xff0c;子组件向父组件传递数据可以通过自定义事件来实现。子组件可以通过 $emit 方法触发一个自定义事件&#xff0c;并且可以传递数据给父组件。 下面是一个示例&#xff0c;演示了子组件向父组件传递数据的过程&#xff1a; <!-- ParentComponent.v…

Xgboost分类模型的完整示例

往期精彩推荐 数据科学知识库机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归PySpark大数据处理详细教程 定义问题 UCI的蘑菇数据集的主要目的是为了分类任务&#xff0c;特别是区分蘑菇是可食用还是有毒。这个数据集包含了蘑菇的各种特征&#xff0c;如…

【读书笔记】网空态势感知理论与模型(四)

一个网空态势感知整合框架 1. 引言 网空态势感知过程可以看作包含态势观察、态势理解和态势预测3个阶段。 态势观察&#xff1a;提供环境中相关元素的状态、属性和动态信息。 态势理解&#xff1a;包括人们如何组合、解释、存储和留存信息。 态势预测&#xff1a;对环境&a…

系统学习Python——装饰器:函数装饰器-[装饰器状态保持方案:外层作用域和非局部变量]

分类目录&#xff1a;《系统学习Python》总目录 我们在某些情况下可能想要共享全局状态。如果我们真的想要每个函数都有自己的计数器&#xff0c;要么像前面的文章那样使用类&#xff0c;要么使用Python3.X中的闭包函数&#xff08;工厂函数&#xff09;和nonlocal语句。由于这…

浪潮软件开发校招面试一面凉经

本文介绍2024届秋招中&#xff0c;浪潮通信信息系统有限公司的软件开发工程师岗位一面的面试基本情况、提问问题等。 10月投递了浪潮通信信息系统有限公司的软件开发工程师岗位&#xff0c;并不清楚所在的部门。目前完成了一面&#xff0c;在这里记录一下一面经历。 首先&#…

听GPT 讲Rust源代码--library/alloc

File: rust/library/alloc/benches/slice.rs 在Rust源代码中&#xff0c;rust/library/alloc/benches/slice.rs文件的作用是对&[T]类型&#xff08;切片类型&#xff09;进行性能基准测试。该文件包含了对切片类型的一系列操作的基准测试&#xff0c;例如切片迭代、切片排序…

【Python百宝箱】音律编织:Python语音合成库的技术交响曲

未来声音的奇妙之旅&#xff1a;深度学习与云端语音服务的交汇 前言 在当今数字化时代&#xff0c;语音合成技术在各个领域的应用日益广泛&#xff0c;从辅助技术到娱乐媒体&#xff0c;都展现出巨大的潜力。本文将带您深入了解语音合成的世界&#xff0c;从简单易用的库如py…

0101包冲突导致安装docker失败-docker-云原生

文章目录 1 前言2 报错3 解决结语 1 前言 最近在学习k8s&#xff0c;前置条件就是要安装指定版本的docker&#xff0c;命令如下 yum install -y docker-ce-20.10.7 docker-ce-cli-20.10.7 containerd.io-1.4.62 报错 file /usr/libexec/docker/cli-plugins/docker-buildx fr…

微信多商户商城小程序/公众号/h5/app/社区团购/外卖点餐/商家入驻/在线客服/知识付费/商品采集

多个源码二开合一!!包含:多商户商城/社区团购/外卖点餐/在线客服/知识付费/投票 。。。等等!!! 前台可自定义装修!!装修成为如下程序 1、小程序,公众号,h5,app多端合一 2、用户论坛 积分签到 3、知识付费、题库管理、课程设置 4、同城配送,配送员设置 5、餐饮…

用 print 太慢了!强烈推荐这款Python Debug工具~

作为程序员&#xff0c;我们都深知调试&#xff08;Debug&#xff09;在编程过程中的重要性。 然而&#xff0c;使用传统的"print"语句进行调试可能效率较低&#xff0c;今天&#xff0c;笔者将推荐一款独具一格的Python调试工具——Reloadium。 Reloadium为IDE添加…

sparkstreamnig实时处理入门

1.2 SparkStreaming实时处理入门 1.2.1 工程创建 导入maven依赖 <dependency><groupId>org.apache.spark</groupId><artifactId>spark-streaming_2.12</artifactId><version>3.1.2</version> </dependency> <dependency…

C++初阶——基础知识(内联函数)

目录 1.内联函数 内联函数的示例代码 1.内联函数 是一种 C 中的函数定义方式&#xff0c;它告诉编译器在每个调用点上插入函数体的副本&#xff0c;而不是像普通函数那样在调用时跳转到函数体所在的地址执行。这样可以减少函数调用的开销&#xff0c;提高程序的执行效率。 …

从入门到精通,30天带你学会C++【第十天:猜数游戏】

目录 Everyday English 前言 实战1——猜数游戏 综合指标 游玩方法 代码实现 最终代码 试玩时间 必胜策略 具体演示 结尾 Everyday English All good things come to those who wait. 时间不负有心人 前言 今天是2024年的第一天&#xff0c;新一年&#xff0c;新…

深入理解和运用C语言中的Break语句

各位少年 尊敬的读者们&#xff0c; 在C语言编程中&#xff0c;控制程序流程是我们编写高效代码的关键。今天&#xff0c;我们将一起探讨一种能够立即终止循环或开关语句的关键字——Break。 一、理解Break语句 Break关键字在C语言中用于立即退出当前的循环&#xff08;如f…

【网络】修改网口名字|网络设备|网口管理

目录 系统的网口(网络设备)命名规则 修改网口(网络设备)命名 永久修改 临时修改 使用传统eth0、eth1的命名方式 注意事项 系统的网口(网络设备)命名规则 ens35f0 这个名称是基于 Linux 的网络接口命名规则生成的。 在较新的 Linux 发行版中&#xff0c;网络接口的命名规…