Preface: In our NPM install install dependency, we need to add –legacy — peer — deps. We need to add –legacy — peer — deps to our NPM install dependency. What additional mechanisms does NPM install do after adding — Legacy-peer-deps?

Below, I will combine my existing understanding practice to analyze and answer:

In understanding the–legacy-peer-depsBefore we do whatpeerDependency

In package.json, you need to look at dependencies and devDependencies. Let’s take a look at peerDependencies.

Dependencies: Libraries or modules that an NPM module needs in order to work in production.

peerDependencies: A peer dependency is a specific version or set of versions of a third-party software library that a module is designed to work with. They’re similar in concept to the relationship between a browser extension and a browser.

In NPM V7, peerDependencies are installed by default. For everyday plugins such as Babel-plugin-dynamic-import-node, Babel-plugin-transform-Vue-jsx, lottie-Web, They all rely on WebPack for development.

What role does peerDependencies play in our daily development?

For example”Reference”

Let’s say you have a helloWorld project that declared packageA in package.json in dependencies. There are two plugin1 and plugin2 that also depend on packageA. If you declare packageA in dependencies instead of peerDependencies, then NPM install’s dependency diagram after installing plugin1 and Plugin2 looks like this:

.├ ── helloWorld │ ├─ class_modules│ ├── plugin1 │ ├─ nodule_modules│ ├─ ch2 │ ├─ ch2 │ ├ ─ ch0607 │ ├ ─ ch0608Copy the code

HelloWorld installs packageA once in your plugin1 and plugin2 dependencies, so you need to install packageA three times. Two installations are redundant.

PeerDependency avoids similar problems with core dependency libraries being downloaded repeatedly. If you use peerDependency to declare core dependencies in plugin1 and plugin2’s package.json, for example:

plugin1/package.json

{"peerDependencies": {" peeragea ": "1.0.1"}}Copy the code

plugin2/package.json

{"peerDependencies": {" peeragea ": "1.0.1"}}Copy the code

Declare the packageA on the primary system:

helloWorld/package.json

{"dependencies": {"packageA": "1.0.1"}}Copy the code

Executing NPM install on the main system generates a dependency graph that looks like this:

.├ ── helloWorld │ ├─ class_modules │ ├── packageA │ ├── plugin2Copy the code

As you can see, the generated dependency graph is flat and packageA will only be installed once.

So let’s summarize the features of declaring dependencies in plug-ins using Dependencies:

  • If the user explicitly relies on the core library, you can ignore the plug-in’speerDependenciesThe statement;
  • If the user does not explicitly depend on the core library, then follow the plug-inpeerDependenciesInstalls the library in the project root directory.
  • If the version that the user depends on or the version that each plug-in depends on is not compatible with each other, an error will be reported for the user to repair by themselves.

–legacy-peer-depsThe role of

In understanding thepeerDependenciesAfter the function, let’s take a look–legacy-peer-depsThe role of;

As mentioned above, in NPM V7, peerDependencies is now installed by default.

In many cases, this can lead to version conflicts that can interrupt the installation process.

— Legacy -peer-deps flag was introduced in V7 to bypass the peerDependency for automatic installation; This tells NPM to ignore the problem of introducing different versions of the same modules to each other in the project and proceed with the installation, ensuring that each imported dependency coexists with the different versions of the modules it uses.

This is the content to share with you, thank you for reading, remember to like 👍!

A little bit more every day. I’m Asscre. Please follow me!