The es6-babel-browserify-boilerplate from thoughtram

es6-babel-browserify-boilerplate's Introduction

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:

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.

es6-babel-browserify-boilerplate's People

Contributors

Stargazers

Watchers

es6-babel-browserify-boilerplate's Issues

Fix browserify usage

A couple things:

It is considered a bad practice to use gulp-browserify over the normal browserify module.
Should be using the 6to5-browserify transform instead of separate gulp transforms.
Browserify should have a single entry point.
Should be using watchify instead of gulp watch if you want fast builds.

Resources:

If you need any help feel free to ask us in the 6to5 gitter room.

ESLint support

This makes up for a nice starter projects for pure ES6 projects, thanks and kudos!

You could additionally add ESLint as static linter to make everyone a better ES6 programmer: http://eslint.org/

ESLint is already used over JSHint by a few popular projects, e.g. React: https://github.com/facebook/react/blob/master/.eslintrc

This is the rules config, I'm currently preferring: https://github.com/winterbe/streamjs/blob/master/.eslintrc

Here's another quite popular rules config by AirBNB: https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

Will be great if we had support for less and or sass don't you think?
I have something with gulp-sass and gulp-minify-css.
What do you think?
I guess, after that, this will become es6-babel-sass-browserify-boilerplate :) hehe

Browserify vs Webpack

Just out of curiosity: Do you have any experience with Webpack as an alternative to Browserify? Did you choose Browserify over Webpack for a reason?

I'm using Webpack in some projects but never used Browserify. The internet seems undecided between both tools, so I'm interested in your opinion on that.

Thanks in advance.

Recommend Projects

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