Adventures in ES2015 & WebPack

Recently I embarked on a project using the latest Javascript syntax. When I set out to build my project, I considered my options carefully. I wanted to learn something new, and generally in tech there isn’t much that’s full of shiny new things than the web dev world. What I know extremely well is games, so I setup a simple game using Phaser together with WebPack and ES2015.

Webpack

Webpack is a bundling tool, like browserify. It allows for concatenating out of the box, but is extremely pluggable, and through this allows for transpiling (for example ES2015 –> ES5), Sass/Less, and a simple webserver (via BrowserSync). It also handles 3rd party, non-AMD module exports much better than some other AMD libraries I have used in the past.

For different file types you can define rules of how they get handled:

{ test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'src') },
{ test: /pixi\.js/, use: ['expose-loader?PIXI'] }

1 2	{ test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'src') }, { test: /pixi\.js/, use: ['expose-loader?PIXI'] }

Here the first line tells Webpack that anything ending in .js should use the babel-loader plugin to handle these files. Since I’m using ES2015 syntax, we need this to transpile them to ES5 syntax.

The second line is loading an external node module (PIXI.js which is part of the PhaserJS node module that I’m using), that does not use a clean AMD structure. The expose loader tells WebPack what to expose. Using this, and defining an alias to the imported module, by specifying which module:

var pixi = path.join(phaserModule, 'build/custom/pixi.js')

1	var pixi = path.join(phaserModule, 'build/custom/pixi.js')

And then the alias:

resolve: {
    alias: {
        'pixi': pixi,
    }
}

resolve: {

alias: {

'pixi': pixi,

}

Now to have access to pixi, you can simply:

import 'pixi'

1	import 'pixi'

In your code base.

ES 2015

Let me start by saying that I come from a non-javascript background. For many years, I was used to strongly typed Object Oriented languages, with built-in inheritance. Although I’ve grown to enjoy working with Javascript and it’s functional ways, I’ve always missed the strengths of having a language built for classes and inheritance. Then the ES2015 syntax came along. It’s still not widely supported, but thanks to transpiling and that magic of web development, you can build with it today. Lets go over some of my favorite features:

Classes. For real!

export default class Events
{
    constructor (game)
    { 
    }
}

export default class Events

{

constructor (game)

{

}

Yes! Finally real class syntax in JavaScript. Sure, under the hood it almost definitely uses a function and prototypes, but I’m so happy to be able to make classes in a way that’s more familiar to me. Exporting also hints at something a bit deeper:

Modules

// File 1 - Events.js

export default class Events
{
  ...
}

// File 1 - Events.js

export default class Events

{

...

}

// File 2 - some user of Events.js
import Events from './Events'

1 2	// File 2 - some user of Events.js import Events from './Events'

Built-in modules. No need to mess with the overly complex requirejs syntax, or many of the other ok-but-never-quite-right AMD libraries.

Inheritance

No more weird prototype copying, actual inheritance:

export default class MyExtension extends MyBase
{
    constructor(game)
    {
         super(game)
    }

    doTheThing() 
    {
        super.doTheThing()
    }
}

export default class MyExtension extends MyBase

{

constructor(game)

{

super(game)

}

doTheThing()

{

super.doTheThing()

}

Using let instead of var is still requires some effort. Coming from a strongly typed background, getting used to var was difficult enough! Another optional I’m getting used to is dropping the ; at the end of statements. Although this is much harder a habit to break, I agree with it in principle. Much like using weak typing forces much better variable naming, omitting semi-colons unclutters the codebase and prevents bad practice of multiple statements on the same line. The major downside.. going back to other languages is much harder!!!