Author: liwuwuzhi Link: https://www.jianshu.com/p/f19ba506f664 Source: Jianshu
The copyright belongs to the author. For commercial reprint, please contact the author for authorization, for non-commercial reprint, please indicate the source.
I encountered this problem today and found the answer in the short book, thanks to the boss.
Description of the problem
Because a new package was installed in the vue project, and then a bunch of errors were reported after performing vulnerability tracking and repair. Reproduce the next
scenario: install
a package first . npmPrompt after installation:
// 提示1
found 3 vulnerabilities (1 low, 1 moderate, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
Then run it. npm audit fix
After the execution of this sentence, it prompts:
// 提示2
(use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
I followed the carriage return, and after npm audit fix --force
execution I will see a warn warning:
// 提示3
npm WARN webpack-dev-server@3.2.1 requires a peer of webpack@^4.0.0 but none is installed.
We generally ignore warnings, you know. So I have to run the project after installing the package.
(Here, the warning requires a peer of cannot be ignored. The above means that I am using [email protected], and then it needs to webpackbe a dependency of version 4. It seems that the version of webpack is too low. But let’s not do it here deal with)
But run npm devafter executing:
// 提示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
I need to install webpack-cli?? I have followed the prompts and come here. If there is no way, just bite the bullet and install it.
After loading, run againrun npm dev
ERR after execution:
// 提示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.
Cool.
This time there were no prompts.
At this time, my heart is broken, and I am most afraid of this kind of environment, dependence, and mistakes.
In fact, it has been executed before npm audit fix --force, but there is no problem. I wonder if it is because when I learned webpack some time ago, I uninstalled and unloaded webpack, and then messed up the environment. .
Take this cool heart. I went to check what npm audit fix specifically refers to.
Reason analysis:
[email protected]and npm@6only has the npm audit command. This command is used to perform an instant security review of a project's dependency tree.
Detect vulnerabilities in project dependencies and automatically install vulnerable dependencies that need to be updated without developers having to track and fix them themselves.
# 扫描项目漏洞把不安全的依赖项自动更新到兼容性版本
npm audit fix
# 强制执行 audit fix 安装最新的依赖项（toplevel）
npm audit fix --force
Most of the time, after you get the project, you directly npm install it. As long as the project can run successfully, no one will pay attention to what is installed. A large number of intricate and interrelated dependent packages, even if developers are security aware, they lack the means to solve security vulnerabilities. At this time, there is an official platform to help manage, collect feedback, give reports, give suggestions, etc., which is a very commendable thing.
So npm audit fixit is still necessary to implement.
See npm audit fix --force // Forcing to install the latest dependencies probably understands the problem above.
The original version of webpack@3xx and webpack-dev-server@2xx of my project is:
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
But after executing npm audit fix --force, my webpack-dev-server was forced to install to the latest version, namely [email protected].
Instead, [email protected]it needs to webpack@4xxbe used together, so the prompt 3 above appears.
The original webpack is @3xx, that is to upgrade webpack@4xx. But I didn't upgrade, and then I got to prompt 4 and need to install webpack-cli.
Because the webpack official website says:
After installing, run the project again, it will directly prompt ERR. So this series of heartaches is caused by the incompatibility with some related dependencies of webpack-dev-server due to the mandatory new version of webpack-dev-server.
So do not learn the behavior of running --force directly . For problems that cannot be automatically repaired, it means that there must be warnings such as SEMVER WARNING, which means that the recommended repair version may cause code problems, mainly in dependent packages. If the API is changed or a major version is upgraded, you need to be extra careful and even change some of your own code.
Solution:
Know the cause of the problem, then you can solve it.
Method 1: Use yarn to install, which is fast and safe.
Method 2: Return webpack-dev-server@3xx to the previous version
npm remove webpack-dev-server
npm install webpack-dev-server@2.9.1
npm run dev