How to install and use NPM

npm How to install and use

This article mainly explains “npm How to install and use ”, The explanation in the text is simple and clear , Easy to learn and understand , Next, please follow Xiaobian's ideas and go deeper slowly , Study and learn together “npm How to install and use ” Well ！

One 、 origin

How does the front end share code ？

1、 stay GitHub There is no era of rise , The front end is to share the code through the web address

For example, you want to use jQuery, Then you click jQuery The links on the website can be downloaded jQuery, Put it on your own website

2、GItHub After the rise , Some people in the community also use GitHub Download function ：

3、 trouble

When a website relies on more and more code , Programmers find this a troublesome thing ：

• Go to jQuery Download from the official website jQuery

• Go to BootStrap Download from the official website BootStrap

• Go to Underscore Download from the official website Underscore

• ……

Some programmers can't stand birds , A programmer with three virtues  Isaac Z. Schlueter （ hereinafter referred to as Isaaz） Give a solution ： Use a tool to centralize the code and manage it together ！

This tool is what he uses JavaScript （ Running on the Node.js On ） Written npm, The full name is Node Package Manager

4、 Specific steps

NPM This is the way of thinking ：

1. Buy a The server As a code warehouse （registry）, Put all the code that needs to be shared in it

2. Send an email to inform jQuery、Bootstrap、Underscore Author use npm publish Commit the code to registry On , ." jquery、bootstrap and underscore（ Pay attention to case ）

3. If other people in the community want to use this code , Just put jquery、bootstrap and underscore writes package.json in , And then run npm install ,npm Will help them download the code

4. The downloaded code appears in node_modules Directory , You can use it at will .

The code that can be used is called 「 package 」（package）, This is it. NPM The origin of the name ：Node Package( package ) Manager( Manager ).

5、 Development

Isaaz notice jQuery author John Resig, Will he promise ？ It's not necessarily , Isn't it .

Only people in the community feel 「npm It's a treasure 」 When ,John Resig Will consider using npm.

that npm How did it fire ？

npm The development of is with Node.js Development complements each other .

Node.js It's an American programmer working in Germany Ryan Dahl Written . He wrote. Node.js, however Node.js Missing a package manager , So he and npm The author of the book is on the spot 、 Huddle for warmth , Final Node.js Built in npm.

We all know what happened later ,Node.js became angry .

With Node.js Hot , You start to use npm To share JS Code. , therefore jQuery The author will also jQuery Publish to npm 了 .

So now , You can use npm install jquery To download jQuery Code .

Now use npm To share code has become the standard configuration of the front end .

Two 、npm install

To install Vue Project as an example , Before use , Let's master it first 3 What is this thing for .

• npm: Nodejs Package manager under .

• webpack: Its main use is through CommonJS All static resources that need to be published on the browser side should be prepared according to the syntax of , Such as resource merging and packaging .

• vue-cli: User generated Vue Engineering formwork .（ Help you to start one quickly vue Project , That is to give you a set vue Structure , Include base dependency Library , It only needs npm install Can be installed ）

1、 download nodejs

windows Under the NodeJS The installation is quite convenient （v0.6.0 After the version , Support windows native）, Just log on to the official website （http://nodejs.org/）, You can see the “INSTALL” Button .

Pictured , download 12.18.0 LTS （ Recommended for most users ） Click directly and it will be downloaded automatically .

Double click Install after download

You can use the default path .

Be careful , As shown in the figure below , In the installation node.js when , Will be automatically installed together npm Package manager , Both are automatically added to the environment variables of the system .

All the way Next, Last point Finish complete

2、 Check the installation directory , Check if the file system is OK .

Whether it exists in the installation directory node.exe、npm.cmd Document and node_modules Directory etc. .

3、 open CMD, Check whether it is normal

see node.js and npm Whether the environment variable of is increased

echo %Path%

Check... By command node.js And installed with it npm Version number of the module .

node –v# v12.18.0npm –v# 6.14.4

4、 see npm Local global warehouse for

npm list -global

Be careful ：npm The local global warehouse of is located in C User directory of the system disk . namely C:\Users\bobin.yang\AppData\Roaming\npm.

5、 Configure mirror station

npm config set registry=http://registry.npm.taobao.org

6、 Show all configuration information

npm config list

We focus on a user profile .npmrc, You can see the configuration information just now

7、 Check whether the mirror station is OK

command 1

npm config get registry

command 2

npm info vue #  See if you can get vue Information about 

8、 upgrade npm For the latest version

npm install *** To install or update commands add -g This parameter means to install to global Under the directory is C:\Users\bobin.yang\AppData\Roaming\npm, Otherwise, install to the current directory .

Update separately npm ：

npm install npm -g

Look again npm Version of ：

npm -v

Look again global Module in , It is not empty now , Have read NPM Module .

npm list -global

3、 ... and 、NPM usage

1、 Package installation method

• “ Local installation ” It refers to downloading a module to the current project node_modules subdirectories , Then only in the project directory , To call this module . 
  “ Local installation ” Put the installation package in ./node_modules Next （ function npm The directory where the command is located ）, without node_modules Catalog , Will be executed in the current npm Command directory to generate node_modules Catalog . 
  Can pass require() To introduce locally installed packages .

• “ Global installation ” Put the installation package in /usr/local Next or C:\Users\ user name \AppData\Roaming\npm\node_modules. 
  It can be used directly on the command line , This is the main reason for using global install .

The characteristics of local mode and global mode are as follows ：

• Local mode  
  It can be done by require Use : yes  
  register PATH: no

• Global mode  
  It can be done by require Use : no  
  register PATH: yes

2、 Common commands

NPM There are a lot of orders , for example install and publish, Use npm help All commands can be viewed .

• npm install -g： Install the module

• npm uninstall ： Unloading module

• npm search ： Search module

• npm list： List all modules installed in the current project in a tree structure , And the modules they depend on .

• npm update ： Can put the current directory node_modules Update the module in the subdirectory to the latest version .

• npm cache clear： It can be emptied NPM Local cache , For people who use the same version number to release new version code .

• npm unpublish @： You can unpublish a version of your own code .

• npm help： All commands can be viewed .

• npm help ： You can view the detailed help of a command , for example npm help install.

3、 Use  package.json

When your project depends on multiple packages , Recommended package.json. Its advantages are ：

• It documents the packages that the project depends on

• You can determine the version used by each package

• The construction of a project can be repeated , It's more convenient when people work together

establish package.json file

• Manually create

• perhaps adopt  npm init  Command generation follows the norms of package.json file

4、 Change the global installation directory

Use npm config Command can do this .

npm config set prefix < Catalog >

Or manually in  ~/.npmrc File to configure ：

prefix = /home/yourUsername/npm

After changing the directory, remember to change the system environment variables  PATH Add the path to ：

export PATH=~/npm/bin:$PATH

5、 Save to dependencies during installation

npm install By default, all specified packages are saved to dependencies . Besides , You can use some flags to control where and how to save them ：

• -P, --save-prod: The package will appear in your dependencies . Unless there is -D or -O, Otherwise, this is the default setting .

• -D, --save-dev: The package will appear in your devDependencies in .

• -O, --save-optional: The package will appear in your optionalDependencies in .

• --no-save: Do not save to dependencies .

Four 、 install CNPM

npmmirror China mirror station

$ npm install -g cnpm --registry=https://registry.npmmirror.com

5、 ... and 、 About npm run

1、npm run XXX Is to execute the configuration in package.json Medium scripts Configured value.

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },

npm run serve  What actually works is  vue-cli-service serve

2、 such as ： 
Only in package.json Scripts in configure , Will you be able to run, So not all projects can npm run dev/build. 
To understand what these commands do , I'm going scripts To see what code is executed . 
This is like a shortcut to some commands , You don't have to input long commands every time （ such as unit That line ）.

3、dev and serve The difference between

• npm run dev yes vue-cli2.0 The version uses

• npm run serve  yes vue-cli3.0 The version uses

4、 View all of the current project npm Script command  
In fact, it can also be in package.json Look at scripts What properties are there in the object

npm run

5、dev,build Waiting has no mandatory meaning , We usually ：

• Use dev/serve when , It refers to things related to the development environment . Configured with hot-loader Tools that are convenient for debugging .

• Use build when , Usually refers to and “ compile ” Things related to the production environment , There's nothing else to spare .

• When using dist when , It usually refers to things related to release .

If the npm run Some of these script commands are confused , You can see npm-hooks

6、 ... and 、npm And Yarn

Yarn Published on 2016 year 10 month .

1、 install yarn

npm install -g yarn

2、yarn and npm Command comparison ：

npm install : yarn 
npm install react : yarn add react 
npm uninstall react : yarn remove react 
npm install react --save-dev : yarn add react --dev 
npm update : yarn upgrade 
npm run build : yarn run build

3、yarn The advantages of ：

• Fast . Speed comes from the following two aspects ： 
  1、 Parallel installation ： 
  No matter what npm still Yarn When performing package installation , Will carry out a series of tasks .npm Is to execute each... In a queue package, That is to say, we have to wait until now package After installation , In order to continue with the later installation . and Yarn It's doing all the tasks simultaneously , Improved performance . 
  2、 Offline mode ： 
  If a package has been installed before , use Yarn Get from cache between re installation , No need. npm Then download it from the Internet .

• The installation version is unified ： 
  To prevent pulling different versions ,Yarn There is a lock file (lock file) It records the version number of the module installed exactly . Every time you add a module ,Yarn Will be created （ Or update ）yarn.lock This file . And that's what guarantees , Every time you pull the same project dependency , The same module version is used .npm In fact, there are ways to use the same version of packages, But it needs to be executed by developers npm shrinkwrap command . This command will generate a lock file , In execution npm install When , The lock file will be read first , and Yarn Read yarn.lock There is a truth in the document .npm and Yarn The difference between the two is ,Yarn By default, a lock file like this is generated , and npm To pass the shrinkwrap Command to generate npm-shrinkwrap.json file , Only when this file exists ,packages The version and information will be recorded .

• More concise output ： 
  npm The output information of is rather lengthy . In execution npm install When , The command line will continuously print out all installed dependencies . by comparison ,Yarn Too much simplicity ： By default , Combined with the emoji Print out the necessary information intuitively and directly , It also provides commands for developers to query additional installation information .

• Multi registration source processing ： 
  All dependency packages , No matter how many times it is indirectly referenced by different libraries , When you install this package , Only from one registered source , Or npm Or bower, To prevent confusion and inconsistency .

• Better semantics ： yarn Changed a little bit npm Name of the command , such as yarn add/remove, It feels better than npm The original install/uninstall To be clearer .

Thank you for reading , That's all “npm How to install and use ” Content. , After learning this article , I'm sure you're right npm How to install and use this problem has a deeper understanding , The specific use needs to be verified by practice . This is billion speed cloud , Xiaobian will push you articles with more relevant knowledge points , Welcome to your attention ！