NPM — Ninja Programmer Mindset? 🥷

People fascinated by NPM (1,460 × 730)

Node Package Manager

Lets break it down:

Node — server-side Javascript runtime environment that will execute Javascript outside a web browser.

Package — A bunch of Javascript models exported together.
A package can be something like moment.js; a helper library that parses, validates and manipulates date and time in Javascript.

Manager — Before NPM, the only way to manage packages on your project was using the <script> tag and the CDN URL. ( the directory where the package can be downloaded from )

Here are a few issues with the <script>and CDNURL approach:

1. Every time the version of the package changes, we have to update the version manually
   Ex: I deploy a new version to my library, I have to manually update it from 2.1.4→ 2.1.5 which can become messy when there are a few packages in your project.
2. The order of import matters
   If moment.js depends on react.js but moment.js is imported first, then you wont be able to to run your project. Its easy to manage with a few packages, but with 10+ packages (which most big size project are), it can become hectic.

Hence: We shall use npm ✅

Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe.
- https://www.npmjs.com/

Usage

Install Node.js which comes with the npm CLI:

npm -v # My installed version: 18.9.0

Provide the name of the package to the following command on your terminal:

npm i moment # npm install {nameOfPackage}

By providing the name of the package, (ex: moment ), NPM will know where the package is stored on the CDN. It will use moment as the key to search through its online database (called the npm registry) which has private and public packages.

You might want to add the -g flag when installing a package that you want your computer to use in general. A good example for this use case is webpack.

Node modules

Whenever you install a package, the source code for that package will be put inside of the node_modules directory. When you use the package in the project, your app will look inside of node_modules for the source code.

Pacakge.json

Mind you, because node_modules is SUPER heavy, we usually don’t put it to our git repo. Instead we use track our packages with package.json which contains a list of our used packages and their versions. It also contains other meta data (author name, description, scripts…)

Here is an ex:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://laramo.github.io/my-app",
  "scripts": {
    "build": "react-scripts build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "eject": "react-scripts eject",
    "lint": "eslint --cache \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint:fix": "eslint --cache --fix \"src/**/*.{js,jsx,ts,tsx}\"",
    "start": "react-scripts start"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "dependencies": {
    "animate.css": "^4.1.1",
    "eslint": "^8.30.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard-with-typescript": "^24.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.31.11",
    "gh-pages": "^3.2.3",
    "i18next": "^21.6.7",
    "moment": "^2.29.4",
    "prettier": "^2.8.1",
    "react": "^17.0.2",
    "react-animate-on-scroll": "^2.1.5",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.15.3",
    "react-icons": "^4.7.1",
    "react-pro-sidebar": "^1.0.0-alpha.9",
    "react-scripts": "5.0.0",
    "react-switch": "^6.0.0",
    "react-toastify": "^9.1.1",
    "sass": "^1.49.0",
    "styled-components": "^5.3.3",
    "three": "^0.150.0",
    "typescript": "^4.9.4",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.21",
    "@types/react": "^17.0.38",
    "@types/react-animate-on-scroll": "^2.1.5",
    "@types/react-dom": "^17.0.11",
    "@types/styled-components": "^5.1.21",
    "@types/three": "^0.149.0",
    "@typescript-eslint/eslint-plugin": "^5.47.1"
  }
}

Let’s analysis it:

• Dependencies → packages that your application needs to run
• devDependencies → what your app needs during development ( loaders, minifiers, testing frameworks… ): npm i {packageName} --dev

List of NPM commands

• npm init — will initialize a package.json file in your application.
• npm install {packageName} — will populate your package.json will packages.
  → you can use npm i for short.
  → there are a few flags like -g to install a package globally or --dev to install a devDependency
• npm uninstall — conversely, you can remove a package
• npm search — search for a package. Will return any matches from the package’s name , description and keywords

• npm docs → will open the documentation page in a new web browser for the package specified.
  Ex: npm docs moment will open https://momentjs.com/

🗒️ Note:
Before we end, in this tutorial I used moment.js as a package example. It has been discontinued as of 2020. As of 2021, JS created similar built-in behavior with the Intl object. I would recommend, in this case, to use the built-in capabilities instead of relying on a library.

Thats all,

Until next time,
Lara Mo