A Simple ES6 (ES2015) Javascript Project

David Salgado

In this post, I’m going to walk through creating a very simple Javascript project. The project itself is not going to do anything much, but the point (as always, with javascript) is to figure out how to get the build and test pipelines set up correctly. I’m going to try to use a minimum of components, and in the end I want the following;

A static javascript application, deliverable as three files;

index.html

application.js

stylesheet.css

The application should work in all modern browsers.

When working on the site, I want to;

write my javascript using ES2015

keep my javascript classes in separate files

write and run unit tests for my classes

For the purposes of this exercise, all the application needs to do is write a message into a web page. The point is to use ES2015 to do that.

Getting started

Let’s start by setting up a fresh project (FYI, I’m using npm version 3.5.3);

$ mkdir hello-es2015
$ cd hello-es2015
$ git init
$ npm init

For now, just press return in response to all the prompts.

Let’s add some directories

$ mkdir src dist
$ touch src/.gitkeep dist/.gitkeep

We’re going to be adding some npm packages, but we don’t want them in our git repo.

<html><head><metaname="viewport"content="width=500,initial-scale=1.0,user-scalable=yes"><title>Hello ES2015</title><linkrel="stylesheet"href="stylesheet.css"/></head><body><main><p>This is not very interesting</p></main><script src="application.js"></script></body></html>

And let’s commit what we’ve got, so far

$ git add .
$ git commit -m "Initial commit"

All very simple. If you open src/index.html in your browser, you should see an uninspiring web page.

Note that you won’t see anything logged to the console, because we called our script application.js in the html tag, but our javascript source file is called app.js We’ll fix that in the next step.

Gulp

We’re going to need a build tool to take our separate javascript classes and combine them. We’re also going to need to transpile the ES2015 javascript into the ES5 code supported by the majority of browsers. So, let’s create a build system to generate our dist/ files. For the files we’ve got right now, a simple cp src/* dist/ would work. But, we’re going to need something a bit more complicated pretty soon, so we’ll use a proper build tool.

We’re going to use gulp.js, installing it globally so that we can call gulp from the command-line, without having to type ./node_modules/gulp/bin/gulp.js every time. We’re also going to install it as a project dependecy, along with a couple of plugins.

This loads our gulp plugins, then defines tasks to build our application.js file (build-js), and copy our CSS and HTML files. The default task is what will happen if we just type gulp at the command-line, and the clean task is listed as a dependency of the default task, so we’ll always be building into a clean dist/ directory.

Because gulp is already configured to use babel to transpile ES2015 files, there’s nothing else we need to do.

Conclusion

There’s a lot more we could do with these tools, such as setting up gulp to watch for changes and run our tests, but the point of this post was to show you how to put the pieces together. I hope you found it useful.