Get familiar with NPM

NPM?

NPM stands for Node Package Manager. It is the most important tool for working with node applications. NPM is used to fetch third party node modules(JavaScript libraries) that an application might need for development, testing or production. NPM is also used to run tests and tools used in the development process.

Checking current versions:

node -v
npm -v

Update your version of npm:

npm i -g npm@latest

Creating package.json:

The first file that will be read! It’s a JSON file that includes information about your project and has different options. It lists all the dependencies(modules) for our project.

npm init
npm init -y
npm init --yes
npm init -f
npm init --force

help:

There are several ways to get help in npm.
npm COMMAND_NAME -h will give additional information in the console itself. While npm help COMMAND_NAME will open the help in the browser.
Searching for a command with a keyword: npm help-search remove .

npm help install
npm install -h
#list of supported scripts by npm
npm help npm-scripts

Setting defaults

At some point, setting, getting, and removing default data like the author name, license, email … will be needed. https://docs.npmjs.com/misc/config
npm set ... is short of npm config set .
All the config can be found in the .npmrc folder of the user directory.

npm set init-author-name 'SeifAllah'
npm get init-author-url 
npm config delete init-author-email

Installing packages:

Instead of typing npm install you can simply use the shorthandnpm i.
This will add it to your local project.

npm install lodash OR
npm i lodash

If you ever faced a message “found x vulnerabilities” so all you need to do is to run the below command and it will updates some of your packages:

npm audit fix

You can install a package globally or locally for you your current project from different sources, as you can specify the dependency type:

Installing globally:

npm install -g nodemon OR
npm install --global nodemon

The npm root -g command will tell you where that exact global installation location is on your machine.

Installing with a specific version:

npm i lodash@latest OR
npm i lodash@4.17.4

Installing from a version control host(Github)

npm i https://github.com/sindresorhus/gulp-debug OR
npm i sindresorhus/gulp-debug

Installing a package and save it as a dependency:

You can save the new packages as a dev, production dependency.
By default, running npm install without flags will add the package as a dependency in your package.json file. The devDependencies packages won’t be shipped with your code.

#save as dependency 
npm i express -S
npm i express --save
#install without any prefix(no carrot or Tilda,the package version #won't be changed when npm update is executed
npm i express -save --save-exact
npm i express -P
npm i express --save-prod
#save as devDependency
npm i grunt -D
npm i grunt --save-dev
##install without save to package.json##
npm i express --no-save

Installing multiple packages that have the same prefix:

#long way to install packages
npm i webpack
npm i webpack-cli
npm i webpack-dev-server
#shorter way to write them in one line
npm i webpack webpack-cli webpack-dev-server
#simple and cleaner way
npm i webpack webpack{-cli,-dev-server}

Listing installed packages:

npm ls is short for npm list

#list all installed packages as well as all of their dependencies
npm ls 
#list only direct dependencies of current project
npm ls --depth=0
#list of all of your globally installed packages
npm ls -g — depth 0 OR
#list dependency tree which involves the package
npm ls package_name
#show description of each package(project url, description...)
npm list --depth 0 --long true // tree view 
npm list --depth 0 --json true //json format
#show dev/prod dependecies
npm list --depth 0 --prod true
npm list --depth 0 --dev true

Listing outdated packages

npm outdated

Clearing the cache

#force cleaning the cache
npm cache clean -f

Uninstalling/ Removing packages

npm uninstall express OR
npm rm express OR
npm un express OR
npm r express
npm rm express --no-save (remove from node_modules but keep it in package.json)

If you came across the repository and the homepage entries in the package.json file then you can run:

...
"author": "Seif Alla BA",
"main": "dist/index.js",
"url": "  https://github.com/seifallah",
"repository": {
  "type": "git",
  "url": "git+https://github.com/seifallah/react-unstated.git"
},
"keywords": ["npm", "react"],
"license": "MIT",
"homepage": "https://baroradeco.blogspot.com",
...

then you can run one of these commands.

#repo will open the url of the repo
npm repo
npm home
npm docs

Creating/removing a virtual link to a package:

run npm link to create a virtual link to your local package, simulating a npm install.More details can be found here.

#make the package linkable
#inside the package:
npm link
#go to the application and link to the package:
npm link package_name
#remove the link between the packages:
npm unlink package_name

creating a .tgz file

If you faced problems with npm link, there’s npm pack This command creates a .tgz file exactly the way it would if you were going to publish the package to npm repo. It pulls the name and version from package.json, resulting in a file like package-name-0.0.0.tgz. This can be copied, uploaded, or sent to a coworker. It's exactly the file that would be uploaded to npm if you published it.

#prepare the package to be packed:
~/workspace/package-name $ npm pack
#install the package into your application specifying the full path
~/workspace/some-application $ npm install home/package-name-0.0.0.tgz

List available scripts in package.json:

cat package.json (show package.json file) OR 
npm run

Running scripts/tests:

"scripts": {
"styleguide": "styleguidist server",
"start": "npm-run-all -p start-js watch:less",
"prebuild": "  ./build",
"build": "react-scripts-ts build",
"buildTest": "react-scripts-ts --max_old_space_size=4096 build",
"buildRelease": "react-scripts-ts build",
"postbuild": " styleguide && ‘echo NPM is awesome!’",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject",
"tslint": "tslint -p ./tsconfig.json -c ./tslint.json -t verbose",
"go_parallel": "npm-run-all --parallel script1 script2",
"go_serial": "npm-run-all --serial script1 script2",
...
}

To run one of the scripts above, we need to type:

npm start OR
npm run buildRelease OR
node filename OR
nodemon filename 
#run scripts in parallel or serial mode:
npm run go_parallel
#run a test script:
npm run tests OR
npm run test OR
npm run t

If you create your own custom NPM scripts, it must be preceded by either run-script or run for them to be executed correctly.

npm run hello

Hooks scripts (pre, post):

#any script can be pre or post fixed:
npm run prebuild OR
npm run postbuild

In order to prevent the default NPM logs from outputting to the console when you execute a script

#tslint is our scriptname
npm run --silent tslint

Chaining NPM scripts:

You can chain multiple commands using &&.

"scripts": {
"postbuild": " styleguide && ‘echo NPM is awesome!’",
}

Running locally-installed command:

#from the commadline:./node_modules/.bin/executable_cmd
./node_modules/.bin/mocha

Searching for a package

npm search webpack server OR 
npm s webpack server

Getting packages information

npm view webpack OR
npm v webpack 
npm view webpack version OR
#All versions of specific package:
npm view webpack versions

List NPM environment variables in PATH:

npm run env | grep npm_

Most of the variables will be preceded by npm_config_****.

Using NPM environment /custom variable in package.json:

"scripts": {  
"build": "echo  $npm_config_fetch_retry_maxtimeout"
}

Connect to npmjs.com account:

If you are getting ready to publish your package online, you need to connect to npmjs.com from your machine.
To learn more about publishing a local package. Check this concise article and this.

npm adduser OR
npm login

if you forgot your username, you can run:

npm whoami

ready to publish your new scoped package(@username/package_name) for the first time.

npm publish --access=public 

To publish an update, just remove the flag access=public.

npm publish

Synchronize package version with GitHub tag:
After publishing to npm, git tag PACKAGE-VERSION then git push --tags . This will be marked as released in the Github release tab.

Version & meaning (major.minor.patch)

Using semver for versioning and you want to update the version before a new release: you can use one of (major, minor or patch).

"webpack": "^4.41.2",
 "lodash": "~4.17.15"

If the version of the package has a carrot symbol, it means it will accept only minor or patch changes.

If the version of the package has a Tilda symbol, it means it will accept only patch changes.

Alpha > beta > rc > stable(1.0.0)
*rc: release candidate.

npm version major|minor|patch
#npm version will increment by one the chosen type.
npm version patch
#to publish the new changes
npm publish

In case of updating a home-made package,git version … will add a git commit —m 'NEW-PACKAGE-VERSION' automatically and execute git tag NEW-PACKAGE-VERSION . The user then needs to only dogit push --tags followed by a git push and finally npm pusblish to push the last changes to the npm registry.

Package-lock explained:

when you upload a particular project you basically delete the node_modules folder and uploaded the project into the GitHub.

When a third party developer pulls at the project and installs the required dependencies using npm install. It will basically look into the package-lock file and install the exact version in order to avoid the conflicts.

A package-lock file will be updated when you run `npm update` or add a new package.

Links

8 npm Tricks You Can Use to Impress Your Colleagues

Introduction to NPM Scripts

How to make a beautiful, tiny npm package and publish it

How to publish a npm package in four steps using Webpack and Babel

Testing npm packages before publishing

NVM & NPM

Complex Web Applications — Part 1

and finally npmjs documentation.

Thanks.