Update Node Skill
升级 Vue CLI 项目到 Node 18+ 版本,解决 Node 14 时代的幽灵依赖问题。
前置条件
本 skill 已在 Node 22 下验证通过。当前项目状态:
- Node: v22.22.0(via .nvmrc 锁定)
- Phantom deps 已就绪(@babel/plugin-proposal-object-rest-spread、eslint-loader@2.2.1、qs)
- babel.config.js 已配置正确
- pnpm 作为包管理器
执行步骤
Step 1: 检测当前状态
node -v
如果已是 18+,直接跳到 Step 4 验证。
Step 2: 切换 Node 版本
# 使用 nvm 切换(需要先安装 nvm)
nvm install 22
nvm use 22
Step 3: 删除 node_modules 并重新安装
> 注意:pnpm workspace 下请确保在正确的子项目目录执行。
# Windows PowerShell
Remove-Item -Recurse -Force node_modules
# Linux/macOS 或 Git Bash
rm -rf node_modules
# 重新安装
pnpm install
Step 4: 更新 babel.config.js
确保 babel.config.js 包含以下配置(Vue CLI 项目标准写法):
const plugins = [
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-object-rest-spread',
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
if (process.env['NODE_ENV'] === 'development') {
plugins.push('dynamic-import-node')
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
[
'@babel/preset-env',
{
'modules': false,
'corejs': '3',
'useBuiltIns': 'entry',
'targets': {
'browsers': ['> 1%', 'last 3 versions', 'not ie <= 8']
}
}
]
],
plugins
}
Step 5: 验证构建
pnpm run build:prod
验证通过标准:
- 无 babel 相关错误
- 无 Cannot find module 错误
- 无 eslint-loader 解析失败
已升级项目(可直接跳过)
本项目(integratedServicesIndex)已验证通过:
- ✅ Node v22.22.0 + .nvmrc =
18 - ✅
@babel/plugin-proposal-object-rest-spread已安装 - ✅
eslint-loader@2.2.1已安装 - ✅
qs@^6.15.1已安装 - ✅
babel.config.js已就绪
直接运行 pnpm run build:prod 即可验证。
回滚方案
如遇问题:
- 检查
pnpm-lock.yaml是否正确生成(pnpm install 后) - 确认
babel.config.js语法无误 - 确认 node_modules/.bin 下有 eslint-loader:
ls node_modules/.bin/eslint-loader - 如需回滚:
git checkout -- babel.config.js package.json pnpm-lock.yaml