NPM

Contents
Introduction
Install
First Steps
Packet Installation
Install Specific Version
Common Errors
Related Articles

Introduction

Installation

It is part of Nodejs, so it does not require a separate installation.

Read about installing Nodejs in the article Install Nodejs

Check Version

You can check the versions of installed Nodejs, npm and npx with the following commands

$ node --version

v10.16.3

$ npm --version

6.9.0

$ npx --version

6.9.0

First Steps

It is logical to start by creating a directory for a new project.

I will be working on the website HeiHei.ru therefore, I will call the folder heihei

mkdir heihei

Go to the created directory

cd heihei

Make sure that the new folder is empty

ls

Now we will execute the most important command for future development

$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my-project)

npm will offer to fill in the information about the project. The following fields will appear:

name: (heihei)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

You can fill in all the fields, but for simplicity, for now, just press Enter several times in a row

If you first bind the directory to a remote repository GIT then npm will see it during initialization and fill in the git repository item itself.

Perhaps this is the easiest and right way if you plan to continue working with GIT.

A similar message should appear at the end. Press Enter again.

About to write to C:\Users\ao\Desktop\Sites\heihei\package.json:

{
"name": "heihei",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}


Is this OK? (yes)

Let's check what appeared in our folder after initialization

ls

package.json

package.json this is a file that will store a list of installed packages and their versions.

Immediately after initialization, it contains only information about the project

{
"name": "heihei",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Installation пакетов

Установим первый пакет. Начнём с jquery.

npm install jquery

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN heihei@1.0.0 No description
npm WARN heihei@1.0.0 No repository field.

+ jquery@3.4.1
added 1 package from 1 contributor and audited 1 package in 1.227s
found 0 vulnerabilities

In versions of NPM lower than 5.0.0, when installing packages, there was no automatic writing to the package file.json

In order to update the package.json had to be installed with the --save option

For example: npm install jquery --save

In new versions, this happens automatically, but --save is still used to specify exactly how to install the package.

A popular option is --save-dev which allows you to make an installation, so to speak, for "development and testing";

I will analyze an example of such an installation in the article Gulp

You can read more здесь, docs.npmjs.com/cli/install

Check what was created in our folder after installing the first package

ls

node_modules/ package.json package-lock.json

The package-lock.json file appeared in the fifth version of NPM as an additional means of compatibility control.

Especially for cases when the package file.the json was copied and after a while initialization was performed with it (npm init), but during this time some of the packages managed to get a new version.

You can read more about this here, here, here

You can read about version control on the website semver.org

Let's look at the contents of the package-lock file.json

{
"name": "heihei",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"jquery": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
"integrity":
"sha512-36+XXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXX
XXXXXXXXXXXXGoB
d+tHdrBMiyjGQs0
Hxs/MLZTu/eHNJJuWPw==" }
}
}

Let's see what is in the node_modules folder. After installing jquery, it would be logical to see the jquery folder there

$ ls node_modules/

jquery/

In this case, everything is obvious, but a huge number of packages will create not one folder, but several at once.

Older versions of npm always created one folder and placed all dependencies there.

Newer versions of npm retain dependencies in node_modules.

Let's see what's in the folder node_modules/jquery.

$ ls node_modules/jquery/

AUTHORS.txt bower.json dist/ external/ LICENSE.txt package.json README.md src/

As you can see, jquery has its own package file.json at this stage, it is much more substantial than our root package.json but it's not for long.

Install Specific Version

Let's install another package and talk about its possible versions

$ npm install normalize.css

If package.json does not contain a record about normalize.css, then the latest stable version will be installed.

If in package.the json version is specified, it will be installed.

If you want to install a specific version, specify it in the package.json or enter @version number during installation.

For example npm install normalize.css@8.0.1

npm WARN heihei@1.0.0 No description
npm WARN heihei@1.0.0 No repository field.

+ normalize.css@8.0.1
added 1 package and audited 2 packages in 0.523s
found 0 vulnerabilities

$ vi package.json

{
"name": "heihei",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.4.1",
"normalize.css": "^8.0.1"
}
}

There are a lot of npm packages. To study them all - register on the website www.npmjs.com

Convenience of the package file.json is that if you want to copy Your project - it is enough to transfer the package file.json and execute the npm init command.

All packages listed in package.json will be installed with the specified versions.

Errors

Related Articles
Gulp
Concat multiple css to one
Send files via ftp with Gulp
Gulp series
Process only changed files with gulp.watch().on('change')
Copy Directory Gulp
Video Tutorials
JavaScript
NodeJS
NPM
Web
Banner Image

Search on this site

Subscribe to @aofeed channel for updates

Visit Channel

@aofeed

Feedbak and Questions in Telegram

@aofeedchat