Vanilla Javascript development environment

Minimum stuff you need to know to develop a javascript project

4 Pillars of Javascript development environment

Basically, javascript development means working with the below four modules.

• Package Manager
  npm
• Transpiler
  Babel, Repl and etc
• Bundler
  Webpack, Parcel, Rollup, and etc
• Runtime
  Web Browser, Node, and etc

First, create a project.

$ mkdir pj
$ cd pj

Now, add a source code index.js here

function main() {
    console.log("hello world");
}
main();

run it with your runtime, for example, node

$ node index.js 
hello world

Package Manager

Just use npm. npm is the best package manager and installer. It makes your life so easy. To set up an environment for npm, initiate npm as below. It will create a minimum npm setup.

$ npm init -y
Wrote to /home/poby/pj/package.json:
{
  "name": "pj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

To make your life easier to run your app, add a script to package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "execute": "node index.js"
  },

then, you can run it like

$ npm run execute
> pj@1.0.0 execute /home/pj
> node index.js
hello world

Transpiler

Javascript is evolving. However, there are still old Runtimes that can understand only old versions of Javascript. Transpiler enables you to use modern Javascript language and run it on old Runtime.

Babel

• babel/core
  The core functionality of Babel.
• babel/cli
  A tool that allows you to use babel from the terminal.
• babel/preset-env
  Transformations come in the form of plugins, which are small JavaScript programs that instruct Babel on how to carry out transformations to the code. Instead of adding all the plugins we want one by one, we can use a “preset” which is just a pre-determined set of plugins.

$ npm install --save-dev @babel/core @babel/cli @babel/preset-env

To use preset, create a .babelrc as below

{
  "presets": [
    "@babel/preset-env"
  ]
}

example of using babel-cli

$ ./node_modules/.bin/babel src --out-dir dist

if you don’t specify ./node_modules/.bin/ , then it will try to find babel from the node directory such as home/poby/.nvm/versions/node/v13.2.0/bin/babel. This could be a different version that you may need. In such a case, an error message

$ babel src/ --out-dir dist
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Bundler

Working with a project with multiple javascript files

For better software engineering, you will write codes in separate files. But, the runtime will take only one javascript file. You will need to combine all your javascript files into one that can be run on the runtime.

index.js

import { greet } from "./greet.js";
greet();

greet.js

export function greet() {
    console.log("hello world");
}

If you transpile only index.js using babel, your runtime will complain it with an error below

ReferenceError: Can't find variable: require

This is because you just transpile a single index.js, but have not bundled both index.js and greet.js into a single file so that a runtime can load and run. For this purpose, we need to use bundler. My choice of Bundler is Webpack.

Webpack

Install Webpack

npm install --save-dev webpack
# or specific version
npm install --save-dev webpack@<version>

To have Webpack to bundle javascript application using babel, you need Webpack Loader for Babel

npm install --save-dev babel-loader

Webpack configuration

const path = require('path');
module.exports = {
  entry: path.resolve(__dirname, './index.js'),
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'app.bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
  },
};

Package.json script

"scripts": {
    "debug": "webpack --mode development --watch",
    "prod": "webpack --mode production"
  },

Pushing to Git

cd existing-project
git init
git add --all
git commit -m "Initial Commit"
git remote add origin ssh://git@your.company.com:7999/projectname.git
git push -u origin master