问题描述
因为在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)
emmm 好吧我又跟着回车了 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 这个警告还是不能忽略的，看上面的意思是我用的是webpack-dev-server@3.2.1 ，然后他需要 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 具体指什么。
原因分析：
npm@5.10.0 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 强制安装到最新版本了，即 webpack-dev-server@3.2.1。
而 webpack-dev-server@3.2.1 是需要跟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
参考文章：
found 52 vulnerabilities run npm audit fix to fix them
用 vue-cli 创建项目后 npm run dev 出错
audit fix 二三事
网友评论