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

    javascript 复制代码
    npm install --save vite
  • 安装你项目语言的插件(例如vue2,vue3,react 等),我的是 vue2

    javascript 复制代码
    npm install --save @vitejs/plugin-vue2
    import vue2 from "@vitejs/plugin-vue2";
  • 修改 package.json 里的命令

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

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

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

    javascript 复制代码
    <!-- 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

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

切换完 vite 之后,node版本就可以切得高一点来试试了,我的是 v22.9.0

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

这个原因是 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

相关推荐
hikktn6 小时前
如何在 Rust 中实现内存安全:与 C/C++ 的对比分析
c语言·安全·rust
睡觉谁叫~~~6 小时前
一文解秘Rust如何与Java互操作
java·开发语言·后端·rust
音徽编程6 小时前
Rust异步运行时框架tokio保姆级教程
开发语言·网络·rust
梦想画家18 小时前
快速解锁Rust Slice特性
开发语言·rust·slice
lin-lins19 小时前
模块化开发 & webpack
前端·webpack·node.js
良技漫谈19 小时前
Rust移动开发:Rust在iOS端集成使用介绍
后端·程序人生·ios·rust·objective-c·swift
monkey_meng1 天前
【Rust实现命令模式】
开发语言·设计模式·rust·命令模式
Dontla1 天前
《Rust语言圣经》Rust教程笔记17:2.Rust基础入门(2.6模式匹配)2.6.2解构Rust Option<T>
笔记·算法·rust
Source.Liu1 天前
【用Rust写CAD】前言
开发语言·rust
良技漫谈2 天前
Rust移动开发:Rust在Android端集成使用介绍
android·程序人生·rust·kotlin·学习方法