kentcdodds / es6-babel-browserify-boilerplate Goto Github PK

ES6 Babel Browserify Boilerplate

This is an boilerplate repo to make it easy to experiment with ES6. It's inspired by es6-browserify-boilerplate but uses babel (formerly 6to5) for transpilation which does not depend on any runtime.

Initial setup

# Clone the repo...
git clone https://github.com/thoughtram/es6-6to5-browserify-boilerplate.git
cd es6-6to5-browserify-boilerplate

# Then, you need to install all the dependencies...
npm install

# If you wanna be able to use global commands `karma` and `gulp`...
npm install -g gulp

Running in the browser

gulp build
gulp serve

# If you wanna Gulp to re-build on every change...
gulp watch

WTF is ES6?

Simply, the next version of JavaScript that contains some really cool features. You might check out some of these:

• https://wiki.mozilla.org/ES6_plans
• http://globaldev.co.uk/2013/09/es6-part-1/
• http://code.tutsplus.com/tutorials/eight-cool-features-coming-in-es6--net-33175

What are all the pieces involved?

Babel

Transpiles ES6 code into regular ES5 (today's JavaScript) so that it can be run in a today browser. Like traceur but doesn't need a runtime to work. Formerly known as 6to5.

CommonJS

Babel is configured to transpile ES6 modules into CommonJS syntax and we use browserify to bundle the code into one file to deliver it to the browser.

Browserify

Browserify walks through all files and traces down all require()s to bundle all files together.

Gulp

Task runner to make defining and running the tasks simpler.