首页 > 其他分享 >React项目升级

React项目升级

时间:2024-02-29 13:35:53浏览次数:19  
标签:node 升级 less 项目 modules loader React 版本 antd

一、前端框架(或者库)升级的原因:

a、前端技术更新比较快,需要不断更新保持技术和依赖都和社区同步;
b、新版脚手架对性能和开发体验都进行了很多优化,新版脚手架基于社区2021年的相对最优解决方案和依赖。如vite2.0、react17(相比react16版本有了核心实现的重构)等;

二、详细描述要升级的框架以及类库。从哪个版本到哪个版本。有什么要注意的等等

a、antd 不做大版本升级;
b、react-script 3.0.1 → 4.0.3 脚手架的版本,无法向后兼容;(antd不做升级,对应的webpack5用不了,只能用webpack4.x的版本,所以对应的react-script只能升级到4.0.3,webpeck版本为4.44.2)

c、copy-webpack-plugin 调用方法有更改,无法向后兼容;
d、node less-loader less node-sass 的版本需要特别处理,需要在升级过程中调整相应的兼用版本;

三、升级的具体步骤

在项目目录下运行:

安装ncu
npm i -g npm-check-updates
ncu -u
rm -rf node_modules
npm i

有以下一些包要更新:

注意:

antd,less,less-loader不能升级到最新的版本,因为项目对antd做了很多定制化开发,andt升级改动较大,antd对less-loader的版本有依赖;

"less": "^3.10.3",
"less-loader": "^5.0.0",
"antd": "^3.26.19",

根据各依赖包版本升级之间的log,分析受影响的代码模块,开发自测;

使用 webpack-bundle-analyzer 插件分析build后的各个文件的大小,及时优化太大的js文件;

四、升级后的验证步骤有几步(保证升级后不破坏现有功能)

a、页面部署好之后能否正常打开;
b、页面有无报错信息,以及报错信息的类型;
c、冒烟测试是否能通过;
d、各功能模块流程是否能正常走通;
e、切记不要漏掉 WPA(web performance audit);

五、接下来分享升级过程的具体报错及解决方案。

  1. ./src/index.sass (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.sass)
    Node Sass version 7.0.1 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0.
    此错误来自sass-loader不匹配。

可参考node-sass中的版本对应关系。

2../node_modules/antd/es/icon/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-8-4!./node_modules/antd/es/icon/style/index.less)

TypeError: this.getOptions is not a function

原因: less-loader安装的版本过高

解决方案:
npm uninstall less-loader

"less": "^3.10.3",
"less-loader": "^5.0.0",

yarn

标签:node,升级,less,项目,modules,loader,React,版本,antd
From: https://www.cnblogs.com/ZerlinM/p/18043470

相关文章

  • 学习之WEB项目的标准结构
    一个标准的可以用于发布的WEB项目标准结构如下app本应用根目录static非必要目录,约定俗成的名字,一般在此处放静态资源(cssjsimg)WEB-INF必要目录,必须叫WEB-INF,受保护的资源目录,浏览器通过url不可以直接访问的目录classes必要目录,src下源代码,配置......
  • 可用于智能客服的完全开源免费商用的知识库项目
    FastWiki项目是一个高性能、基于最新技术栈的知识库系统,专为大规模信息检索和智能搜索设计。利用微软SemanticKernel进行深度学习和自然语言处理,结合.NET8和MasaBlazor前端框架,后台采用.NET8+MasaFramework+SemanticKernel,实现了一个高效、易用、可扩展的智能向量搜索平台。我......
  • react native工程打包成apk
    react-native工程打包成apk1.生成签名密钥使用jdk自带的keytool生成密钥以管理员身份运行如下命令keytool-genkey-v-keystoremy-test3-key.keystore-aliasmy-key-test3-keyalgRSA-keysize2048-validity10000其中my-test3-key.keystore为生成的密钥库文件(给Andr......
  • 使用 Python 的 Django 框架开发一套 Web API 项目 All In One
    使用Python的Django框架开发一套WebAPI项目AllInOne游戏广告WebAPIDjango项目vsDjango应用程序一个Project可以包含多个Appsporject是一个可以独立运行的软件包app的运行必须依赖projectapp可以作为可以复用的功能模块使用demosDRF,DjangoR......
  • 前端学习-vue视频学习001-了解、创建项目
    尚硅谷vue3+Typescript教程安装node.js安装教程创建项目npmcreatevue@latest运行项目npmrundev出现报错“'vite'不是内部或外部命令,也不是可运行的程序或批处理文件。”处理方式安装依赖npmi.vue文件结构<template><!--html--></template><script>......
  • 苹果iOS 18升级名单首曝:24款机型可升 iPhone XR不死!
    日前,媒体MacRumors得到了来自私人账号的苹果iOS18升级机型名单,该账号在iOS内部版本号方面有良好爆料记录。根据机型名单,iOS18将支持24款机型升级,与iOS17保持一致。具体机型如下:iPhone15iPhone15PlusiPhone15ProiPhone15ProMaxiPhone14iPhone14PlusiPhone......
  • k8s是如何保障滚动升级时下线的pod不被访问
    Kubernetes(k8s)通过一系列机制保障在滚动升级时,下线的Pod不再被访问。以下是一些主要的保障措施:Service抽象:在Kubernetes中,Pod通常不是直接暴露给外部访问的,而是通过Service来抽象和暴露。Service提供一个稳定的网络端点,无论背后的Pod如何变化,Service的IP和端......
  • ssts-hospital-web-master项目实战记录三十:项目迁移-Hook实现(useDeviceStore)
    记录时间:2024-02-28一、useDeviceStore模块实现types/device.ts//定义DeviceInfo的类型interfaceDeviceInfo{ Id:string TypeId:number TypeName:string DeviceId:number OrderNo:number DeviceName:string DeviceCode:string ParentI......
  • 苹果取消电动汽车项目;英伟达 CEO 黄仁勋寄语:学习编程价值大幅降低丨 RTE 开发者日报 V
      开发者朋友们大家好: 这里是「RTE开发者日报」,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享RTE(RealTimeEngagement)领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「有看点的会议」,但内容仅代表编辑......
  • vue项目本地开发完成后部署到服务器后报404是什么原因呢?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一、如何部署前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后,是生成一系列的静态文件常规布署我们只需要将这个目录......