JavaScript Tooling

Tools

• make us more productive
• take away a mental burden
• evolve with our code

Content

• Package managment - npm
• Code quality - eslint
• Testing - mocha, chai
• Processing - gulp, babel

npm - node package manager

  /* package.json */
  {
    "name": "nodejs-todo",
    "version": "1.0.0",
    "scripts": {
      "test": "mocha",
      "build": "node node_modules/gulp/bin/gulp.js",
      "start": "node server/server.js"
    },
    "author": "Mihail Mikov",
    "devDependencies": {
      "babel-preset-es2015": "^6.14.0",
      "gulp": "^3.9.1"
    },
    "dependencies": {
      "express": "^4.14.0",
      "whatwg-fetch": "^1.0.0"
    }
  }
  

using npm from the console

    #interactivly create a package.json file
    npm init

    #installs dependencies from package.json
    npm install

    #update installed packages
    npm update

    #run scripts
    npm run build
    npm run test

eslint - flexible static code analysis

    #install through npm
    npm install -g eslint
  

    /* .eslintrc */
    {
      "env": {
        "es6": true,
        "browser": true,
        "node": true
      },
      "rules": {
        "semi": "error",
        "eqeqeq": "error",
        "curly": "error",
        "no-undef": "error"
        "no-alert": "error",
        "no-console": "warn",
        "no-unused-vars": "warn",
      }
    }
  

mocha & chai - test runner & framework

    #install through npm
    npm install -g mocha
    npm install --save-dev chai

    #run tests
    mocha tests_folder/
  

  describe('todo-server', () => {
    it('should be an object', () => {
      todos.should.be.an('object');
    });

    it('should have an add method', () => {
      todos.add.should.be.a('function');
    });

    describe('add(item)', () => {
      it('should throw without an item', () => {
        todos.add.should.throw();
      });
    });
  });
  

gulp - automate development tasks

    #install bower globally
    npm install -g gulp
  

  /* gulpFile.js */
  /* get files from multiple locations,
    transpile them with babel,
    concatenate and minify them into one file
    save the result to a specified location */

  gulp.task('build-js', function () {
    return gulp.src(['array/of/paths', 'to/all/*.js'])
      .pipe(babel({ presets: ['es2015']}))
      .pipe(concat('app.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest('client/js/build/'));
  });

Links

• Npm tricks
• Getting started with Eslint
• Testing with mocha and chai
• Getting started with Gulp
• Getting started with the Babel transpiler

Course Schedule: