My JavaScript Journey: Basic ES6 Browser Skeleton

In my last blog entry, I explained how to create a very basic ES6 CLI project. In this one, I will follow most of the same steps to create an ES6 browser project, instead. I’m not going to go into the same level of detail with respect to creating the project and checking in code in this article—see the first one if you have questions about those basics.

Add the App

After creating your project, add index.js to /src:

"use strict"

var sayHello = function () {
    return "Hello";
};

document.getElementById('msgBtn').addEventListener('click', function () {
    var message = sayHello();
    document.getElementById("message").innerHTML = message;
});

Create a new folder, /css, and add styles.css:

body {
    font-family: 'Arial';
    font-size: 16px;
    padding: 0;
    margin: 0;
}

header {
    background-color: #336666;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

h1, h2, h3 {
    font-weight: 200;
}

header > h1 {
    font-weight: 200;
    font-size: 18px;
    margin: 0;
    color: #FFFFFF;
}

h2 {
    font-size: 22px;
    margin: 20px 0 0 0;
}

h3 {
    margin: 10px 0 28px 0;
}

h3 > span {
    color: #0288D1;
}

label {
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 4px;
}

.content {
    padding: 20px;
}

.bar {
    display: inline-block;
    border: none;
    height: 8px;
}

.stretch {
    width: 100%;
    padding-left:0;
    padding-right:0;
}

.flex {
    display: -webkit-flex;
    display: flex;
}

.left {
    text-align: left;
}

.form > div {
    margin: 6px 0;
}

button {
    text-transform: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 10px;
    background: #F1F1F1;
    font-size: 16px;
    border: solid 2px #ddd;
    color: #444;
}

button:hover {
    background: #F6F6F6;
    border: solid 2px #ccc;
}

button:active {
    background: #FCFCFC;
    border: solid 2px #ddd;
}

button:focus {
    outline:0;
}

In the project folder, add index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
										<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>JavaScript ES6 Browser Skeleton</h1>
</header>
<div class="content">
<div class="form">
<div>
 <label htmlFor="msgBtn"></label>
 <button id="msgBtn">Get Message</button></div>
</div>
<h2>Message: <span id="message"></span></h2>
</div>
<script src="src/index.js"></script>
</body>
</html>

To see it work, open index.html in a browser (my example uses Chrome) and click the Get Message button: Screen Shot 2017-04-03 at 09.37.37 Checkin the code.

Add ES6 import/export Code

In /src, add hello.js:

const hello = 'Hello';
export default hello;

Modify index.js to import this module, then use it to get the text “hello.”

import hello from './hello.js';

var sayHello = function () {
    return hello;
};

document.getElementById('msgBtn').addEventListener('click', function () {
    var message = sayHello();
    document.getElementById("message").innerHTML = message;
});

If you run the code, you will get an error in the console (to open the console in Chrome, on a Mac, click ⌥⌘i). Output: Uncaught SyntaxError: Unexpected token import Screen Shot 2017-04-03 at 09.48.28 Do the next steps to fix it.

Add webpack

See https://www.npmjs.com/package/webpack/ webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser.

npm install webpack --save-dev

Modify index.html to run from webpack bundle: Replace:

<script src="src/index.js"></script>

with:

<script src="dist/bundle.js"></script>

To create the bundle, in the project folder, run:

./node_modules/.bin/webpack app/index.js dist/bundle.js

Output:

Hash: d65b6915dcad093cc77c
Version: webpack 2.3.3
Time: 109ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.31 kB       0  [emitted]  main
   [0] ./src/hello.js 45 bytes {0} [built]
   [1] ./src/index.js 251 bytes {0} [built]

webpack creates bundle.js in /dist. Compare this file to index.js to see how webpack replaces the ES6 instructions with ES5 compatible wrapper code.

Either refresh your browser window or open index.html from your project folder. The error will be gone.

Screen Shot 2017-04-03 at 09.37.37

Add .gitignore:

.DS_Store
dist
node_modules

Checkin the code.

Using webpack with node

To enable node to build the webpack bundle, in the project folder, add webpack.config.js. Notice: this code is written in ES5.

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

This can be run from the project directory to create dist/bundle.js (delete the existing dist/bundle.js first so you can see the new one get built):

./node_modules/.bin/webpack --config webpack.config.js

The final piece is to add a build script to package.json:

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

In the project directory, run:

npm run build

And, there you have it. The node script builds the webpack bundle, dist/bundle.js from which index.html gets the packaged html that it renders.

Checkin the code.

In Conclusion

Packaging a simple ES6 app with webpack transpiles the code into a bundle that can be run on any browser that supports ES5. You can find the code in my github repository, skeleton-browser-js.

Copyright ©2014-17 Ramona Ridgewell. All rights reserved.

Advertisements
This entry was posted in #Education, Coding, JavaScript, Writing and tagged , , , , , . Bookmark the permalink.

One Response to My JavaScript Journey: Basic ES6 Browser Skeleton

  1. Pingback: My JS Journey: A Promise in a Browser | RamonaRidgewell

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s