Introduction to NPM

A short lunch-and-learn presentation I did for my colleagues at Cardinal Solutions.

Transcript

1. Introduction to npm Node Package Manager
2. What npm does It installs packages (aka “dependencies”) into sub-folders in a folder called “node_modules” somewhere. That somewhere can be global, if you use the -g flag. Otherwise, it’s in a node_modules folder in the current directory.
3. Why would I want to do this? You could go to the website of each code library you want, download an archive, unzip, find the particular file you need, and keep each of those updated manually. - or - You could use a package manager, like npm. I’ve done it both ways, and npm is way easier.
4. Where the code comes from 1. The npm registry (https://www.npmjs.com/) 2. A Git URL, e.g., https://github.com/vjwilson/yeoman-generator-ngmodule.git
5. First things first, if you have Node, you have npm vwilson@CSGCHAMAC26: ~ $ node -v v4.3.0 vwilson@CSGCHAMAC26: ~ $ npm -v 3.8.8
6. Before you start installing packages... If you are on a Mac, you don’t need to use sudo with npm. • https://docs.npmjs.com/getting-started/fixing-npm-permissions • https://johnpapa.net/how-to-use-npm-global-without-sudo-on-osx/ • https://github.com/creationix/nvm
7. Don’t install packages globally (unless you have to) Many packages (grunt, gulp, browserify, etc.) want you to install them globally, just so they will be in your path. echo export PATH="./node_modules/.bin/:\$PATH" >> ~/. bash_profile The only type of package that usually needs to be installed globally are CLI utilities, like Yeoman. https://www.sitepoint.com/solve-global-npm-module- dependency-problem/
8. To start using npm in a project 1. Create a folder for your project (e.g., /thefacebook/) 2. Inside that folder, run: npm init 3. Answer the questions npm asks you. 4. You now have a file, package.json, ready to store your list of packages. Bonus: package.json is also a very technical “Readme” file
9. Example of npm init $ npm init ... name: (thefacebook) version: (1.0.0) 0.0.1 description: Totally original social networking site, with lots of permissions entry point: (index.js) app.js test command: git repository: https://github.com/vjwilson/thefacebook keywords: social author: Van J. Wilson license: (ISC) MIT
10. Example of npm init (continued) About to write to /Users/vwilson/Projects/personal/node/thefacebook/package.json: { "name": "thefacebook", "version": "0.0.1", "description": "Totally original social networking site, with lots of permissions", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/vjwilson/thefacebook.git" }, "keywords": [ "social" ], "author": "Van J. Wilson", "license": "MIT", "bugs": { "url": "https://github.com/vjwilson/thefacebook/issues" }, "homepage": "https://github.com/vjwilson/thefacebook#readme" }
11. The workhorse: npm install Now that we have a package.json file, we can install either of two types of dependencies • Production dependencies - used in production and locally • Development dependencies - only available locally Production dependences will be listed in an array under the key of “dependences” in the package.json file. Development dependencies will be listed in an array under the key of “devDependences”. • Use the --save (or -S) flag to make something a production dependency. • Use the --save-dev (or -D) flag to make something a development-only dependency. If you absolutely have to, use the --global (or -g) flag to install the package in your global node_modules folder, but it will not be attached to your project in any way. NEVER run npm install without one of those three flags. It will install the package in the current folder’s node_modules folder, but without any record that it was installed.
12. Examples: npm install $ npm install --save express ... (information, warning or errors, and a list of the dependency tree for this dependency) $ npm install --save-dev gulp ... (information, warning or errors, and a list of the dependency tree for this dependency)
13. Examples: npm install (continued) In your package.json file, you will now have "dependencies": { "express": "^4.13.4" }, "devDependencies": { "gulp": "^3.9.1" }
14. .gitignore, or Don’t check in your node_modules folder! When you use a version control system, exclude the node_modules folder that npm install creates from version control. For example, include this line in your .gitignore file: node_modules/ (* There are times when you do want to lock down your dependencies by checking them in, but if you have to ask, then you don’t nee that yet.)
15. The other side of npm install “Wait, if I don’t check in my dependencies, then how can I share my project so that other people so that they have those dependencies?” When other people pull down your code from version control, they do get the package.json file, which lists those dependencies and devDependencies. Running npm install inside a folder with a package.json file will install any dependencies listed into a node_modules sub-folder in that folder, unless they are already installed.
16. But wait… there’s more! There are a lot of extra features of the package.json file that we haven’t even mentioned. • Data used if you want to publish your project as an npm package. • Shortcuts/macros saved as “npm scripts” (but npm is NOT a build tool) Also, if you are going to be doing a lot with node, I highly recommend install nvm, which will let you manage multiple versions of node, with associated versions of npm and global modules, on one machine. For Windows, there are nvm-windows or nodist Speaking of Windows, npm is now integrated into Visual Studio, http://webtooling.visualstudio. com/package-managers/npm/