Package Managers and NPM

2019-01-20 23:24:06 +0000 - Written by Carl Burks

Recently I found out that I would need to be the speaker for the next JavaScript group. After our last meeting we found out the group had people new to the language. Even package managers were a new concept to them. I’m going to make my next talk on package management.

Here are some points I want to cover:

With Linux Using Ubuntu for this example


Command 'npm' not found, but can be installed with:

sudo apt install npm

Gee installing the package manager with a… PACKAGE MANAGER? What is this, inception?

packagememe.jpg

Well what is this going to do to my computer?


apt-cache depends npm > dependency.txt

Dependencies:

npm
  Depends: nodejs
  Depends: node-abbrev
  Depends: node-ansi
  Depends: node-ansi-color-table
  Depends: node-archy
  Depends: node-block-stream
  Depends: node-fstream
  Depends: node-fstream-ignore
  Depends: node-github-url-from-git
  Depends: node-glob
  Depends: node-graceful-fs
  Depends: node-inherits
  Depends: node-ini
  Depends: node-lockfile
  Depends: node-lru-cache
  Depends: node-minimatch
  Depends: node-mkdirp
  Depends: node-gyp
  Depends: node-nopt
  Depends: node-npmlog
  Depends: node-once
  Depends: node-osenv
  Depends: node-read
  Depends: node-read-package-json
  Depends: node-request
  Depends: node-retry
  Depends: node-rimraf
  Depends: node-semver
  Depends: node-sha
  Depends: node-slide
  Depends: node-tar
  Depends: node-underscore
  Depends: node-which

So if you have not figured it out by now the N in NPM stands for node, the PM stands for package manager.

If you haven’t already installed node, then installing npm will install node at least on most linux distros.

Before we go further let’s check to make sure node is running correctly.

To find out which node you are executing, let’s use the handy which command:

which node

This let’s us find the actual location on the file system that has the executable we are running.

Why do we care?

Well you might have installed node twice, once with the package manager and once some other way. This just gives us the safety net of knowing which file we are using in our environment. To find the node version you would type:

node --version

If you forgot to add the flag then it will open the REPL.

What is a REPL?

Read Evaluate Print Loop

Think Interactive Shell.

.help

will print the help.

.break    Sometimes you get stuck, this gets you out
.clear    Alias for .break
.editor   Enter editor mode
.exit     Exit the repl
.help     Print this help message
.load     Load JS from a file into the REPL session
.save     Save all evaluated commands in this REPL session to a file

A deep dive into this is out of scope for this talk, but it is a really powerful tool.

.exit

will let you exit the shell.

If you run:

npm

You will get something like this:

Usage: npm <command>

where <command> is one of:
    access, add-user, adduser, apihelp, author, bin, bugs, c,
    cache, completion, config, ddp, dedupe, deprecate, dist-tag,
    dist-tags, docs, edit, explore, faq, find, find-dupes, get,
    help, help-search, home, i, info, init, install,
    install-test, issues, it, la, link, list, ll, ln, login,
    logout, ls, outdated, owner, pack, ping, prefix, prune,
    publish, r, rb, rebuild, remove, repo, restart, rm, root,
    run-script, s, se, search, set, show, shrinkwrap, star,
    stars, start, stop, t, tag, team, test, tst, un, uninstall,
    unlink, unpublish, unstar, up, update, upgrade, v, verison,
    version, view, whoami

npm <cmd> -h     quick help on <cmd>
npm -l           display full usage info
npm faq          commonly asked questions
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
    /home/carl/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

That is a lot of commands, but we can maybe touch on a few important ones.

Let’s start with this one:

npm -v
npm --version

This should give you the version, and in this post I’m using:

3.5.2

The npm version is not the same version number as the node version.

Where have all the Packages gone?

Packages can be installed two ways.

Installing globally typically places them under the /usr/local folder.

It might be kind of hard to follow that logic, and writing to the /usr/local takes super user privileges.

See:

carl@computer:~$ echo "bob" > /usr/local/myfile
bash: /usr/local/myfile: Permission denied

What is usr/local for?

See https://refspecs.linuxfoundation.org/FHS_3.0/fhs/ch04s09.html

There are several articles which suggest it is a security risk to install node modules using supLer user privileges, so we can reconfigure npm to install things in lower security level such as a subdirectory in our home folder.

How do we see the current config?

This will spit out the current config.

npm config list

This will filter the previous command to only lines with the prefix variable.

npm config list | grep -i prefix

Just in case you want to use the native tool in npm for that you can use:

npm config get prefix

Let’s make a folder for us to install some node modules:

mkdir ~/.node_global

mkdir will make a directory.

~ is short hand for the user’s home directory.

. prefix for a folder hides it from display most of the time.

Compare

ls ~/

vs

ls ~/ -A

Going into the nuances of Linux is out of scope for this, but that should be enough information for today.

Wait a moment…. What is that .npmrc file?

If you are somewhat new to Linux, then this article might be helpful for explaining “Run command”:

https://en.wikipedia.org/wiki/Run_commands

Let’s take a look at it:

cat ~/.npmrc

Let’s set the value.

npm help config

This will give us the help file so we know how the npm config command works.

Here is the relevant information:

npm config set <key> <value>
npm config set prefix ~/.node_global

The npm exec we installed from the apt package manager is owned by the super user account, so let’s fix that.

Let’s install npm with… NPM!!!!! evil laughter implied

npm install npm --global

This will run the NPM we installed from the apt package manager and it will install it into the new global location, which is owned by the other user. As an added bonus, we are going to get the latest NPM version.

Running which again on NPM will still show the one installed by apt not the one we just installed, so fixing the path is in order.

This is nice but it isn’t sticky. We need to fix our $PATH to always check the new location.

If you are using the default shell, bash, then you can fix the path with:

Which one do you pick?

First you can learn the difference between them:

https://stackoverflow.com/questions/415403/whats-the-difference-between-bashrc-bash-profile-and-environment

export PATH="$HOME/.node_global/bin:$PATH"

Here we are using two variables.

We are using these to reassign the value the $PATH.

We can see the current value by using the echo command.

Once you have picked one and used it, then which should show the one in the new global location.

How do we know what we have installed globally?

npm list --global

We can flatten the list using the depth command.

npm list --global --depth 0

There are all sorts of cool options here; we can find them with…. HELP

npm help list

Want a JSON file?

npm list -g --json true

Let’s try some local stuff

Running:

mkdir demo
cd demo
npm init

Outputs:

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> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (demo) 

Let’s add a package.

How about lodash?

npm install lodash

This will install lodash.

Let’s look at what it did to the package.json.

cat package.json

Hmmm… nothing has changed. What did we forget?

npm install lodash --save

Let’s try something else, how about jquery?

npm search jquery

NOTE: DON’T DOM DERP

DOM Derping is using jQuery in place of a proper UI framework.

How do I know this is the right jquery package?

npm view jquery 

Outputs:

repository: { type: 'git', url: 'git+https://github.com/jquery/jquery.git' },

Now we know it is the real one from the actual repo and not some shady knockoff.

npm install jquery --save

I installed something I don’t want. How can I remove it?

Let’s add a package:

npm install uglify --save-dev

Let’s remove it with

npm uninstall uglify --save-dev

What versions are available?

npm view lodash versions

What version is installed?

npm view lodash version

I want to use a different version

It is installed let’s remove it.

npm remove lodash --save

Let’s get an old version:

npm install lodash@4.16.0 --save

How can I see what packages have new versions?

npm outdated

How can I update a package?

npm update lodash

Let’s double check

npm outdated

All I’ve got is the package.json. How can I install the modules?

npm i

My drives are filling up and my disk usage utility shows .npm is the culprit.

Let’s clean it up:

npm cache clean

Wait, how did you know your disk usage?

du

Okay, that is a command line utility. I’d be more comfortable with a gui.

Whelp Ubuntu bakes that in:

baobab

Hey that is a weird name. How can I remember that?

Just hit the Windows key and type “Disk Usage” and it will pop up. It is little wonder they didn’t use the app name. But what is a baobab?

Adansonia

https://en.wikipedia.org/wiki/Adansonia#/media/File:Adansonia_grandidieri04.jpg

https://commons.wikimedia.org/wiki/File:Adansonia_grandidieri04.jpg

Additional Links: