Node.js
Node.js is really javascript on the server side. An install can be fetched on this site Node. To run a node program, simple code something up using javascript, for example:
app.js
console.log('hello node');
And run it like:
node app.js
npm
npm
stands for node package manager and is just that, a package manager that allows you to add libraries to your project.
By running the following command you will initiate a serious of questions that will ultimately end up in a file called package.json
npm init
package.json
What you get from running npm init
is this
{
"name": "name of package",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
name
, version
, description
is pretty self explanatory although we will come back to version
later.
scripts
however is quite interesting as it allows us to manage our project. It lets us add scripts that will do things like:
- bundle up the app
- test it
- start the app
lets add a scripts command so you get the idea.
"scripts" : {
"start" : "echo 'app started'"
}
this can be run be doing either
npm start
or
npm run start
This will echo out app started
. Normally you would have to type npm run <command>
but there are keywords which will allow you to omit the run
, start
is one of them. Lets add another one:
"scripts" : {
"log" : "echo 'logging'"
}
Because log
is not a special keyword we will have to run it like so:
npm run log
And as expected it echoes out logging
.
Example
Let's create a scripts
that somewhat resembles reality.
build
"scripts" : {
"build" : "browserify main.js -o bundle.js"
}
This will bundle the files up into something more usable.
Usually you want this in dev
and prod
version with the dev
containing source maps
and the prod
being compressed and ready for use. So for that reason we create a build-dev
and build-prod
like so:
"build-dev" : "browserify main.js --debug -o bundle.js",
"build-prod" : "browserify main.js -o bundle.js"
build-dev
bundles and includes source maps and build-prod
does not contain source maps. In a proper build you would of course do a lot more like bundling assets, compressing things etc.
Its also customary to create a start
command, usually that one spins up a browser, if developing for the web:
"start" : "http-server -p 5000"
There are of course more things than this but this should give you an idea, it is worth looking at larger projects on github and their package.json
to see how they set things up.
adding/maintaining packages
adding
All calls to npm install <something>
will place the downloaded library in the node_modules
directory of your project. The packages are being pulled down from npmjs
normal install
npm install <package name>
Example :
npm install lodash
This places lodash
in node_module
like so:
node_modules/lodash
normal install, with save
npm install <package name> --save
This also saves your downloaded library as an entry in package.json
"dependencies": {
"lodash": "^4.17.4"
}
normal install, with save to devDependencies
npm install <package name> --save-dev
This places an entry in the devDependencies
of package.json
like so:
"devDependencies": {
"jquery": "^3.2.1"
}
There is a semantic difference to saving things to dependencies
or devDependencies
. The differences is that the former is for dependencies that is needed for your project to run like lodash
, jquery
, angularjs
etc. The latter is meant for things needed to assert or compile your project like testing frameworks or gulp
or similar.
adding a specific version If you want to install a specific version, you can. You might however want to see what versions there are available.
npm view <package> versions
Once you found your version you can just install it with the following command:
npm install <package>@<version>
updating
Updating a package that you pulled down through npm install <package name>
is as easy as doing:
npm update <package name>
but with one big caveat, it really depends on what you listed as version.
Let's have a look at the entry added to package.json
when you did npm install
"dependencies": {
"lodash": "^4.17.4"
}
Depending on whats after the :
different things will happen when you run np m install
First we need to know what the version numbers mean, they should be read as
[major].[minor].[patch]. major
means expect a lot to change, methods changing signature or are completely removed, i.e could be totally incompatable with another major
version. minor
should mean that features can be added or the underlying implementation has been changed but method signatures should be the same. Lastly patch
is bug fixes.
patch update
"jquery" : "~3.1.0"
will update it to 3.1.1, which is the latest patch version minor update
"jquery" : "^3.1.0"
will update it to latest minor version which is 3.2.1
So far I've been talking about the most important symbols and scenarios for dealing with packages that you download yourself. Its important to get this right otherwise you might end up with a bunch of packages that after update isn't compatible anymore. There are tons more information on this topics but this is the basics.
removing
npm uninstall <package name>
will remove it from node_modules
and adding --save
and --save-dev
will remove from entry in package.json
using a library
Ok so we installed some packages, now what? To use them you use the following syntax:
var lodash = require('lodash')
This will automatically look in the node_modules
directory for your package.
You can tell the difference from packages downloaded from the npm and local modules by how the require
look like.
Local modules will have have a relative path looking something like this
var lib = require('./my-lib')
and your npm package will be identified by the name only in the require
var lodash = ('lodash') // from npm
var mylib = require('./mylib') // local file
build your own npm library
TODO