一、下载项目
访问ElementUI的代码仓库并将项目下载到本地。
二、执行报错
当我们执行 nmp run dev 指令时，会遇报错信息：
...省略日志信息
gyp ERR! UNCAUGHT EXCEPTION
gyp ERR! stack Error: spawn C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools\MSBuild\15.0\Bin\MSBuild.exe ENOENT
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:285:19)
gyp ERR! stack at onErrorNT (node:internal/child_process:485:16)
gyp ERR! stack at processTicksAndRejections (node:internal/process/task_queues:83:21)
gyp ERR! System Windows_NT 10.0.22621
gyp ERR! command "D:\\development-tool\\nodejs\\node.exe" "D:\\development\\GitHub\\element-dev\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\development\GitHub\element-dev\node_modules\node-sass
gyp ERR! node -v v16.18.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! This is a bug in `node-gyp`.
gyp ERR! Try to update node-gyp and file an Issue if it does not help:
gyp ERR! <https://github.com/nodejs/node-gyp/issues>
Build failed with error code: 7
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! dev webpack@"^4.14.0" from the root project
npm ERR! peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader@"^7.1.5" from the root project
npm ERR! 17 more (copy-webpack-plugin, css-loader, eslint-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^2.0.0 || ^3.0.0" from karma-webpack@3.0.5
npm ERR! node_modules/karma-webpack
npm ERR! dev karma-webpack@"^3.0.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@3.12.0
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^2.0.0 || ^3.0.0" from karma-webpack@3.0.5
npm ERR! node_modules/karma-webpack
npm ERR! dev karma-webpack@"^3.0.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See D:\NodeCache\npm\cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! D:\NodeCache\npm\cache\_logs\2023-05-26T08_59_55_632Z-debug-0.log
三、分析原因
首先，梳理 node-sass 和 node-gyp 关系：
- node-sass 是一个将 Sass 编译为 CSS 的 Node.js 包,本身用 C/C++ 语言编写。
- node-gyp 是一个编译 C/C++ Node.js 扩展包的工具,用于编译如 node-sass 这样的包以用于在 Node.js 中。
- 在安装 node-sass 时,npm 会调用 node-gyp 来编译 node-sass,所以需要确保 node-gyp 相关依赖已安装,否则安装 node-sass 会失败。
- node-sass 的安装依赖于 node-gyp 的编译,二者有着密切的关系
然后，去查看 node-sass 文档，可以看到node 对 node-sass 的最小和最大支持版本
| NodeJS | Supported node-sass version | Node Module |
|---|---|---|
| Node 20 | 9.0+ | 115 |
| Node 19 | 8.0+ | 111 |
| Node 18 | 8.0+ | 108 |
| Node 17 | 7.0+, <8.0 | 102 |
| Node 16 | 6.0+ | 93 |
| Node 15 | 5.0+, <7.0 | 88 |
| Node 14 | 4.14+, <9.0 | 83 |
| Node 13 | 4.13+, <5.0 | 79 |
| Node 12 | 4.12+, <8.0 | 72 |
| Node 11 | 4.10+, <5.0 | 67 |
| Node 10 | 4.9+, <6.0 | 64 |
| Node 8 | 4.5.3+, <5.0 | 57 |
| Node <8 | <5.0 | <57 |
最后，查看环境和项目配置
- 执行
node --version：v16.18.1； - 查看
package.json："node-sass": "^4.11.0" - 查看
yarn.lock："node-sass": "4.14.1"
四、处理报错
- 从依赖关系看出，
"node-sass": "4.14.1"需要 14.x 版本的 Node 环境 - 借助 NVM for Windows 工具切换 Node 版本：
nvm use 14.21.0 - 删除
yarn.lock文件 - 删除
node_modules文件夹 - 重新执行
npm run dev，等待项目启动 - 打开http://localhost:8085/#，就能看到和官网一样的页面。
五、总结
ElementUI v2.15.13依赖比较旧，需要 Node 环境降级到14.x.x- 使用 NVM for Windows 工具，方便管理环境
yarn.lock依赖也很旧，报错太多可以删除后重新生成
