How it feels to learn JavaScript
  • How it feels to learn JS
  • Table of Contents
  • Introduction
    • Is EcmaScript is JavaScript? TC39
  • JS Basics
    • Basic Concepts
    • Objects
    • Function vs Method
      • Anonymous Function
    • Scopes and keyword "this"
    • Prototypical
  • Dependencies / Packages Management
    • Chapter: Dependencies / Package Management
    • NPM
    • Bower
  • JS-Engines
    • Browser vs Node.js
  • Super / Sub - Lang
    • Chapter: Super / Sub Languages
    • TypeScript
      • Architectural Overview
  • Framework / Library
    • Angular
      • Bootstrapping
      • Change Detection
      • Singleton Services
    • React
  • Paradigms
    • Reactive
      • Rx.js
  • Web API's
    • Web Sockets
    • Web Worker
    • Service Worker
  • Testing
    • Testing Essentials
  • Patterns
    • IIFE (Immediately Invoked Function Expression)
Powered by GitBook
On this page
  1. Dependencies / Packages Management

NPM

Node Package Manager

PreviousChapter: Dependencies / Package ManagementNextBower

Last updated 6 years ago

it is originated as a open source project for mange/package Node.js modules in 2009. It is a public registry allow to publish packages, download and provides a command line utility to interact with the registry & uses a standard JSON file named as 'package.json' to manage metadata for a project.

You can initialize a project with npm utility something simliar like 'git init' uitlity.

npm init

At a bare minimum, apackage.jsonmust have:

  • "name"

    • all lowercase

    • one word, no spaces

    • dashes and underscores allowed

  • "version"

    • in the form of x.x.x

    • follows

You can install dependencies in an existing project withnpm install.Refer any module in your javascript file with keyword require.

require('<ModuleName>');

You can referor detailed usage. Here, we are going to talk about a general aspect around it.

If you are doing server-side development or any application which is based on the node.js platform. You just need npm as base utility for manage/package dependencies, execute build, test, serve scripts.

Things get confusing when we are going for frontend development. Remember term require is not a recognizable by browser javascript engine. We need a way to use same packaging system for our frontend application as well.

npm is a base utility and required for other tools like browserify, bower, grunt, gulp, webpack etc.

comes to the rescue and converts your require('module') to an optimize code which is recognizable by your browser. Bascially it scan your code for keyword require and does static analysis for building a code abstract syntax tree. Few other operations are required for better optimization like:

  • Minify/Uglify

  • Loadash

Minify vs Uglify

Minify: Compression for JS/CSS file by removing whitespace and removing some amout of reduntant code standard code.

Uglify: As name suggest makes your code look ugily but optimized. it will not only compress your code, but optimize variable naming, conditions, discard unused variables/functions. etc. It is not going to change the actual logic or flow of the code but makes it more readable for javascript parser and less readable for humans.

If you don't want to deep dive into complexity of defining your javascript libaries as a node modules and use them in the manner similar to defining script tags. You can pick other solutions like bower/yarn/webpack. Although bower is going away.

Tips

To start Debug session with npm:

DEBUG=* npm cmd

set DEBUG=* npm cmd (for windows)

semver spec
npm documentation f
browserify