9. NPM - alexattia/myWiki GitHub Wiki

npm is a Node package manager. It is originally used for the server side. It is a website that references all server-side packages.

npm install mypackage --global : installs mypackage globally.

npm install mypackage : creates a node_modules folder and installs mypackage into it.

uglifyjs example.js -o example.min.js : minify example.js into example.min.js

uglifyjs example.js -o example.min.js :

npm list --global : lists your packages globally installed.

npm uninstall underscore : uninstall locally underscore.

npm install [email protected] : installs version 1.7.0 of underscore.

npm update mypackage : updates mypackage.

###Use

npm init : is gonna ask you some questions. You should answer to them to initialize npm in your repo. It creates a package.json for your app.

Each package that you install has a description of its content. You can find this description in its package.json.

When installing locally a package for your app, you should always run :

 npm install mypackage --save

This installs the package and adds it in "dependencies" in your app's package.json, . Running npm install will install all packages listed in your app's package.json.
If you run npm install mypackage --save --dev , it will install mypackage and add it in "devDependencies" in your app's package.json.

###Properties of package.json The .js file that is the running entry point is stored as a string in the "main" property of package.json.

The "test" property is a script executed with npm test. For example, we can put here the path to a gulp file that will test whatever we want to be tested in our app.

We can also add other properties in the package.json like : "myprop" : "dosomething" and run it through bash command : npm run myprop

The package are listed with their version, as in this "dependencies" :

"dependencies": {
    "angular": "^1.3.16",
    "angular-animate": "^1.3.16",
    "angular-mocks": "^1.3.16",
    "ionic-sdk": "^1.0.0"
  }

In this example, for "angular-animate", the '^' before the version reference says that the last version of 1.3.x will be installed if missing.

###Client side

On the client side, everything runs through his browser, what limits possibilities of complexity.

To avoid having a .html file with dozens of <script>, and since some scripts rely on some others, a similar to server-side's npm has been created : Bower. It is very similar to npm but built for client-side.

Bower's equivalent for package.json is bower.json, and his equivalent for node_modules is bower_components. When Bower installs a package, it has not the same organization as in npm installation : the script is limited to one big file.

Browserify is a tool that bundles all your scripts. We can now organize our code the same way as on server-side.

To bundle index.js into bundle.js, index.js being your entry point :

browserify index.js -o bundle.js

This will recursively bundle up all the required modules starting at main.js into a single file called bundle.js !

Now you can write on your html : <script>bundle.js</script>

You don't need to use Bower anymore since you can install via npm all the libraries you need and bundle them with Browserify. You can use the same libraries for both sides. Therefore, if you need some packages that only exist on bower, write a "bower" property on your package.json, so you can access to bower's dictionnary if the package you are looking for does not exist on npm.