Overview of package management tools

All the code of this course is written in nodeJS environment, not the browser environment

concept

Module

A piece of functionality that usually exists as a single file. An entry file is often called an entry module or a main module

Library (lib)

A complete functional block composed of one or more modules to provide a complete solution to a certain aspect of the development of the problem

Package (package)

A library containing metadata such as name, description, Git home page, license agreement, author, dependencies, and so on

! [img](.. /.. /WEB/ PackageManager/duyi-packagemanager-master /1. Overview/assets/the 2019-12-13-10-39-18. The PNG)

background

CommonJS enables a more fine-grained division of JS code in the Node environment with modules. A class, a function, an object, a configuration, and so on can be used as modules, and this fine-grained division is the cornerstone of developing large applications.

In order to solve common problems encountered in the development process, such as encryption, providing common tools and methods, simulation data, etc., a large number of third-party libraries have sprung up in the front-end community. These libraries are written using the CommonJS standard and are very easy to use.

However, when downloading and using these third-party libraries, you encounter a difficult problem:

  • Tedious downloading process
    • Go to the official website or github home page
    • Find and download the appropriate version
    • Copy to the project directory
    • If you encounter a library with the same name, you need to change the name
  • If the library needs to rely on other libraries, download the other libraries as required
  • How can a large number of libraries installed in the development environment be restored in production, and how can they be distinguished
  • Updating a library is extremely cumbersome
  • Self-developed libraries, how to use in the next development

These are the problems that package management tools are designed to solve

Front-end package manager

This course explains the package manager NPM: key YARN: secondary key Others: Understand

Almost all of the front end’s package managers are based on NPM, which currently serves as both a package manager and a cornerstone for other package management

NPM is called Node Package Manager. It runs in the Node environment and enables developers to search, install, update, uninstall and upload packages in a simple way

The root reason why NPM runs in node instead of a browser is that the browser does not provide the ability to download, delete, or read local files. Node, on the other hand, is a server environment, free from the limitations of a browser, and theoretically in complete control of the computer on which Node is running.

NPM was introduced to compensate for node’s lack of a package manager, and soon NPM was built into the installation file. When developers installed Node, NPM was automatically installed. Not only that, but the Node environment provided excellent support for NPM. Using NPM downloaded packages is much more convenient.

NPM consists of three parts:

  • Registry: entrance

    • Think of it as a huge database
    • Third party library developers, according to NPM specifications, their own library package uploaded to the database
    • Users download third-party packages from a unified address

  • Website:

    www.npmjs.com/

    • The query packet
    • Register, log in, manage personal information

  • CLI: command-line interface Indicates a command line interface

    • This part is the focus of this course
    • After NPM is installed, use the CLI to use the NPM functions

Node and NPM are mutually successful. The emergence of Node makes NPM popular, and the popularity of NPM drives the development of a large number of third-party libraries. Many excellent third-party libraries are packaged and uploaded to NPM, and these third-party libraries bring a large number of users to Node

Front-end package manager

This course explains the package manager NPM: key YARN: secondary key Others: Understand

Almost all of the front end’s package managers are based on NPM, which currently serves as both a package manager and a cornerstone for other package management

NPM is called Node Package Manager. It runs in the Node environment and enables developers to search, install, update, uninstall and upload packages in a simple way

The root reason why NPM runs in node instead of a browser is that the browser does not provide the ability to download, delete, or read local files. Node, on the other hand, is a server environment, free from the limitations of a browser, and theoretically in complete control of the computer on which Node is running.

NPM was introduced to compensate for node’s lack of a package manager, and soon NPM was built into the installation file. When developers installed Node, NPM was automatically installed. Not only that, but the Node environment provided excellent support for NPM. Using NPM downloaded packages is much more convenient.

NPM consists of three parts:

  • Registry: entrance

    • Think of it as a huge database
    • Third party library developers, according to NPM specifications, their own library package uploaded to the database
    • Users download third-party packages from a unified address

  • Website:

    www.npmjs.com/

    • The query packet
    • Register, log in, manage personal information

  • CLI: command-line interface Indicates a command line interface

    • This part is the focus of this course
    • After NPM is installed, use the CLI to use the NPM functions

Node and NPM are mutually successful. The emergence of Node makes NPM popular, and the popularity of NPM drives the development of a large number of third-party libraries. Many excellent third-party libraries are packaged and uploaded to NPM, and these third-party libraries bring a large number of users to Node

The installation of the package

Because the NPM’s official Registry server is located abroad, the download may be slow or fail due to network speed. Therefore, after NPM is installed, you need to reset the address of Registry to a domestic address. Currently, taobao registry.npm.taobao.org provides the domestic Registry address, which is set to this address first. Set way to NPM config set registry at https://registry.npm.taobao.org. Once set up, check with the command NPM config get Registry! [img](.. /.. /WEB/ PackageManager/duyi-packagemanager-master / 2.npm /2-1. PNG /assets/2019-12-16-10-25-13.png)

NPM installs a package in two ways:

  1. The local installation
  2. Global installation

The local installation

To complete the local installation, run the NPM install package name or NPM I package name command

Locally installed packages appear in the node_modules directory under the current directory

As development progresses, the node_modules directory becomes too large to transfer directly to production, so the.gitignore file is usually used to ignore the contents of this directory. Local installation works for most packages, It works in the current directory and its subdirectories usually in the root directory of your project using local installation when you install a package, NPM automatically manages dependencies, it downloads that package’s dependencies to node_modules and if the locally installed package has CLI, NPM places its CLI script file in node_modules/. Bin, which can be invoked using the NPX command name

Global installation

Global installation packages are placed in a special global directory, which can be viewed using the command NPM config get prefix

Use the command NPM install –global package name or NPM i-g package name

Important: The global installation package is not available to all projects, it only provides global CLI tools

In most cases, a global installation package is not required unless:

  1. The version of the package is very stable, with few major updates
  2. The CLI tools are frequently used in various projects
  3. The CLI tool supports only the development environment, not the deployment environment

Package configuration

Current problems:

  1. How to restore after copy project?
  2. How do you distinguish between development dependency and production dependency?
  3. If your own project is also a package, how do you describe the package information

All of these issues need to be addressed through the package configuration file

The configuration file

NPM treats each project that uses NPM as a package itself, and the package information needs to be described by a configuration file with a fixed name

The name of the configuration file is package.json

This file can be created manually or, more often, through the command NPM init

A lot of information can be described in a configuration file, including:

  • Name: indicates the package name. The name must be an English word character and supports a hyphen
  • Version: version
    • Version specification: Major version number. Minor version. Patch version
    • Major version number: increases only when significant changes have been made to the program, such as important new features, a large number of new apis, or major changes to the technical architecture
    • Minor version number: increases only when minor changes are made to the application, such as adding some minor features or auxiliary apis
    • Patch version: Update only when some bugs are resolved or partial optimizations are made, such as fixing a bug or improving the efficiency of a function
  • Description: indicates the description of the package
  • Homepage: the official website address
  • Author: The author of the package, which must be a valid NPM account name and whose writing specification isaccount <mail>, such as:zhangsan <[email protected]>Incorrect account and email address may cause package publishing failure
  • Repository: The repository address of a package, usually git or SVN, which is an object
    • Type: storage type, git or SVN
    • Address of the url:
  • Main: Package entry file from which package users import package contents by default
  • Keywords: search keyword. After the package is published, the package can be searched by the keyword in the array

Use NPM init –yes or NPM init -y to automatically populate the default configuration when the configuration file is generated

Save dependencies

Most of the time, we just develop the project and don’t package it for distribution, but we still need package.json files

The most important function of package.json files is to record the dependencies of the current project

  • Dependencies: Dependency package of the production environment
  • DevDependencies: Dependencies of the development environment only

After configuring the dependencies, use the following command to install them

## install dependencies dependencies + devDependencies
npm install
npm i

#Install only the production environment dependencies
npm install --production
Copy the code

This way, the code migration is not an issue, just the source code and package.json files, not the node_modules directory, and then the installation can be restored with commands after the migration

To make it easier to add dependencies, NPM supports adding additional parameters when using the install command to save installed dependencies to a package.json file

The commands involved are as follows

#Install dependency to production environmentNPM I Package name NPM I -- Save package name NPM i-s package name
#Install dependencies to the development environmentNPM I --save-dev package name NPM I -d package nameCopy the code

Auto-saved versions of dependencies, such as ^15.1.3, are written as semver versions, which will be explained later

The use of the package

Nodejs supports NPM very well

When importing a module using nodeJS, if the module path does not start with./ or.. /, node thinks the imported module is from the node_modules directory, for example:

var _ = require("lodash");
Copy the code

It first looks for files from the following location in the current directory

Node_modules /lodash. Js node_modules/lodash/ entry fileCopy the code

If no such file exists in the current directory, the system searches for it in the same way

If the file cannot be found in the top-level directory, an error is thrown

The entry files mentioned above are determined according to the following rules

  1. View the package.json file of the imported package and read the main field as the entry file
  2. If the main field is not included, index.js is used as the entry file

The import file rule also applies to modules in their own projects. In Node, you can manually specify a path to import files, which is rare

Semantic version

Thinking: if you write A package A, depends on another package B, when you write code, the package version B is against 2.4.1, you are the one who want to use the package you must install package B, and is against 2.4.1 version, or hope that he can install A higher version, higher version if you wish to install it, how high?

Review: Version number rules

Version specification: Major version number. Minor version. Patch version

  • Major version number: increases only when significant changes have been made to the program, such as important new features, a large number of new apis, or major changes to the technical architecture
  • Minor version number: increases only when minor changes are made to the application, such as adding some minor features or auxiliary apis
  • Patch version: Update only when some bugs are resolved or partial optimizations are made, such as fixing a bug or improving the efficiency of a function

Sometimes we want to upgrade the minor and patch versions when we install my dependencies, but not the major

Sometimes we want to install my dependencies so that only the patch version number can be promoted, and nothing else

We even want to rely on packages to keep fixed versions, although this is rare

As a result, specific dependency rules need to be clearly described in the configuration file, rather than simply writing the version number.

A description of such rules, the semantic version

The rules for writing semantic versions are very rich, and some common ones are listed below

symbol describe The sample Sample description
> Greater than a certain version > 1.2.1 The version is later than 1.2.1
> = Greater than or equal to a certain version > = 1.2.1 The version must be greater than or equal to 1.2.1
< Less than a certain version The < 1.2.1 Earlier than version 1.2.1
< = Less than or equal to a certain version < = 1.2.1 The version must be earlier than or equal to 1.2.1
– Between the two versions 1.2.1-1.4.5 Between 1.2.1 and 1.4.5
x An unfixed version number X 1.3. Just make sure the major version number is 1 and the minor version number is 3
~ The patch version can be added ~ 1.3.4 The major version number is 1, the minor version number is 3, and the patch version number is greater than or equal to 4
^ This version and patch version can be added ^ 1.3.4 Ensure that the major version number is 1, the minor version number is 3, and the patch version number is 4
* The latest version * Always install the latest version

Avoid reducing differences

Version-dependent control is always a dilemma

If you allow the version to increase, you can fix bug dependencies (patch version number), you can bring some surprises (minor version number), but you can also introduce uncertain risks (new bugs)

If versions are not allowed to increase, the best stability is achieved, but the ability to rely on package self-tuning is lost

Sometimes the situation is more complicated, and if the dependencies change after the upgrade, there will be more uncertainty

Based on this, when NPM installs a package, it automatically generates a package-lock.json file that records the exact dependencies when installing the package

If package-lock.json file is migrated during the migration project, the installation will be based on the exact dependencies in package-lock.json file to avoid differences as much as possible when resuming the installation

[Extends] Differential version handling of NPM

If two packages depend on different versions of the same package, see the following figure

! [img](.. /.. /WEB/ PackageManager/duyi-packagemanager-master / 2.npm /2-5. PNG /assets/2019-12-17-15-17-47.png)

In this case, instead of using a flat directory structure in node_modules, nested directories are created, as shown below:

├ ─ ─ node_modules │ ├ ─ ─ a │ │ ├ ─ ─ node_modules │ │ │ ├ ─ ─ c │ │ │ | | - c package files │ │ │ ─ ─ a package of files │ ├ ─ ─ b │ │ ├ ─ ─ node_modules │ │ │ ├ ─ ─ c │ │ │ | | - c package files │ │ │ ─ ─ b package filesCopy the code

NPM scripts

During development, we may use many CLI commands repeatedly, such as:

  • Start the project commands (CLI commands provided by Node or some third-party packages)
  • Deployment engineering commands (CLI commands provided with some third-party packages)
  • Test engineering commands (CLI commands provided by some third-party packages)

These commands are complex and vary from one third-party package to another, making them difficult to remember

As a result, NPM nicely supports scripts by simply configuring the scripts field in package.json to configure various script names

After that, we can run simple instructions to complete various operations

Run by NPM run script name

NPM also simplifies some common script names, such that run is not required:

  • start
  • stop
  • test

Some details:

  • NPX can be omitted from the script
  • The start script has a default value: node server.js

Operating Environment Configuration

Our code typically runs in one of three environments:

  1. The development environment
  2. The production environment
  3. The test environment

In some cases, we may need to do different things in Node code for different environments

How is it important to gracefully let Node know what context it is in

Usually we use the following processing:

Node has a global variable, global (analogous to window in a browser environment), which is an object in which all properties can be used directly

Global has a property called Process, which is an object that contains a lot of information about the computer on which node is currently running. One of these information is env, which is an object that contains all the system variables in the computer

In general, we use the value of the system variable NODE_ENV to determine what environment the Node program is in

There are two ways to set the value of NODE_ENV

  1. A permanent set
  2. Temporarily set

We usually use temporary Settings

Therefore, we can configure scripts to start the program after NODE_ENV is set

To avoid differences between systems, you can use the third-party library cross-env to set environment variables

Read package.json in node

In some cases, we might configure some custom fields in package.json that need to be read from Node

In Node, you can import a JSON-formatted file directly and it will automatically convert it to A JS object

Operating Environment Configuration

Our code typically runs in one of three environments:

  1. The development environment
  2. The production environment
  3. The test environment

In some cases, we may need to do different things in Node code for different environments

How is it important to gracefully let Node know what context it is in

Usually we use the following processing:

Node has a global variable, global (analogous to window in a browser environment), which is an object in which all properties can be used directly

Global has a property called Process, which is an object that contains a lot of information about the computer on which node is currently running. One of these information is env, which is an object that contains all the system variables in the computer

In general, we use the value of the system variable NODE_ENV to determine what environment the Node program is in

There are two ways to set the value of NODE_ENV

  1. A permanent set
  2. Temporarily set

We usually use temporary Settings

Therefore, we can configure scripts to start the program after NODE_ENV is set

To avoid differences between systems, you can use the third-party library cross-env to set environment variables

Read package.json in node

In some cases, we might configure some custom fields in package.json that need to be read from Node

In Node, you can import a JSON-formatted file directly and it will automatically convert it to A JS object

Other NPM commands

The installation

  1. Install the latest version accurately
NPM install --save-exact package name NPM install -e Package nameCopy the code
  1. Install the specified version
NPM install Package name @ Version numberCopy the code

The query

  1. Example Query the package installation path
npm root [-g]
Copy the code
  1. Viewing Package Information
NPM View package name [sub-information]## view aliases: v info show
Copy the code
  1. Querying installation packages
NPM list [-g] [--depth= dependency depth]## list aliases: ls la ll
Copy the code

update

  1. Check which packages need to be updated
npm outdated
Copy the code
  1. Update package
NPM update [-g]## update aliases: up and upgrade
Copy the code

Uninstall packages

NPM uninstall [-g] Package name## uninstall aliases: remove, rm, r, un, unlink
Copy the code

NPM configuration

The configuration of NPM can have a greater or lesser impact on other commands

After NPM is installed, two configuration files, user configuration and system configuration, are generated. If the configuration items of the two files conflict, the user configuration overwrites the system configuration

In general, we don’t care about the specific configuration file, but only the configuration that ultimately takes effect

You can run the following command to query the configurations that take effect

npm config ls [-l] [--json]
Copy the code

Alternatively, you can use the following command to operate the configuration

  1. Gets a configuration item
NPM config Get Indicates the configuration itemCopy the code
  1. Set a configuration item
NPM config set Configuration item = ValueCopy the code
  1. Example Remove a configuration item
NPM config delete Indicates the configuration itemCopy the code

Publish a package

The preparatory work

  1. Example Remove a Taobao mirror source
  2. Register an account on NPM website and complete email authentication
  3. Log in locally using the NPM CLI
    1. Using the commandnpm loginThe login
    2. Using the commandnpm whoamiView the current login account
    3. Using the commandnpm logoutThe cancellation
  4. Create the project root directory
  5. Use NPM init for initialization

release

  1. The development of
  2. Determine the version
  3. Using the commandnpm publishComplete release

Introduction of yarn

Yarn official website: www.yarnpkg.com/zh-Hans/

Yarn is a new JS package management tool from Facebook, Google, Exponent and Tilde that still uses NPM Registry, but provides a new CLI for managing packages

In the past, the emergence of YARN greatly robbed the market of NPM, and some people even joked that there was only one Registry left in NPM.

This happened because in the past, NPM had the following problems:

  • Deep nesting of dependency directories: In the past, NPM dependencies were nested, which was a huge problem on Windows systems that, for well-known reasons, could not support deep directories
  • Slow download speed
    • Because of the nesting level, NPM can only download packages in serial mode, that is, the next package will be downloaded after the previous package is downloaded, resulting in incomplete utilization of bandwidth resources
    • Multiple packages of the same version are downloaded repeatedly
  • Console output complex: in the past, when NPM installation package, each installation of a dependency, will output the dependency details, resulting in a large amount of information output to the console, encountered errors extremely difficult to view
  • Engineering migration issues: Because version dependencies of NPM can be ambiguous, it can lead to inconsistency in the exact version of dependencies after engineering migration.

Yarn has solved these problems since its birth by using the following methods:

  • Use a flat directory structure
  • Parallel downloads
  • Using local caching
  • The console outputs only key information
  • Use the Yan-r-lock file to record the exact dependencies

In addition, YARN has optimized the following:

  • Added some powerful commands
  • Make existing commands more semantic
  • Locally installed CLI tools can be started using YARN
  • Treat the global installation directory as a normal project and generate package.json files for global installation portability

The emergence of YARN brought tremendous pressure to NPM. Soon, NPM learned the advanced concept of YARN and continuously optimized itself. The current VERSION of NPM6 almost completely solved the above problems:

  • Directory flattening
  • Parallel downloads
  • The local cache
  • Use package-lock to record exact dependencies
  • Added a number of command aliases
  • Built-in NPX, you can start local CLI tools
  • Greatly simplified console output

conclusion

After NPM6, it can be said that NPM is very close to YARN, or even close. Many new projects have been moved back from YARN to NPM.

These two package managers are currently mainstream and must be learned.

Yarn core command

  1. Initialize the

Yarn init [–yes/-y]

  1. The installation

Yarn [global] add package-name [–dev/ -d] [–exact/ -e]

Install all dependencies in package.json: yarn install [–production/–prod]

  1. Scripts and local CLI

Run script: name of the yarn run script

Start, stop and test can omit run

Run the locally installed CLI: yarn run CLI name

  1. The query

View the bin directory: yarn [global] bin

Yarn info Package name [subfield]

List installed dependencies: yarn [global] list [–depth= dependency depth]

The list command of YARN is different from the list command of NPM. The output information of YARN is richer, including the top-level directory structure and the dependent version number of each package

  1. update

List the packages that need to be updated: YARN outdated

Upgrade package: YARN [global] upgrade package

  1. uninstall

Uninstallation package: yarn remove Package name

Yarn’s special gift

On terminal commands, YARN has not only changed the name of the NPM command, but also added some commands that were not originally available, which are very convenient to use at some point

  1. yarn check

Using the yarn check command, you can verify whether the dependency records of the package.json file are consistent with those of the lock file

This is very useful in preventing tampering

  1. yarn audit

Using the yarn audit command, you can check the known vulnerabilities of the locally installed package in a table. The vulnerability levels are as follows:

  • INFO: Indicates the information level
  • LOW: LOW level
  • MODERATE: MODERATE
  • “HIGH” : indicates a HIGH level
  • CRITICAL: indicates the CRITICAL level
  1. yarn why

Using the YARN Why package name command, you can print on the console why this package is installed and which packages use it

  1. yarn create

Very interesting command

In the future, we’ll look at some scaffolding, which is the use of a command to build an engineering structure

In the past, we used the following approach:

  1. Global installation scaffold tool
  2. Scaffolding using global commands

Since most scaffolding tools are named create-xxx, react’s official scaffolding name is create-react-app

Therefore, you can use the yarn create command to complete the installation and setup in one step

Such as:

yarn create react-app my-app
#Equivalent to the following two commands
yarn global add create-react-app
create-react-app my-app
Copy the code

cnpm

Official website: npm.taobao.org/

In order to solve the problem of slow connection between Domestic users and NPM Registry, Taobao built its own Registry, namely taobao NPM image source

In the past, NPM did not provide the function to modify Registry, so Taobao provided a CLI tool, namely CNPM, which supported all commands except NPM publish, but connected to the Taobao mirror source

Now, NPM has support to modify Registry, probably the only role of CNPM is to coexist with NPM, that is, use NPM if you want to use official source, use CNPM if you want to use Taobao source

nvm

NVM is not a package manager; it is a tool for managing multiple versions of Node

In real life development, there may be multiple projects using different versions of Node, and in this case, managing different versions of Node becomes important

NVM is a tool for switching versions

Download and Install

Download the latest version at github.com/coreybutler…

Download nVM-setup.zip and install it directly

The use of NVM

NVM provides a CLI tool for node version management. N Enter NVM on a terminal to view available commands

In order to speed up the download, it is recommended that the mirror set up taobao node taobao image: npm.taobao.org/mirrors/nod… NPM taobao mirror: npm.taobao.org/mirrors/npm…

pnpm

PNPM is a new package manager. According to the downloads of NPM, it has not yet surpass YARN. However, its implementation method is worth learning from mainstream package managers, and some developers highly recommend using PNPM

As a result, it has the following advantages:

  1. The installation efficiency is higher than that of the latest VERSION of NPM and YARN
  2. Extremely compact node_modules directory
  3. The problem of using indirect dependencies during development is avoided
  4. This greatly reduces disk space usage

Installation and use

Install PNPM globally

npm install -g pnpm
Copy the code

In the future, you only need to replace NPM with PNPM

If you want to execute a locally installed CLI, you can use PNPX, which does exactly the same thing as NPX, except that when you use PNPX to execute a command that needs to be installed, you use PNPM to install it

For example, when NPX mocha executes the local mocha command, if the mocha is not installed, the NPX automatically installs the mocha temporarily, and then automatically runs the mocha command after the mocha is installed

PNPM principle

  1. Like YARN and NPM, PNPM still uses caching to hold installed packages and pnpm-lock.yaml to record detailed dependency versions
  2. Unlike YARN and NPM, PNPM uses symbolic links and hard links (think of them as shortcuts) to place dependencies, which avoids copying files from the cache and makes installation and uninstallation faster
  3. Using symbolic and hard links, PNPM can avoid the problem of Windows operating system paths being too long, so it chooses to use tree dependency results and has almost perfect dependency management. Because of this, only direct dependencies can be used in a project, not indirect dependencies

Matters needing attention

Since PNPM changes the node_modules directory structure so that each package can only use direct dependencies instead of indirect dependencies, there is a problem if packages installed using PNPM contain indirect dependencies (not anymore, unless absolute paths are used).

Because of PNPM’s high installation and uninstallation efficiency, more packages are starting to fix previously indirect dependencies