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

相关推荐
前端李易安2 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
loey_ln3 小时前
webpack配置和打包性能优化
前端·webpack·性能优化
Amd7947 小时前
Nuxt.js 应用中的 webpack:compile 事件钩子
webpack·自定义·编译·nuxt.js·构建·钩子·逻辑
三天不学习11 小时前
前端工程化-node/npm/babel/polyfill/webpack 一文速通
前端·webpack·npm
前端青山12 小时前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
前端与小赵12 小时前
什么是Sass,有什么特点
前端·rust·sass
一个小坑货13 小时前
Rust基础
开发语言·后端·rust
Object~14 小时前
【第九课】Rust中泛型和特质
开发语言·后端·rust
码农飞飞17 小时前
详解Rust结构体struct用法
开发语言·数据结构·后端·rust·成员函数·方法·结构体
前端与小赵1 天前
什么是Webpack,有什么特点
前端·webpack·node.js