webpack 老项目升级记录:从 node-sass 限制的的 node v8 提升至支持 ^node v22

老项目简介

技术框架

  • vue 2.5.17
  • webpack 4.16.5
  • "webpack-cli": "3.1.0"
  • "node-sass": "^4.7.2"

几个阶段

第一步:vue2 升级到最新

第一步:升级 vue2 至最新版本,截止到目前(2024-10-21),最高的 vue 版本是 "vue": "^2.7.16"

这一步会比较丝滑,2版本兼容的挺好的

第二步:寻找项目只能在 Node 低版本下运行的原因

什么叫版本只能在低版本运行的原因呢:举个例子,比方说我的项目必须用 Node 8 版本启动,其他版本就不行

第二步:寻找 node 版本锁死的原因:node-sass!!!

这个依赖包版本是跟 node 版本强绑定的 ,具体可以看一下这个

在这里插入图片描述

所以我改成了 sass ,也叫 dart-sass

在这里插入图片描述
这一步需要修改源码了!

因为 sass 只支持 ::v-deep,而 node-sass 同时支持/deep/::v-deep

所以,可以全局搜索 /deep/::v-deep,这一步可能会改很多的文件!记得修改完之后跑一下试试!

在这里插入图片描述

此时,我们的 node 版本大概可以支持到 node V16,这个的限制是因为 webpack4

根据 Webpack 4 的官方文档和社区反馈,Webpack 4 支持的最高 Node.js 版本是 14.x。
建议使用 Node.js 14.x 版本以获得最佳的兼容性和性能。

替换 webpack 为 vite

这一步的工程量也是挺大的,大概有如下几点

  • 安装 vite

    npm install –save vite
    
  • 安装你项目语言的插件(例如vue2,vue3,react 等),我的是 vue2

    npm install –save @vitejs/plugin-vue2
    import vue2 from "@vitejs/plugin-vue2";
    
  • 修改 package.json 里的命令

    {"scripts": {"dev": "vite", // 启动开发服务器,别名:`vite dev`,`vite serve`"build": "vite build", // 为生产环境构建产物"preview": "vite preview" // 本地预览生产构建产物}
    }
    
  • 项目根目录下,新建一个 vite.config.ts

    // vite.config.js
    import { defineConfig } from 'vite'
    import vue2 from "@vitejs/plugin-vue2";
    export default defineConfig({plugins: [vue2(),],
    })
    
  • 还要新建一个 .env 的文件,用于存放 process 的变量,这里的变量我是在 axios 拦截器里用的在这里插入图片描述

    VITE_BASE_URL= "后端地址"
    
  • 还要改一下项目根目录的 index.html 的入口文件,具体参考这个官方文档

    <!-- index.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>wukong</title><link rel="icon" href="/favicon.ico">
    </head>
    <body><div id="app"></div><script type="module" src="/src/main.js"></script>
    </body>
    </html>
    
  • vite 运行之后会报错,是因为一些组件在引入的时候没有写 .vue,添加 extensionsvite.config
    在这里插入图片描述

    resolve: {alias: {"@": path.resolve(__dirname, "src"),},extensions: [".js", ".json", ".ts", ".jsx", ".tsx", ".vue"], // 添加 .vue 扩展名},
    
  • … 大概就是这么多,肯定会遇到其他问题的,根据自己的项目改就好

切换完 vite 之后,node版本就可以切得高一点来试试了,我的是 v22.9.0
在这里插入图片描述

sass 终端提示报错(未解决)(we

这个原因是 sass 的问题,虽然给了配置字段,但是不好使,看着闹心的话暂时没啥办法,容我再研究研究

1. https://sass-lang.com/blog/import-is-deprecated/#built-in-functions
2. https://stackoverflow.com/questions/78997907/the-legacy-js-api-is-deprecated-and-will-be-removed-in-dart-sass-2-0-0

在这里插入图片描述

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

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

相关文章

解决RabbitMQ脑裂问题

文章目录 前言一、现象二、解决办法 前言 RabbitMQ脑裂 一、现象 RabbitMQ镜像群出现脑裂现象&#xff0c;各个节点的MQ实例都“各自为政”&#xff0c;数据并不同步。 二、解决办法 # 停止mq sh rabbitmq-server stop_app # 查看mq进程是否存在 ps -ef | grep rabbitmq # …

ATom:加州理工学院化学电离质谱仪(CIT-CIMS)的现场数据,V2版

目录 简介 摘要 代码 引用 网址推荐 知识星球 机器学习 ATom: In Situ Data from Caltech Chemical Ionization Mass Spectrometer (CIT-CIMS), V2 ATom&#xff1a;加州理工学院化学电离质谱仪&#xff08;CIT-CIMS&#xff09;的现场数据&#xff0c;V2版 简介 该数…

trueNas 24.10 docker配置文件daemon.json无法修改(重启被覆盖)解决方案

前言 最近听说truenas的24.10版本开放docker容器解决方案放弃了原来难用的k3s&#xff0c;感觉非常巴适&#xff0c;就研究了一下&#xff0c;首先遇到无法迁移老系统应用问题比较好解决&#xff0c;使用sudo登录ssh临时修改daemon.json重启docker后进行docker start 容器即可…

十一、数据库配置

一、Navicat配置 这个软件需要破解 密码是&#xff1a;123456&#xff1b; 新建连接》新建数据库 创建一个表 保存出现名字设置 双击打开 把id设置为自动递增 这里就相当于每一次向数据库添加一个语句&#xff0c;会自动增长id一次 二、数据库的增删改查 1、Vs 建一个控…

Java设计模式之代理模式(二)

一、CGLIB动态代理 JDK动态代理要求被代理的类必须实现接口&#xff0c;有很强的局限性&#xff0c;而CGLIB动态代理则不要求被代理类实现接口。简单的说&#xff0c;CGLIB会让生成的代理类继承被代理类&#xff0c;并在代理类中对代理方法进行强化处理(前置处理、后置处理等)。…

二叉树详解:类型、特性与应用

二叉树详解&#xff1a;类型、特性与应用 二叉树&#xff08;Binary Tree&#xff09;是计算机科学和数据结构中的核心构造&#xff0c;广泛用于多种算法和系统的实现。其每个节点最多有两个子节点&#xff0c;即左子节点和右子节点。尽管其结构表面上相对简单&#xff0c;二叉…

在 Gitee 或 GitCode 上克隆 Dify 项目源码并启动 Docker 环境

在 Gitee 或 GitCode 上克隆 Dify 项目源码并启动 Docker 环境 第一步&#xff1a;克隆源码仓库 首先&#xff0c;使用以下命令将项目克隆到本地&#xff0c;确保您已经在 Gitee 或 GitCode 上配置了 SSH 密钥&#xff1a; git clone gitgitcode.com:Mingcai_Xiong/dify-cop…

git的学习之远程进行操作

1.代码托管GitHub&#xff1a;充当中央服务器仓库的角色 2.git远程进行操作 3.配置本地服务器的公钥 4.推送 5.git远程操作 pull .gitignore 6.给命令配置别名 git config --global alias.st status 7.标签管理 git tag -a [name] -m "XXX" [commit_id] 操作标签…

基于Python的自然语言处理系列(46):4-bit LLM 量化与 GPTQ

在本篇文章中&#xff0c;我们将深入探讨如何使用 GPTQ (Generative Pre-trained Quantization) 进行4-bit大语言模型(LLM)的量化。在大规模语言模型训练和推理的背景下&#xff0c;模型的量化不仅能够大大降低计算成本&#xff0c;还能够提高推理速度&#xff0c;因此对构建高…

正则表达式使用举例一(Python下)

目录 1 问题描述2 解决2.1 问题1的解决2.2 问题2的解决 摘要&#xff1a;本文给出了一个在Python语言中利用re包进行正则表达式匹配计算的例子。详细讲述了所写的正则表达式的含义&#xff0c;还对搜索结果对象的span()函数进行运用举例&#xff0c;从而成功提取出原字符串中的…

查找与排序-插入排序

1.直接插入排序的基本思想 假设n个数据元素关键字存储在静态数组a中&#xff0c;则直接插入排序的基本思想可做如下描述&#xff1a; &#xff08;1&#xff09;初始有序子序列由一个元素a[0] 组成&#xff1b; &#xff08;2&#xff09;从a[1]开始&#xff0c;对于序列中每…

安卓屏幕旋转(TODO)

要对整个安卓系统实现实时旋转&#xff0c;无论设备如何旋转&#xff0c;屏幕始终与设备的物理方向保持一致&#xff0c;涉及到修改 Android 系统级别的显示设置和传感器处理。这种需求不单单在应用层实现&#xff0c;而是需要对 Android 系统的 **frameworks** 和 **display s…

leetcode 75-13 k和数对的最大数目

我的思路 sort函数排序 然后双指针判断 这样时间复杂度nlgn 题解给出了一种空间换时间方法 用哈希表 注意一下写法 现在完全不会这样写 还有就是注意sort函数的代码 怎么写排序也给忘了 sort用的是什么排序方法

自由职业者的一天:作为小游戏开发者的真实工作日记

大家好&#xff0c;我是小蜗牛。 在这个快节奏的数字时代&#xff0c;自由职业者的生活往往充满了挑战与机遇。作为一名微信小游戏开发者&#xff0c;我的日常工作并不像人们想象中的那样充满光鲜亮丽的画面&#xff0c;而是由无数的编码、调试和创意碰撞组成的。今天&#xf…

MySQL 回收表碎片实践教程

前言&#xff1a; 在 MySQL 数据库中&#xff0c;随着数据的增删改操作&#xff0c;表空间可能会出现碎片化&#xff0c;这不仅会占用额外的存储空间&#xff0c;还可能降低表的扫描效率&#xff0c;特别是一些大表&#xff0c;在进行数据清理后会产生大量的碎片。本篇文章我们…

高并发-负载均衡

负载均衡在微服务架构中是一个重要的组成部分&#xff0c;旨在优化资源利用、提高服务可用性和确保系统的高可扩展性。以下是对微服务中的负载均衡的详细介绍&#xff0c;包括其原理、类型、实现方式以及相关的技术。 一、负载均衡的原理 负载均衡的基本原理是将进入系统的请…

Lesson11---stack

Lesson11—stack cstack的介绍使用以及模拟实现 文章目录 Lesson11---stack前言一、stack成员函数1.stack2.empty3.size4. top5.push6.pop 二、stack相关题目1. 最小栈2.栈的压入、弹出序列 三、模拟实现总结 前言 stack的介绍和使用stack是一种容器适配器&#xff0c;专门用…

B+树(B树的改进)

目录 一、什么是B树&#xff1f; 二、B树的性质 1.B树被广泛作为数据库索引的索引结构 2.m个分支的结点有m个元素 3.每个元素对应子结点最大值 4.多级索引结构 5.叶子结点层包含所有元素 三、B树和B树的区别 四、B树的查找 1.顺序查找 2.随机查找 3.范围查找 一、什…

vue3完整Demo(数据绑定,数据显示,数据修改,数据提交)

需要引入的的依赖&#xff1a;jquery&#xff08;用于异步请求&#xff09; 一、数据显示的前端页面 条件查询数据并显示&#xff0c;下拉框使用的model双向绑定 二、js代码&#xff08;list页面的数据请求&#xff09; 后端传来的时间数据需要转换可以使用new Intl.DateTim…

Vue3 学习笔记(七)Vue3 语法-计算属性 computed详解

#1024程序员节|征文# 1、计算属性 computed 在 Vue.js 中&#xff0c;计算属性&#xff08;computed properties&#xff09;是一种特殊的响应式属性&#xff0c;它们根据依赖的响应式数据自动更新。计算属性非常适合用于当你需要根据现有数据派生出一些状态时。 (1)、基本用法…