''' Npm tutorial | Modern JS

Npm tutorial

Npm -- short for node package manager -- is a JavaScript package manager. The n in npm is for Node JS. If you aren't familiar with Node JS, take a look at the Node JS tutorial, since the main npm executable npm is included as part of the Node JS installation.

Npm is an integral part of Node JS, because it administers JavaScript packages that are used by the JavaScript engine -- V8 -- that's also part of Node JS. See the Node JS tutorial - figure 6-1 which illustrates the different parts that make up Node JS. On the other hand, JavaScript packages -- which are what npm is designed to manage -- are units of JavaScript code that are not provided by built-in Node JS JavaScript modules or units of JavaScript code that provide coarser grained functionality (e.g. a web server, an MVC framework) developed by an organization or other third party.

In this sense, npm is to Node JS, what Maven or Ant are to Java; what pip is to Python; or what apt-get or rpm are to Linux operating systems. Although strictly speaking you could use npm without Node JS, npm by itself just gathers JavaScript code, so it would then need a JavaScript run-time -- like the V8 JavaScript engine used by Node JS or a browser JavaScript engine -- to run whatever packages it gathers. This is why Node JS and npm always appear to go hand in hand, Node JS provides the environment & run-time -- via V8 -- and npm offers the tooling to work with JavaScript packages in Node JS.

Npm - What can it do for you

Because no one wants to work on something that's already been solved and is readily available, npm is a great time saver at finding solutions to common JavaScript functionalities. For example, if you want to do statistics in JavaScript, there's no point in writing well known statistical functions yourself, when you can find multiple JavaScript statistics packages via npm[1], similarly, if you want to do some image manipulation in JavaScript, you can also find JavaScript image manipulation packages via npm[2].

The list of possible packages that can be found via npm runs in the hundreds of thousands, from the cited cases for statistics and images, to more elaborate options like JavaScript MVC packages found in npm[3] to simpler options like JavaScript pad packages found in npm[4] -- the last of which are popular due to the lack of built-in padding methods in JavaScript..

Npm fulfills many package management functionalities. There's the npm command line tool, that's used to manage packages in a development environment (e.g. search for packages, install packages) and is included as part of the Node JS installation; there's also the npm registry where JavaScript packages are stored and indexed so they're accessible via npm command line tool; plus there's npm Inc. the company that maintains these free services and also offers commercial options, like package access via API, private npm registries and user/group management controls, features that are often needed by larger organizations.

Npm node_modules - The installation directories in the global and local scopes.

When you run npm, the npm executable always defaults to a specific local directory to store and search for packages: node_modules. There can be two kinds of node_modules directories: a global one that belongs to the overall Node JS installation or a local project one that's the present working directory where the npm command is run. Listing 7-1 illustrates how to use the npm list command to obtain a list of installed packages.

Listing 7-1. Npm how to get a list of installed packages with npm list & npm -g list
[user@laptop]$ npm list
└── (empty)

[user@laptop]$ npm -g list
└─┬ npm@6.14.5
  ├── abbrev@1.1.1

Listing 7-1 starts by invoking the npm list under the /www/ directory, since there are no Node JS projects or JavaScript packages that have been installed in this directory, the output is (empty), indicating there are no packages for this local project.

The second example in listing 7-1 uses the -g flag to tell npm to look up installed packages at the global level. In this case, you can see the output for npm -g list starts with /home/admin/.nvm/versions/node/v14.5.0/lib -- indicating the global Node JS installation directory -- followed by a tree of installed packages which in this case are abbreviated.

Note The global directory /home/admin/.nvm/versions/node/v14.5.0/lib in listing 7-1 points to a Node version manager installation directory; this global directory will vary depending how you installed Node JS (e.g. with nvm or not).

Next, let's install a package on a local project directory, which is basically on any directory you please that doesn't have a Node JS project (e.g. /www/). Listing 7-2 illustrates this process.

Listing 7-2. Npm install package and generated files and directory structure
[user@laptop]$ npm install typescript
added 1 package, and audited 2 packages in 2s

found 0 vulnerabilities

[user@laptop]$ npm list
www@ /www
└── typescript@4.2.4

[user@laptop]$ ls
│  ├──AUTHORS.md
│  ├──bin
│  ├──CopyrightNotice.txt
│  ├──lib
│  ├──LICENSE.txt
│  ├──loc
│  ├──package.json
│  ├──README.md
│  └──ThirdPartyNoticeText.txt

Listing 7-2 begins by locally installing the TypeScript package with npm install typescript. Next, the output shows this process was a success with the message: added 1 package, and audited 2 packages in 2s found 0 vulnerabilities.

Because the process in listing 7-2 is for a local project install, this automatically creates a local node_modules directory. Notice in listing 7-2 that after the package installation, if you run the same npm list command from listing 7-1, the output now shows a single line with typescript@4.2.4, indicating the TypeScript package in its 4.2.4 version was installed.

Next, listing 7-2 executes the ls directory utility which outputs a node_modules directory that in itself contains a typescript directory with more directories & files. It's in this last typescript folder, that the source code for the typescript package is located.

Finally, equally important than the node_modules, notice the output of the ls directory utility also shows the files: package.json and package-lock.json. These last two files are always generated (or updated) when a package is installed with npm.

Npm - The package.json file

The package.json file[5] is at the center of all JavaScript projects that use npm.

  1. https://www.npmjs.com/search?q=statistics    

  2. https://www.npmjs.com/search?q=images    

  3. https://www.npmjs.com/search?q=MVC    

  4. https://www.npmjs.com/search?q=pad    

  5. https://docs.npmjs.com/cli/v7/configuring-npm/package-json