npm package management tool; package.json; package-lock.json; npm install installation and principle; yarn, cnpm, npx; npm release package; pnpm

1_npm package management tool

1.1_Code sharing scheme

In JavaScript, the code can be divided into small structures in a modular way:

• In future development, you can encapsulate your own code in a modular way, and encapsulate it into a tool;
• This tool can be used by colleagues by importing it, and can even be shared with programmers around the world;

If it is shared with all programmers in the world, what are the ways?

Method 1 : Upload to GitHub, and other programmers manually reference the code downloaded through GitHub;

• The disadvantage is that everyone must know the address of the code GitHub, and manually download it from GitHub;
• You need to manually reference in your own project and manage related dependencies;
• When you don't need to use it, you need to manually delete the related dependencies;
• When encountering a version upgrade or switch, you need to repeat the above operations;

Obviously, the above method is effective, but this traditional method is very cumbersome and error-prone;

Method 2 : Use a professional tool to manage the code

• Publish the code to a specific location through the tool;
• Tool codes that other programmers install, upgrade, and delete directly through tools;

Obviously, through the second method, you can better manage your own toolkit, and the toolkit that others can use better

1.2_package management tool npm

Package management tool npm:

• Node Package Manager, which is the Node package manager;
• But at present, it is not only the Node package manager, it is also used in front-end projects to manage dependent packages;
• Such as vue, vue-router, vuex, express, koa, react, react-dom, axios, babel, webpack, etc.;

How to download and install npm tools?

• npm is a management tool of node, so you need to install Node first;
• Node management tool: https://nodejs.org/en/, the process of installing Node will automatically install the npm tool;

Where can I view and search the packages managed by npm?

• https://www.npmjs.org/
• This is the official website for installing related npm packages;

Where are the packages managed by npm stored?

• Publishing your own package is actually publishing to the registry;
• When installing a package, it is actually a package downloaded from the registry;

2_package.json

For a project, how to use npm to manage so many packages?

• In fact, each project will have a corresponding configuration file, whether it is a front-end project (Vue, React) or a back-end project (Node);
• This configuration file will record the project name, version number, project description, etc.;
• It will also record the information of other libraries that the project depends on and the version number of the dependent library;

This configuration file ispackage.json

So how to get this configuration file?

• Method 1: Manually create a project from zero, npm init –y
• Method 2: Create a project through scaffolding, which will help generate package.json, and there are related configurations in it

2.1_Common attributes in configuration files

Required attributes: name, version

• name is the name of the project;
• version is the version number of the current project;
• description is descriptive information, often used as the basic description of the project;
• author is the relevant information of the author (used when publishing);
• The license is an open source protocol (used when publishing);

private attribute:

• The private attribute records whether the current project is private;
• When the value is true, npm cannot publish it, which is the way to prevent private projects or modules from being published;

scripts attribute

• The scripts attribute is used to configure some script commands, which exist in the form of key-value pairs;
• After configuration, you can execute this command through the key of the npm run command;
• What is the difference between npm start and npm run start?
  • They are equivalent;
  • For the commonly used start, test, stop, and restart, run can be omitted and run directly through npm start, etc.;

dependencies property

• The dependencies attribute is to specify the packages that need to be depended on regardless of the development environment or the production environment;
• It is equivalent to recording the packages that a project depends on. At that time, the package file can be deleted, and the required package can be downloaded again through npm install;
• Usually some library modules vue, vuex, vue-router, react, react-dom, axios, etc. used in the actual development of the project;
• Corresponding to it is devDependencies;

devDependencies property

• Some packages are not needed in the production environment, such as webpack, babel, etc.;
• At this time, it will be installed into the devDependencies property through npm install webpack --save-dev;

peerDependencies property

• Another kind of project dependency is peer-to-peer dependency, that is, a dependent package, which must be based on another host package;
• For example, element-plus depends on vue3, and ant design depends on react and react-dom;

engines attribute

• The engines attribute is used to specify the version numbers of Node and NPM;
• During the installation process, the corresponding engine version will be checked first, and an error will be reported if it does not match;
• In fact, you can also specify the operating system "os": [ "darwin", "linux" ], but it is rarely used;

browserslist attribute

• It is used to configure the compatibility of the packaged JavaScript browser, refer to;
• Otherwise, you need to manually add polyfills to support certain syntax;
• In other words, it is an attribute that serves packaging tools such as webpack (here is not a detailed explanation of the working principle of tools such as webpack, so no more details are given);

2.2_Dependent version management

The installed dependency version appears: ^2.0.3 or ~2.0.3, what does this mean?

Npm packages usually need to comply with the semver version specification:

• semver：https://semver.org/lang/zh-CN/
• npm semver：https://docs.npmjs.com/misc/semver

The semver version specification is XYZ:

• X major version number (major): when an incompatible API modification is made (may not be compatible with previous versions);
• Y minor version number (minor): as a functional addition for backward compatibility (new features are added, but compatible with previous versions);
• Z revision number (patch): As a backward compatible problem fix (no new features, bug fixes in previous versions);

The difference between ^ and ~:

• xyz: Indicates a clear version number;
• ^x.y.z: Indicates that x remains unchanged, and y and z always install the latest version;
• ~x.y.z: Indicates that x and y remain unchanged, and z always installs the latest version;

3_npm install

3.1_commands

There are two situations for installing npm packages:

• Global install (global install): npm install webpack -g;
• Project (partial) installation (local install): npm install webpack

Global installation

• Global installation is to directly install a package globally:
• For example, to install yarn globally:

But many people have some misunderstandings about global installation:

• Usually, the packages installed globally using npm are some toolkits: yarn, webpack, etc.;
• It is not similar to library files such as axios, express, koa, etc.;
• Therefore, after the global installation, it is not possible to use axios and other libraries in all projects;

3.2_Project installation

The project installation will generate a node_modules folder in the current directory. When explaining the require search order, we have explained under what circumstances the package is searched;

Partial installation is divided into development-time dependencies and production-time dependencies:

Default installation development and production dependencies
npm install axios
npm i axios

Development depends on
npm install webpack --save-dev
npm install webpack -D
npm i webpack –D

According to the dependency package npm install in package.json

3.3_principle

ask a question?

• What does npm install do behind the scenes?
• The package-lock.json file, what is its function?
• Since npm5, npm supports caching strategy (pressure from yarn), what does caching do?

npm install will detect if there is a package-lock.json file:

• no lock file
  • Analyze dependencies, because packages may depend on other packages, and multiple packages may have the same dependencies;
  • Download the compressed package from the registry warehouse (if the mirror is set, the compressed package will be downloaded from the mirror server);
  • After the compressed package is obtained, the compressed package will be cached (starting from npm5);
  • Unzip the compressed package into the node_modules folder of the project (as mentioned earlier, the search order of require will be searched under the package)
• There is a lock file
  • Check whether the version of the package in the lock is consistent with that in package.json (it will be checked according to the semver version specification).
    • Inconsistency, then the dependency relationship will be rebuilt, and the top-level process will be followed directly;
    • In the case of consistency, the cache will be searched first. If not found, it will be downloaded from the registry warehouse and go directly to the top-level process;
  • When the cache is found, the compressed file in the cache will be obtained, and the compressed file will be decompressed into the node_modules folder;

3.4_package-lock.json

File parsing:

• name: the name of the project;
• version: the version of the project;
• lockfileVersion: the version of the lock file;
• requires: use requires to track module dependencies;
• dependencies: project dependencies
  • The current project depends on axios, but axios depends on follow-redirects;
  • The attributes in axios are as follows:
    • version indicates the version of axios actually installed;
    • resolved is used to record the download address and the location in the registry warehouse;
    • requires/dependencies records the dependencies of the current module;
    • Integrity is used to obtain the index from the cache, and then use the index to obtain the compressed package file;

3.5_npm other commands

Uninstall a dependent package
npm uninstall package
npm uninstall package --save-dev
npm uninstall package -D

Force a rebuild: npm rebuild

Clear cache: npm cache clean

There are a lot of commands in npm. For more commands, you can refer to the official documentation https://docs.npmjs.com/cli-documentation/cli

4_yarn、cnpm、npx

4.1_ yarn

The node package management tool yarn:

• yarn is a new JS package management tool jointly launched by Facebook, Google, Exponent and Tilde;
• Yarn appeared to make up for some defects of early npm;
• There are many defects in the early npm, such as a series of problems such as slow installation of dependencies, confusion of version dependencies, etc.;
• Although a lot of upgrades and improvements have been made since the npm5 version, many people still like to use yarn;

4.2_cnpm

Due to some special reasons, it is not possible to download some required packages from https://registry.npmjs.org in some cases.

View npm mirror: npm config get registry

Set the mirror of npm: npm config set registry https://registry.npm.taobao.org

But for most people, you don't want to modify the npm image:

• First, I don’t want to modify the channel where npm originally downloaded from the official package at will;
• Second, I am worried that one day Taobao’s mirror image will be hung up or not maintained, and it will be changed again; at
  this time, you can use cnpm and set cnpm as Taobao’s mirror image:

cnpmtools

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm config get registry # https://r.npm.taobao.org/

4.3_npx

npx is a command that comes with npm5.2. npx has many functions, but it is more common to use it to call the instructions of a certain module in the project.

Take webpack as an example:

• The global installation is webpack5.1.3
• The project is installed with webpack3.6.0

Which command is used to execute webpack --version in the terminal?

• The displayed result will be webpack 5.1.3. In fact, it is used globally. Why?
• The reason is very simple. When webpack cannot be found in the current directory, it will search globally and execute the command;

Execution of local commands

The way to use the webpack of the project (partial):

(1) Method 1: Use the following command in the terminal
First switch to the ./node_modules/.bin/ directory, and then enter the terminalwebpack --version

(2) Method 2: Modify scripts in package.json
"scripts": { "build": "webpack " }

Then enter the command in the terminalnpm run build

(3) Method 3: Use npx. terminal inputnpx webpack --version

The principle of npx is very simple, it will find the corresponding command in the node_modules/.bin directory of the current directory;

5_npm publishes its own package

Register npm account: Go to the official website https://www.npmjs.com/ and select sign up to register

Login at the command line: npm login

Modify package.json

Publish to the npm registry: npm publish

Update the warehouse: modify the version number (preferably in line with the semver specification); republish

Remove published packages: npm unpublish

Expire published packages: npm deprecate

6_pnpm

6.1_ Introduction

Visit the official website https://www.pnpm.cn/
Official website introduction:

• Fast: pnpm is nearly 2 times faster than similar tools

• Efficient: all files in node_modules are cloned or hardlinked from a single storage location

• Single repository support: pnpm has built-in support for multiple packages in a single source repository

• Strict permissions: The node_modules created by pnpm are not flat by default, so the code cannot access any software package

The package management tools of many companies or open source projects, including Vue, have switched to pnpm;

6.2_ Hard link and soft link

Hard link (hard link):

• Hard link (English: hard link) is that multiple files in the computer file system equally share the same file storage unit;
• After deleting a file name, you can continue to access the file with other names;

Symbolic link (soft link, Symbolic link): (can be understood as a shortcut)

• Symbolic link (soft link, Symbolic link) is a special type of file;
• It contains a reference to other files or directories in the form of absolute path or relative path

6.3 The role of_pnpm

When using npm or Yarn, if you have 100 projects and all of them have the same dependency, then you need to keep 100 copies of the same dependency on disk.

If pnpm is used, dependent packages will be stored in a unified location, so:

• If you use the same version for the same dependency, there is only one file for that dependency on disk;
• If you need to use different versions of the same dependency package, only the files that differ between versions will be stored;
• All files are stored in a unified location on the hard drive:
  • When a package is installed, all files it contains are hard-linked to this location without taking up additional hard disk space;
  • This makes it easy to share the same version of dependencies between projects;

6.4_pnpm creates a non-flat node_modules directory

When installing dependencies using npm or Yarn Classic, all packages will be promoted to the root of node_modules. As a result, the source code can access dependencies that are not set by the current project;

The detailed implementation is skipped, just remember the above conclusion.

6.5 Installation and use of_pnpm

Install pnpm?

• The official website provides many ways to install pnpm: https://www.pnpm.cn/installation

• If you have installed Node, there is npm in Node, you can install it through npm;

Using npm: npm install -g pnpm

For more commands and usage, please refer to the official website of pnpm: https://pnpm.io/zh/

6.6_pnpm storage store

Before pnpm7.0, the unified storage location was in ~/.pnpm-score;

After pnpm7.0, the unified storage location has been changed: /store

• On Linux, the default is ~/.local/share/pnpm/store
• On Windows: %LOCALAPPDATA%/pnpm/store
• On macOS: ~/Library/pnpm/store

Terminal command to get the current active store directory: pnpm store path

The prune command deletes currently unreferenced packages from the store to free up space in the store: pnpm store prune

90765009324)]

For more commands and usage, please refer to the official website of pnpm: https://pnpm.io/zh/