ES6 Hello world project scaffolding

Hi JS warriors,

so you decided to start the ES6 project. I’ll provide a boilerplate to start the project with. Contrary to other solutions, this is extremely tiny. Size matters, doesn’t it?

Background statements:

  • The ES6 code is not recognized by browser so we need to transpile it to ES5. Babel will be our weapon of choice however there are several alternatives.
  • ES6 provokes us to write the code in modular way. Let’s use the well known CommonJS/Node implementation and the browserify as the browser shim for that.
  • You can find a lot of Grunt/gulp tasks for binding all these things together. But let’s start with the minimal: no Grunt/gulp, package.json comes to rescue. Find more about this approach here.
  • You already use some server for static content, say instant.

The realization:

  • mkdir src; touch src/app.es6
    Your path may vary.
  • npm install --save-dev babelify browserify watchify uglify
  • Merge following into your package.json (respecting the path to your app entry point):
  "scripts": {
    "dev": "watchify src/app.es6 -t babelify -o bundle.dev.js -d -v",
    "prod": "browserify src/app.es6 -t babelify -o bundle.dev.js && uglifyjs bundle.dev.js --screw-ie8 -c -m -o bundle.min.js"
  }
  • Make sure to inject the bundle.dev.js into index.html and to add it to the .gitignore.

How to use it

Assuming your server is up and supports hot-reload (instant, webpack-dev-server), you run npm run dev and start your development.

That’s it!

Once you save your changes, watchify detects it and recompiles the project. Your server catches it with hot-reload mechanism and reloads the page.

Run npm run prod for generating production version of the JS.

A note regarding the modular architecture

The best practice with modular app architecture is single entry point, say src/app.es6. It import-s (or require-s) all the modules it needs and generates kind of meta-function you either bind to body.onload or run directly.

That’s why we feed that only file to the browserify/watchify and they create the dependency tree automatically.

Browserify sux! Give me Webpack config!

Ok, in next post 🙂


Hope this helps and may the force be with you!

Advertisements

2 thoughts on “ES6 Hello world project scaffolding

  1. Pingback: ES6 project scaffolding with the Webpack | codedoc's notes

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