Environment

NodeJS

NodeJS platform: Platform for developing applications (console application, web server, ...) with JavaScript.

• Install at https://nodejs.org/en/

NPM

NPM: node package management - Like Maven or Gradle for Java. This tool allows us to add/remove javascript libraries. It is installed along with NodeJS.

package.json: configuration file

Install packages

# install gulp-cli library into the project
npm install gulp-cli

# install gulp-cli library into the system
npm install gulp-cli -g 

# install gulp-cli library for dev environment only
npm install gulp-cli --save-dev

Run scripts:

npm can run commands defined in scripts section of package.json

# run a command
npm run [command]

Gulp

Gulp: tool for running tasks

• Install: npm install gulp-cli -g
• Add gulpfile.js for defining tasks:

var gulp = require('gulp');

gulp.task('default', function() {
    // place code for your default task here
});

Babel

Babel transpiles ES6 to ES5 so that they can be run on Browsers

• Install: npm install --save-dev babel-cli babel-preset-env
• Add .babelrc file for defining configuration:

{
  "presets": ["env"]
}

• Install gulp-babel:

npm install --save-dev gulp-babel babel-preset-es2015

Jasmine

Jasmine is a unit test framework

• Installation

Karma

Karma is a tool for running tests on browser

• Installation:

# Install Karma
npm install karma --save-dev
# install plugins
npm install karma-jasmine karma-chrome-launcher karma-firefox-launcher jasmine-core --save-dev
# install karma-cli
npm install -g karma-cli

• Configure Karma: run karma init and answer the question. File karma.conf.js is created which can be updated later.

https://karma-runner.github.io/1.0/config/configuration-file.html

Webstorm

• Enable Node: File > Settings > Languages & Frameworks > Node.js and NPM > Enable
• Set JavaScript version: File > Settings > Languages & Frameworks > JavaScript: JavaScript Language version = ECMAScript 6; Prefer Strict mode
• File watcher: File > Settings > Tools > File Watchers: Add Babel
• Show NPM scripts: Right click on package.json > Show npm scripts
• Show Gulp tasks: Right click on gulpfile.js > Show gulp tasks
• Add intellisense for libraries: File > Settings > Languages & Frameworks > JavaScript > Libraries: Download - Select the library and download.