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

news2024/10/25 13:25:18

老项目简介

技术框架

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，添加 extensions 到 vite.config 里
在这里插入图片描述

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

在这里插入图片描述