preface

As a front end, we often get an error when executing a command, that is, NPM install. Then what does NPM install do, and how to locate the problem when encountering some similar problems?

Here are some of my understandings of the NPM package, as well as some of the potholes I stomped on. I have to say, NPM potholes are actually as deep as this graph shows, just to name a few.

About the NPM install

First, NPM is the module manager of Node. NPM publishes, installs, and so on third party modules of Node.

NPM install installs the NPM package into the node_modules directory

Here is a reference to Ruan Yifeng’s blog, the specific implementation process is as follows:

1. Issue the NPM install command. 2. NPM 4. Decompress the compressed package to the node_module directory of the current project

You can specify which packages to install after Install, and by default, you will look for them in the package.json file. Here we need to notice the difference between dependencies and devDependencies

Save to add to dependencies. The plug-in here needs to be published to production and will be there all the time

DevDependencies –save-dev The plug-in here is for development, not production. You need it when you pack it, you don’t need it when you pack it.

NPM in source

Because if the NPM package is installed directly, it is downloaded from a foreign server, and the speed is relatively slow, and it is prone to abnormalities, so we can change it to a domestic source, such as TAOBAO CNPM. The following commands may help you

NPM install - registry=https://registry.npm.taobao.org / / the temporary use of taobao mirror install NPM registry at https://registry.npm.taobao.org Install express / / use temporary taobao mirror install a module NPM install - g CNPM - registry=https://registry.npm.taobao.org / / global installation taobao mirror, You can then use CNPM install NPM config directlysetRegistry/https://registry.npm.taobao.org/permanent set the NPM to taobao mirror NPM configsetRegistry / / https://registry.npmjs.org/ using official image of NPM config get registry / / view the NPM source addressCopy the code

Here is a recommended source change tool, NRM, baidu, no more details.

The NPM package version is faulty

In the package.json file, we’ll see that each dependency has a specified version

First of all, let’s take a look at the naming conventions of these versions, which we will name as X.Y.Z format, where

  • xThis is the major version. Big changes.
  • yThis is the version number. Add new features
  • zIt’s a patch number. To fix the problem

The next thing to notice is the ^ symbol in the screenshot above, which represents the latest version under version dependent compatibility. Sometimes we encounter some problems and need to change to ~, which represents the latest patched version under dependency compatibility.

About the package. The lock. Json

Problem description This is a problem encountered by a team member. Note it here as well. The following questions will be reported during NPM I:

Delete package-lock.json and you won’t have this problem.

Json is a simple way to lock the version number of the dependencies installed. If necessary, upload it to Git to prevent bugs caused by the dependencies.

If you look at the error message again, you’ll see that it says what version was expected, but what version are you now

Bitcoin incident

Description: The project reported the above problem when reinstalling dependencies.

Problem analysis: It was initially thought that the package did not exist, but the dependency was not found in package.json. But they ignore a situation, is likely to be dependent on the dependence.

So why wasn’t the installation successful? Related to the previous “Bitcoin incident”, this can all fall into the pit

Cause: Bitcoin

If you want to continue using event-stream, you can update it to the latest version of Event-Stream 4.0.1.

We can install this version of event-Stream first

NPM I [email protected]

Then re-nPM I, and you’re done

conclusion

NPM packages run into all kinds of amazing problems, and the last two holes are obvious examples. I think what we can do is to understand how it works and to be able to further locate the problem when we encounter similar problems.

Small advertising area

This public account will collect the problems and solutions we usually meet in the background, welcome everyone to contribute! Of course, problems and solutions have a certain format, the specific requirements are as follows:

  • usemarkdownWriting (required), especially in English, and code blocks
  • Each problem should have a “problem description” and “problem Resolution” section (mandatory)
  • For other formats refer to the Gold Digger Translation Plan (optional)

Welcome to pay attention to this public account