作者:liwuwuzhi 链接:https://www.jianshu.com/p/f19ba506f664 来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
今天遇到了这个问题,在简书上找到了答案,感谢大佬。
问题描述
因为在vue 项目中新安装了一个包,然后执行漏洞跟踪和修复后报了一堆的错
重现下场景:
先时用 npm
安装一个包。装完后提示:
// 提示1
found 3 vulnerabilities (1 low, 1 moderate, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
便跟着运行了npm audit fix
这句执行完之后提示:
// 提示2
(use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
我又跟着回车了 npm audit fix --force
执行完之后会看到一个warn 警告:
// 提示3
npm WARN webpack-dev-server@3.2.1 requires a peer of webpack@^4.0.0 but none is installed.
警告我们一般都是不理的,你懂的。所以我装完包之后要跑项目啦。
(这里说下 requires a peer of 这个警告还是不能忽略的,看上面的意思是我用的是[email protected]
,然后他需要 webpack
为4 版本的依赖。看来应该是webpack 版本过低了。但是这里我们先不做处理)
但是执行run npm dev
之后:
// 提示4
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
我需要安装 webpack-cli
?? 都跟着提示走到这里了,没办法就硬着头皮装下去吧。
装完之后,再跑run npm dev
执行后 ERR:
// 提示5
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuextest4@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuextest4@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
凉凉。
这次什么提示都没有。
此时内心是崩溃的,最怕这种环境啊依赖啊的错误。
其实之前有执行过npm audit fix --force
但并没有什么问题,不知是不是因为上段时间学 webpack 时,把webpack 卸了装装了卸的折腾,然后把环境给弄乱了。。
带这凉凉的心。又去查了 npm audit fix 具体指什么。
原因分析:
[email protected]
and npm@6
才有npm audit这个命令。该命令用于执行项目依赖关系树的即时安全性审查。
检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖,而不必再开发人员自己进行跟踪和修复。
# 扫描项目漏洞把不安全的依赖项自动更新到兼容性版本
npm audit fix
# 强制执行 audit fix 安装最新的依赖项(toplevel)
npm audit fix --force
很多时候,大家拿到项目之后直接 npm install,只要项目能成功运行基本没有人会去关注装了什么。一大堆错综复杂的相互关联的依赖包,就算开发者有安全意识,也缺乏解决安全漏洞的手段。 此时有个官方平台来帮忙管理收集反馈给出报告给出建议等,是一件很值得称赞的事。
所以 npm audit fix
还是有必要执行的。
看到 npm audit fix --force //强制安装最新的依赖项大概明白了上面问题的所在。
原本我项目的 webpack@3xx 和 webpack-dev-server@2xx 的版本是:
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
但是执行 npm audit fix --force 之后把我的 webpack-dev-server 强制安装到最新版本了,即 [email protected]。
而 [email protected]
是需要跟webpack@4xx
一起使用的,所以出现了上面的 提示3。
原本的webpack为@3xx , 即要升级webpack@4xx。但是我没升级,然后到了 提示4 需要安装 webpack-cli。
因为 webpack 官网上说:
装完之后再跑项目就直接提示 ERR 了。所以这一大串 心塞 是因为强制跟新了 webpack-dev-server 版本而跟webpack-dev-server一些相关的依赖不合而导致的。
所以直接运行 --force 的行为不要学习,对于没能自动修复的问题,说明肯定出现了 SEMVER WARNING 之类的警告,这意味着推荐的修复版本存在让代码出问题的可能,主要发生在依赖包更改了 API 或者升级了大版本的情况,这时候就需要格外的小心甚至需要改动一些自己的代码了。
解决方法:
知道了问题原因,那就可以去解决啦。
方法1: 用yarn 来安装,速度快还安全。
方法2:把 webpack-dev-server@3xx 退回以前版本
npm remove webpack-dev-server
npm install webpack-dev-server@2.9.1
npm run dev