Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

This paper has participated inProject DigginTo win the creative gift package and challenge the creative incentive money

What happened after NPM install

Idle time to have a tight mind, busy time to have leisure fun

directory

  • preface

  • The body of the

    • What happened after NPM install
    • Second, NPM cache
    • About YARN
    • 4. Compare the YARN and NPM commands

  • conclusion

  • Reference documentation

preface

Returns the directory

NPM Install is usually the first command line executed after a project is downloaded. In this process may be smooth sailing, may also encounter large and small error, sometimes take a little time to find a variety of search can be solved, but the next encounter or confused online to find a variety of solutions to try to solve the error.

So, do you know what happens when you type in NPM instal and press Enter?

The body of the

What happened after NPM install

Returns the directory

NPM install will probably go through the following steps, so let’s take a look at them briefly.

  1. After NPM install is executed, it checks and obtains the NPM configuration with priority as

Project level. NPMRC files > user level. NPMRC files > Global. NPMRC files > NPM built-in

The.npmrc file is the NPM configuration file. To view all NPM configurations, including default configurations, run the following command:

npm config ls -l
Copy the code
  1. Then check to see if there is one in the itempackage-lock.jsonFile.

Starting with NPM 5.x, a package-lock.json file is automatically generated when NPM install is executed.

The package-lock.json file describes exactly the tree dependencies of all packages in node_modules, and the version number of each package is completely exact.

So NPM will first check if there is a package-lock.json file in the project, in two cases:

  • If so, checkpackage-lock.jsonandpackage.jsonAre the dependencies declared in
  • Consistent: Direct usepackage-lock.jsonTo load dependencies from the cache or network
  • Inconsistent: Different versions of NPM are handled as shown in the figure above
  • If not, according topackage.jsonThe dependency tree is built recursively, and the complete dependency resource is downloaded from the tree, and the associated resource cache is checked at download time
  • Exists: Decompress the cache resource tonode_modules 中
  • Does not exist: Downloads the resource pack from the remote repository, verifies its integrity, and adds it to the cache, while unpacking tonode_modules 中
  1. Eventually, the resource bundle is downloaded and stored in the cache directory; Unzip the resource pack to the current projectnode_modulesDirectory; And generatepackage-lock.jsonFile.

When building a dependency tree, both direct and subdependencies are placed in the node_modules root directory according to the principle of flattening (the latest NPM specification). During this process, if the same module is encountered, the module that has been placed in the dependency tree is checked to see if it matches the version range of the new module. If so, If no, a new module is placed under the node_modules of the current module.

Second, NPM cache

Returns the directory

After you run the NPM install or NPM update command to download dependencies, the dependency package is installed in the node_modules directory and a copy of the dependency package is cached in the local cache directory. We can obtain the cache location by using the following command:

NPM config get cache // C:\Users\DB\AppData\ NPM -cacheCopy the code

For example, my cache location is in the _cacache folder under C: Users\DB\AppData\ Npm-Cache.

When the dependency is installed again, a unique key is generated based on the integrity, version, and name information stored in package-lock.json, and the key is then searched for the corresponding cache record in the directory. If there are cache resources, the hash value of the tar package will be found. Find the cached tar package according to hash, and extract the binary file to the corresponding project node_modules, saving the cost of network download resources.

Therefore, if the downloaded package is incomplete due to network reasons, it may cause the problem of deleting node_modules to download again. If the problem of deleting node_modules to download again is still the problem, then we need to use the command line to clear the cache.

NPM cache clean --forceCopy the code

However, the _cacache folder does not contain the global installation package. To clear the global installation package, use NPM uninstall -g

About YARN

Returns the directory

Yarn profile:

Yarn is a new JS package management tool from Facebook, Google, Exponent and Tilde. As the official documentation states, YARN has emerged to remedy some of the shortcomings of NPM.

Yarn features:

  • Speed is fast
  • Yarn caches every downloaded package, so you do not need to download it again. Parallel downloads are also used to maximize resource utilization, so installation is faster.
  • security
    • Yarn verifies the integrity of each installation package through an algorithm before executing the code.
  • reliable
    • With a detailed and concise lock file format and a clear installation algorithm, YARN ensures that it works equally on different systems.

Contrast yarn and NPM commands

Returns the directory

npm yarn instructions
npm init yarn init Initialize the project
npm install yarn Install default dependencies
npm install react –save yarn add react Install a dependency (React)
npm uninstall react –save yarn remove react Uninstall a dependency (react)
npm update –save yarn upgrade Update the rely on

conclusion

Returns the directory

Whether it’s using NPM or YARN to manage your project dependencies, we need to know how and why so we can locate and solve problems in the project, right?

Reference documentation

  • NPM module installation mechanism introduction | nguyen
  • NPM install principle analysis | ConardLi
  • | CSDN – h03580 NPM install mechanism
  • The front-end engineering (5) : you need knowledge of NPM reserves in this | nuggets – Tiboo
  • Front-end engineers should know knowledge of yarn | nuggets – and _

Postscript: Hello friends, if you think this article is good, remember to give a thumbs-up or star, your thumbs-up and star is my motivation to write more and richer articles!Making the address

Document agreement

Db’s document library is licensed by DB under the Creative Commons Attribution – Non-commercial use – Share alike 4.0 International License. Based on works on github.com/danygitgit. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.