NPM Essentials

September 20, 2015

Intro to NPM

NPM is a command line drive package manager for JavaScript. It’s a great way to easily install tools and include other people’s code in your projects. NPM is used by hundreds of thousands of web developers today. Companies like Google, Facebook, small companies and just about any experienced web developer is using it today. In fact, there were over 123 million package downloads in the last day!!

Browsing & Installing Packages

To browse packages available in NPM you can go their main website npmjs.com There are a few methods of installing NPM package on your computer. They are:

  • installing local packages: this means the package you are installing is local to your project. Example of applications I usually install locally are libraries like: lodash and jQuery.I don’t need these to live on my computer, when I need them I’ll fetch them online since they are small.

  • npm install will download a package for you, but will not add it to your package.json file. This is useful for those times you are just working on a toy project & you don’t plan on sharing or pushing your code up to Github.

  • npm install instal --save-dev somePackageName will down a package for you & will save it to your package.json file. Why is this useful? If you plan on uploading your code to github or sharing it with another person, you don’t need to include your node_modules folder saving often times several or even hundreds of megabytes of space, depending on how big your project is.

  • installing global packages: this means the package you are installing is saved on your computer and you can use the package’s tools directly from the command line (if they are available). Examples of apps that I have installed globally are: Sass, Gulp and http-server. I use these tools from my command line all of the time so they live on my computer. npm install -g nameOfPackage

###Where your Packages Live: To find where your global packages live on Mac you can run the following command: npm list -g --depth=0. When you run this command you should see something like outputted to your terminal:

/usr/local/lib
├── bower@1.4.1
├── generator-test@2.0.2
├── gulp@3.9.0
├── http-server@0.8.5
├── npm@3.3.4
├── recess@1.1.9
├── talentbuddy@0.0.16
└── yo@1.4.8

To list all of your local packages you just need to into our node_modules folder and you’ll see all of the packages in there.

Speeding Up NPM Install

By disabling the npm install progress bar during downloads, you can significantly cut down on download times. I’ve experienced up to two times (50%) faster download times & on average one-third (33%) faster download times.

# command to turn off progress bar
npm set progress=false

Updating NPM to a new version

npm install -g npm

Troubleshooting package installs

npm cache clean paste error into google

###More to come: Later I’d like to come back and explain the confusing parts of NPM like:

Using your NPM packages & reserved keywords

  • npm test, npm start…other stuff you need npm run dosomething

npm shortcuts

  • npm i -D somePackageName equivalent to npm install --save-dev somePackageName

  • npm t is equivalent to npm-test. Test is a reserved keyword.

  • installing multiple packages npm i -D somepackage1 somepackage2 somepackage3 is equivalent to typing the following multiple times:

npm i -D somepackage1 # wait for download...
npm i -D somepackage2 # wait for download...
npm i -D somepackage3 # wait for download...
  • installing packages with similiar names npm i -D gulp-{concat, uglify, rename, sass} is equivalent to:
npm i -D gulp-concat
npm i -D gulp-uglify
npm i -D gulp-rename
npm i -D gulp-sass

NPM can be used as an alternative to using bash scripts

How to require things properly or use packages

Additional resources

Comments

comments powered by Disqus