Giter VIP home page Giter VIP logo

babel-gulp-browserify-react's Introduction

ES6 Babel Browserify Boilerplate for react

Gulp boilerplate to use ES2015 with browserify for module loading and babel for the transpiling. It's inspired by es6-browserify-boilerplate and react-app-boilerplate but I have also included other common gulp tasks for managing Sass compilation, image optimization, etc.

I have included the SASS "7 1" boilerplate by Hugo Giraudel

Install

Install all dependecies

*Run npm install gulp -g (install gulp globally, if don't have installed yet) *Run npm install (install all projects dependecies)

Running in the browser

Run gulp (default task) to build the project, compile js, Sass and start the web browser (on port 777, by default)

Other tasks includes

  • gulp styles - compile all files under styles/scss to dist/css (import everything on styles/main) and reload on change
  • gulp images - optimize images, handle svg and reloads on image files updates
  • gulp html - reloads on html files change
  • gulp build-persistent - main task for building js and start a stream with browserify - reloads on js files changes
  • gulp build - will also build, but will leave stream once done

About bundling

As mentioned, Browserify, Babel to handle module loading, transpiling and transform react JSX to normal JS.

The entry point to bundling everything is src/app.js. Import/require everything there and Gulp will take care of the rest.

Modernizr (using browsernizr), Jquery, ES2015 modules and react have been included for test.

Watchify watch for js files updates and emmit a sign to BrowserSync to reload when something has been updated.

ES2015

There are a lot of new features for the next version of Javascript, ES2015 (formely ES6) available.

There are some simple examples of some of them on this repo, like new type of variables, destructuring, string interpolation, class and modules, but there is a lot more!

Have a look at:

React

Fast library created from Facebook team for building user interface

https://facebook.github.io/react/

What are all the pieces involved?

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.

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 walks through all files and traces down all require()s to bundle all files together.

Task runner to make defining and running the tasks simpler.

Feel free to clone and use this repo for your project!

babel-gulp-browserify-react's People

Contributors

cburgdorf avatar 0x-r4bbit avatar diogosilvaferreira avatar enotionz avatar pgol2 avatar janpantel avatar reduxionist avatar seblours avatar

Watchers

James Cloos avatar Victor Longon avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.