Use of npm package management, cnpm, yarn, cyarn

Summary

Package management tools

1. Package management tools There are four types: npm, cnpm, yarn, cyarn

npm

Two, npm

  • 2.1 If it is for the use of a certain local project, the first thing must be: npm init / npm init -y(yes)

    Precautions: It is best not to call the directory name of the initialization npm/node/cnpm/yarn/cyarn/Chinese directory

  • 2.2 The next thing is basically to do the installation of the package:
    npm i(install) package name additional parameters

    • Installation of local packages:
      Additional parameters:
      -D(--save-dev): Development environment: Only use the result of this package when writing code, and the result will not be changed and uploaded to git After the warehouse, other programmers will not be prompted to install this package when using the files in this project. For example: webpack, webpack-cli…
      -S(--save): production environment (default): not only when writing code, you need the support of this package, but also after uploading the project to the git warehouse in the future, other programmers will also need this package to download the project The file can only be run with the support of the package, so the package needs to be defined in the production environment when it is installed

    • Installation of global packages:
      -g(global): As long as the package is installed globally, it will not be affected by the terminal running path, that is to say, any path can be used
      You can use the command: npm root -g to find the path of all installed global packages
      Some global packages are basically fixed: cnpm, yarn, webpack, nodemon

  • 2.3 npm i(install): Install all dependent packages in package.json (when other people put the project in the gitee warehouse, the dependent package of this file is first needed to clone and download the project, then we There is no need to download one by one, download in a unified way)

  • 2.4 npm i package name@version: Install a specific version in this package, otherwise, if you do not add a version number, you will install the latest version of this package

  • 2.5 npm remove package name: for partial package removal
    npm remove package name -g removes globally installed packages

  • 2.6 Run the program file by configuring the scripts in the package.json file to start the service command
    Syntax: npm run alias
    Special alias: start only needs: npm start
    Non-start aliases must be written in full syntax: npm run xxx
    Later, through the webpack packaging tool, there is only one file at the entry of the project, so we only have one sentence to configure the alias of the running program.
    Configure one file if you don’t know which file to run!!!

  • 2.7 Configure Taobao mirror: npm config set registry https://registry.npm.taobao.org

  • npm clear cache npm cache clean

nodemon can be used to start server service, similar to hot update (nodemon server.js)

cnpm

Third, cnpm
cnpm is just a domestic Taobao mirror package

  • Installation: npm i cnpm -g --registry=https://registry.npm.taobao.org
  • Use: The use of npm is consistent with the use of cnpm
    Initialize the package.json file: cnpm init / cnpm init -y
    Installation package: cnpm i package name -D / cnpm i package name -S (omitted) / cnpm i package name -g
    Install a specific version of the package: cnpm i package name@version
    Remove partial package: cnpm remove package name

yarn

four, yarn

  • Initialization: yarn init / yarn init -y

  • Installation package:

    • Partial package:
      Installation in production environment: yarn add package name
      Install in development environment: yarn add package name --dev

    • Global package: yarn global add package name
      If you want to view the installation location of the global package: yarn global dir

  • Install a specific version: yarn add package name@version number
    Note: When installing a specific version, the version number must be written in full, but it is not required when using npm to install a specific version

  • Remove package:
    Partial package: yarn remove package name
    Full report: yarn global remove package name

  • View the list of which packages are installed: yarn list

  • Installation dependencies: yarn (this command is equivalent to npm i / cnpm i)

  • Configure Taobao image: yarn config set registry https://registry.npm.taobao.org

 yarn --version view version number
\t
yarn init generate package.json
\t
yarn global add package name (eg: axios) global installation package
\t
yarn global dir View the location of the global installation
\t
? Global installation path C:\Users\your username\AppData\Local\Yarn\bin
\t
yarn global remove package name (eg: axios) delete package globally
\t
yarn add package name (eg: axios) local installation package production environment package
\t
yarn add package name (eg: axios) --dev (equivalent to –save-dev in npm) locally installs the development environment package
\t
yarn remove package name (eg: axios) to remove locally installed packages
\t
yarn list lists the installed package names, rarely used
\t
yarn installs all dependencies in package.json
\t
yarn add package name@version number Install the specified version of the package (the version number must be written in full)

cyarn

five, cyarn

Install and configure Taobao mirror: npm install cyarn -g --registry "https://registry.npm.taobao.org"

The use of cyarn is consistent with yarn

NPM

1. Introduction to npm

Full name: Node Package Manager, Node’s package manager, is also an application.

2. What is the package

The Node.js package basically follows the CommonJS specification, combining a set of related modules to form a complete tool

3. Function

Through NPM, you can search, download, install, delete, and upload Node toolkits.

Using packages written by others can make our development more convenient.

4. Install

After installing nodejs, npm will be installed automatically

5. Common commands

5.1 View npm version

npm -v

5.2 Initialization

npm init: The configuration file used to create the package.json package, pay attention to the package name can not be casual

npm init -y: yes means that the step of hitting enter is omitted during init

The package.json file will be created in the current directory after running

{<!-- -->
  "name": "test", #The name of the package
  "version": "1.0.0", #version of the package
  "description": "", #Description of the package
  "main": "hello.js", #The entry file of the package
  "scripts": {<!-- --> #script configuration
    "test": "echo "Error: no test specified" & amp; & amp; exit 1"
  },
  "author": "", #author
  "license": "ISC", #copyright statement
}

Note that the generated package name cannot use Chinese, uppercase ~~~, and npm cannot be used as the package name.

The npm init command is generally run in the root directory of the project, which is the same as the execution location of the git command.

5.3 Search package

Generally, when searching for toolkits, you will go to https://npmjs.org to search

5.4 Installation Toolkit

Download the required package from the npm official website to our own computer, the function is to install the corresponding module.

npm i(install) package name additional parameters

Additional parameters: -D(–save-dev) / -S(–save)

–save: Install the package installed after npm i into the production environment

–save-dev: Install the package installed after npm i into the development environment

Production environment: Whether it is during the period of writing code, or after it is finally launched to the git warehouse and shared with other members, the files in the project still need to have some package function support, so the package must be in the production environment when it is downloaded

Development environment: Only use this package during the period of writing code. The result obtained after running this package is a fixed result, and will not change again, and will not affect other members to use this project. Then this package will be downloaded when It is the development environment.

npm install jquery
npm i jquery

# Install and save package information (dependencies attribute) in package.json that needs to be published to the production environment
npm install jquery --save
npm install jquery -S

# Install and save package information (devDependencies property) in package.json only for development environment, not for production environment
npm install babel --save-dev
npm install babel -D

In version 6 of npm, the installation package will be automatically saved in Dependencies, so you don’t need to write --save

After installing the module, the package-lock.json file and node_module directory will be generated

1.package-lock.json: is a lock file used to fix the version number of the package

2.node_modules: is a folder used to store the toolkit code downloaded by npm

5.5 Global installation

npm i module name -g(global) global installation

npm install less -g # Run: lessc The file name of less The css file name to be generated
npm install nodemon -g

npm remove less -g # package removal

Global installation is generally used to install global tools, which can provide direct execution commands. We use this method to install some tool packages

Such as cnpm, yarn, webpack, gulp, nodemon, etc.

The installation location of global commands: C:\Program Files\\
odejs\\
ode_global\\
ode_modules

The global installation command can be executed under any command line (not affected by the installation location)

npm root -g View the location of globally installed packages

5.6 Difference between global package and project package

A rule of thumb:

  • Global installation is required to use the package’s command to perform tasks.
  • If you want to import and use it through require, you need to install it locally – the project package.

5.7 Installation dependencies

According to the dependency declaration in package.json, install the toolkit

It is suitable for the existing package.json to install the dependent packages in a certain directory

Mainly used during team development:

  1. Pull repository code from repository
  2. Run npm install to install dependencies
  3. Run the project and continue development
npm i
npm install
npm install package name@version

Case: push local project to git remote warehouse

5.8 Remove package

npm remove module name used to remove a certain package

Example: npm remove jquery

5.9 Run the script attribute name in the package.json file

npm run attribute name (can be customized)

The attribute name used to run the scripts in the package.json file, used to execute the attribute value, convenient to run the js file

{<!-- -->
  "name": "demo3",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {<!-- -->
    "test": "echo "Error: no test specified" & amp; & amp; exit 1",
    "serve": "node server.js" # Set the property name of the custom running js file
  },
  "author": "",
  "license": "ISC"
}

Environment variables

  1. This Computer -> Right Click Properties
  2. Advanced System Settings
  3. Click on Environment Variables
  4. Double-click the Path variable value
  5. New -> Add Folder Path
  6. OK all the way

Common mistakes

Email is not activated

npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/hello_test_npm - You do not have permission to publish "xxx". Are you logged in as the correct user?
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

CNPM

1. Introduction

cnpm is a complete mirror version of Taobao’s foreign npm server, that is, Taobao’s npm mirror, the website address is http://npm.taobao.org/

2. Install

There are two ways to install and configure

  • npm install -g cnpm –registry=https://registry.npm.taobao.org
  • alias cnpm=”npm –registry=https://registry.npm.taobao.org
    –cache=

    h

    o

    m

    E.

    /

    .

    no

    p

    m

    /

    .

    c

    a

    c

    h

    e

    /

    c

    no

    p

    m

    ?

    ?

    d

    i

    the s

    t

    u

    r

    l

    =

    h

    t

    t

    p

    the s

    :

    /

    /

    no

    p

    m

    .

    t

    a

    o

    b

    a

    o

    .

    o

    r

    g

    /

    d

    i

    the s

    t

    ?

    ?

    u

    the s

    e

    r

    c

    o

    no

    f

    i

    g

    =

    HOME/.npm/.cache/cnpm \ –disturl=https://npm.taobao.org/dist \ –userconfig=

    HOME/.npm/.cache/cnpm disturl=https://npm.taobao.org/dist userconfig=HOME/.cnpmrc” (only available under Linux)

3. Use

After the configuration is complete, you can use the cnpm command to manage packages in the same way as npm

cnpm install lodash # Installation package
cnpm remove lodash # remove package

Notice:

By default, package information installed using cnpm will not be recorded in Dependencies in package.json,

Therefore, we need to add the -S option when installing

3.1 npm configure Taobao mirror address

Can be run in any location, only need to be executed once

It is equivalent to the address downloaded by npm using the mirror address of Taobao, and the speed of downloading the package has been improved

//Taobao mirror image
npm config set registry https://registry.npm.taobao.org
//official image
npm config set registry https://registry.npmjs.org/

When publishing tools, be sure to change the warehouse address to the official address

4. Yarn

4.1 Introduction

Yarn is a new package manager open sourced by Facebook that can be used to replace npm.

4.2 Features

Compared with npm, yarn has several characteristics

  • local cache. Installed packages will not be remotely installed next time
  • Download in parallel. Download multiple packages at once, while npm downloads serially
  • Precise version control. Ensure that each installation is the same as the last time

4.3 Installation

4.3.1 yarn installation

Yarn can be installed with just one line of command

npm install yarn -g

Using the yarn global installation command will fail, assuming that the lessc method does not set the Path environment variable by default, so it cannot be used in other locations

If you want to use less, you need to manually configure the directory where lessc is located. This is also the disadvantage of using this method. Of course, the advantage is convenience.

4.3.2 msi installation package installation [recommended]

https://classic.yarnpkg.com/en/docs/install#windows-stable

Note: Restart the command line tool after installation!!!

4.4 Related commands

  1. yarn –version

  2. yarn init //generate package.json

  3. yarn global add package (global installation)

  4. yarn global dir View the location of the global installation

? Global installation path C:\Users\your username\AppData\Local\Yarn\bin

  1. yarn global remove less (global delete)

  2. yarn add package (partial installation)

  3. yarn add package –dev (equivalent to –save-dev in npm)

  4. yarn remove package remove

  5. yarn list //List the installed package names rarely used

  6. yarn // install all dependencies in package.json

npm 5 introduces offline caching to improve installation speed, and also introduces package-lock.json file to enhance version control

yarn modify warehouse address

yarn config set registry https://registry.npm.taobao.org

5. Cyarn

Similar to the relationship between npm and cnpm, you can set a domestic Taobao mirror for yarn to increase the speed of installation

Classic interview questions: All package management tools you know: npm, cnpm, yarn, cyarn

npm install cyarn -g --registry "https://registry.npm.taobao.org"

After configuration, just change yarn to cyarn to use

6. Appendix

Install the specified version of the toolkit

yarn add [email protected]

npm clear cache

npm cache clean