Setup JavaScript project environment with Webpack, ESLint, Babel & git

author-avatar
Paul Shan Wed Mar 01 2017

Apart from the core architecture of your project, one thing that is really important is to setting up the proper environment of the project. Your different projects could be using different frameworks or libraries of JavaScript, but it’s always better to use a single environment for all your projects across teams.

What we’re going to do here

  • Module management with webpack.
  • Dev & production build.
  • Bunding & minifications.
  • Handles ES6 with babel.
  • Linting with ESLint.
  • Precommit hook to restrict developers to commit if linting or building fails.

You can clone the git repo of mine to help yourself understanding the tutorial. You can even fork your project from that repo.

Create project

So let’s see how to start setting up a JavaScript project from scratch. First create a repository in github (you can use any other git hosting site or even bare git of your machine) and clone it to your local machine. Let’s assume the name of the project is JS-StarterKit.

Now when all your cloning etc are done; navigate to the project folder from your terminal (command prompt in case of windows).
Using npm scaffold a project. All you need to do is to run the command npm init and answer the questions which it will ask and you will get the package.json file in the directory. Hope you know about node js and npm. If you don’t you can google about them.

Now you can create two more files; one is index.html and another is index.js in a new folder called app. As this is a JavaScript application, so all our application logic related code will go inside the app folder. If your application is not a front-end one, you can skip the creation of index.html. But if it’s a front-end one, make sure you add some html stuffs in that html file with attaching a bundle.js script tag inside it. We (actually webpack) will create the bundle.js file.
For now, your html & js file will look like the following.

index.html



  
    
    JS-StarterKit by VoidCanvas
  
  
      

This is the app

index.js

console.log("i am index.js file");

Setting up webpack

Webpack is probably the best module loader of today with huge flexibility. You can load different modules, process them separately, bundle, minification and lot of other stuffs.
You need to install two packages. webpack and webpack-dev-server. The second one is for auto check file changes & serve the files.

npm install webpack --save-dev
npm install webpack-dev-server --save-dev

We’ve used the --save-dev flag to mark these packages as devDependency in package.json file. Install webpack globally too with npm i -g webpack to be able to run the webpack command from your terminal.

Now that webpack is installed we can create a file named webpack.config.js to configure our webpack. So create that file in the root folder and add the following code in it.

module.exports={
    entry: "./app/index.js",
    output: {
        filename: "bundle.js"
    }
}

The above config will tell webpack to start scanning from index.js file and bundle everything to bundle.js file.

You can run the command webpack and see how things are bundled to a new file bundle.js and also test the index.html file in the browser to find that the console.log statement os index.js is being printed in the console.

This is just a short intro of webpack, but you can google more about it to gather in depth knowledge.

Install ESLint

ESLint is one of the best linters for JavaScript. You can configure it just the way you want. If you are not familiar with it yet, you can check the eslint tutorial.

To setup ESLint with our webpack, you should install the following packages.

npm install eslint --save-dev
npm install eslint-loader --save-dev

You need to configure your eslint running the command eslint --init from your root directory. It will ask you few questions and answering them properly will create an .eslintrc.json file. Instead of running the eslint --init command you can also use the following json directly after creating .eslintrc.json.

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-console": 0
    }
}

Now that eslint is installed and configured, time to use it in our webpack config file. The webpack.config.js will look like the following now.

module.exports={
    entry: "./app/index.js",
    output: {
        filename: "bundle.js"
    },
    module:{
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
            }
        ]
    }
};

Now, running the command webpack will check for linting error first and then will build anything.

Install Babel

As all browsers do not support ES6 or beyond fully, you need to use any transpiler in your project (if it’s client side). We’re using babel, one of the popular transpilers. Install the packages related to it with the commands below.

npm install babel --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev 
npm install babel-preset-es2015 --save-dev

Change your webpack.config.js as following to convert the ES6 codes in ES5 with babel.

module.exports={
    entry: "./app/index.js",
    output: {
        filename: "bundle.js"
    },
    module:{
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015"]
                }
            }
        ]
    }
};

Now you can use ES6 codes in your JavaScript files inside the app folder. All of them will be converted to ES5 by babel before webpack bundles them to bundle.js file.

Pre Commit hook

Just making the rules are not enough; you need to force the developers to follow those cause developers often forget manual works. We will add a check in git pre-commit to prevent the developer to commit & push anything that is failed by ESLint.

npm install pre-commit --save-dev

You need to change few configs in package.json to make this work. Below are the snippet of that part.

  "scripts": {
    "start": "webpack-dev-server",
    "test": "webpack"
  },
  "pre-commit": [
    "test"
  ]

It will trigger the npm test command, which is webpackjust at the time anyone tries to commit something and will fail the commit if the webpack command failed for any reason (suppose ESLing error).

Final package json & webpack config

I’ve inserted few more npm scripts in the package.json file and now it looks as the following.

{
  "name": "js-starterkit",
  "version": "0.0.0",
  "description": "A starter kit for javascript projects with bundling, linting, githooks and many more",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config prod.webpack.config.js -p",
    "postbuild": "cp index.html ./dist/index.html",
    "start": "webpack-dev-server",
    "test": "webpack"
  },
  "pre-commit": [
    "test"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/metalshan/js-starterkit.git"
  },
  "author": "Paul Shan ",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/metalshan/js-starterkit/issues"
  },
  "homepage": "https://github.com/metalshan/js-starterkit#readme",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "eslint": "^3.16.1",
    "eslint-loader": "^1.6.3",
    "eslint-plugin-react": "^6.10.0",
    "pre-commit": "^1.2.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

So apart from npm start we also have an npm run build now which will bundle and minify the bundle.js inside a folder called dist. You can see I have passed a config file as prod.webpack.config.js which will hold the production build related configurations. Ass that new file in your root and use the code below.

var devConfig = require("./webpack.config.js");

var prodConfig = devConfig;

prodConfig.output = {
    path: "dist",
    filename: "bundle.js"
};

module.exports = prodConfig;

The final project

The entire base project which we tried to build by this tutorial is available on this git repo. You can directly clone it in your desktop and check how its working. Better to fork it so that you can test all pre-commit etc properly.

Scaffolding web appwebpack

Written By

Paul Shan

Collections

  • E

    ES6

  • R

    React JS

  • C

    CSS

    Cascading style sheets only

  • S

    SEO

    Search engine optimization

  • E

    ES7

  • C

    CMS

    wordpress, drupal, jumla, magento and more


Show All

Tags

vue-js
advanced js
youtube
Web development
vue css
social share buttons
real-life-example
react datetime picker
progra
Online
MathJax
jsfiddle
jquery chart library
instant search using vue
handlebars
event loop
Design
console.log
best practices
imorph

Show All