ecmascript es2015 getting started

2017-04-03
#nodejs #getting started #javascript #babel #webpack
programming/ javascript/ nodejs

ECMAScript 6 or ES2015, whatever you want to call it. It comes with many features to make writing JavaScript more easier. However not all browsers support this so we can use Babel to help convert (or more correctly ‘transpile’) this to browser friendly JavaScript.
Below are steps to create yourself a Babel and Webpack project to play around with ES2015. Firstly create a ‘es6’ directory and initialise a NodeJS project in it:

1
2
3
mkdir es6
cd es6
npm init -y

The -y creates the ‘packages.json’ file with project default settings.
Webpack

First we’ll start with webpack to make sure that the javascript file are being processed. Start by installing webpack as a dev dependency:

1
npm install --save-dev webpack

Create ‘build’ directory and place a basic ‘index.html’ file in there. This is simply to provide browser access to the webpack generated .js javascript file.

1
mkdir build

Below is an example index.html file contents for your in build/index.html:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>ES6</title>
   </head>
   <body>
      <script type="text/javascript" src="bundle.js"></script>
   </body>
</html>

Create an ‘app’ directory for the JavaScript content you will write for Webpack to repackage.

1
mkdir app

Create an index.js file to sit in the app folder. We’ll start with the usual ‘Hello World’ message. Your app/index.js should look like the below:

1
console.log("Hello World (from Webpack!)");

In your main project folder (same directory as build, app, node_modules) create your webpack.config.js with the following setup:

1
2
3
4
5
6
7
module.exports = {
   entry: ['./app/index.js'],
   output: {
      path: __dirname + '/build',
      filename: 'bundle.js'
   }
}

When you created project with the default settings, your packages.json file would have created a scripts entry with the following ‘scripts’ entry:

1
2
3
"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
}

to

1
2
3
"scripts": {
   "build": "webpack"
},

You should now be able to run the application with the following command:

1
npm run build

You should now be able to see a new bundle.js file in the build directory. You will be able to open your build/index.html and pick up this packaged bundle.js file if this built successfully.
Babel

If all is successfult, install babel via npm using the command:

1
npm install --save-dev babel-core babel-loader webpack-dev-server babel-preset-es2015 babel-polyfill babel-preset-stage-0

Update your webpack.config.js by adding the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
   entry: ['babel-polyfill', './app/index.js'],
   output: {
      path: __dirname + '/build',
      filename: 'bundle.js'
   },
   module: {
      loaders: [{
         loader: 'babel-loader',
         test: /\.js$/,
         exclude: /node_modules/
      }]
   },
   devServer: {
      port: 3000,
      contentBase: './build',
      inline: true
   }
}

Update your package.json scripts so that you can start the dev-server and see your JavaScript updates on saves.

1
2
3
4
5
6
7
"scripts": {
   "build": "webpack",
   "start": "webpack-dev-server"
},
   "babel": {
   "presets": ["es2015", "stage-0"]
}

You can then start the webpack-server with the start command for npm:

1
npm start

You can then see your JavaScript changes in real time by browsing to localhost:3000.