Setting up React for ES6 ES2015 with Webpack and Babel

es6-webpack-react-babel

This resource came in quite handy when setting up React in combination with ES6 ES2015, Webpack and Babel.

Installing all the required dependencies:

# Install Webpack
npm install --save-dev webpack

# Install the Babel Loader, for use with Webpack
npm install --save-dev babel-loader

# Install the es2015 and react presets, for use with Babel
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

The contents of webpack.config.js:

var path = require('path');

module.exports = {
  entry: path.join(__dirname, '../src/scripts/index.js'),
  output: {
    path: path.join(__dirname, '../build/scripts/'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        },
        progress: true
      }
    ]
  },
};

Integrate it as a grunt task using grunt-webpack, or run it directly using webpack-dev-server (install either one using npm i):

$ webpack-dev-server --progress --colors
Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Build Wars: Gulp vs. Grunt

🖥 That’s a presentation embedded above. Use your left/right arrow keys to navigate through it. You might need to click it first in order to focus it

💁‍♂️ New to Gulp? Read all about it in this introductory post

Supercharging your Gruntfile

In this article, we won’t focus on what numerous Grunt plugins do to your actual project code, but on the Grunt build process itself. We will give you practical ideas on:

  • How to keep your Gruntfile neat and tidy,
  • How to dramatically improve your build time,
  • And how to be notified when a build happens.

Supercharging your Gruntfile →

Grunt vs Gulp – Beyond the Numbers

Speed comparison between Grunt and the aforementioned Gulp

All Gulp plugins are just duplex streams that read in data and output data. Everything can be processed in memory, with the output of one stream piped as input to another. Much like Unix pipes.

This gives Gulp a huge speed advantage over Grunt, because I/O is very expensive when compared to in-memory operations. On top of that, Grunt has to compile all the files even if only one has changed, which adds additional build time.

But don’t switch just yet, the article – and this I didn’t know – also mentions that piping is on the Grunt roadmap.

Grunt vs Gulp – Beyond the Numbers →

Gulp – The streaming build system

gulpjs

gulp.task('sass', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

Gulp is a build system and performs tasks such as the ones we do using Grunt: minify, concat, prefix, uglify, etc. Main difference:

Gulp allows you to input your source file(s), pipe them through a bunch of plugins and get an output at the end, rather than configuring each plugin with an input and output—like in Grunt.

Must say that the gulpfile.js embedded below is more readable than its gruntfile.js counterpart where you have to jump through the file when first glancing at it.

Gulp →
Getting started with Gulp →

Grunt for People Who Think Things Like Grunt are Weird and Hard

gruntjs

Let’s face it: Grunt is one of those fancy newfangled things that all the cool kids seem to be using but at first glance feels strange and intimidating. I hear you. This article is for you.

Great introduction to Grunt on 24ways. A must read for anyone starting out with it.

Grunt for People Who Think Things Like Grunt are Weird and Hard →

Automating Front-end Workflow

Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year. What if however, you could automate a lot of this?

Extensive set of slides by Addy Osmani. Solid gold for those wanting to start with Grunt, Yeoman, Bower, etc. Also mentions quite a few handy tools.

Automating Front-end Workflow →

Tools for image optimization

Where possible, it’s best to try automating image optimization so that it’s a first-class citizen in your build chain. To help, I thought I’d share some of the tools I use for this.

Not only contains a list of grunt plugins one can use, but also a few command line and online tools. I’ve been using TinyPNG for quite some time now before uploading images to my blog. Can shave up to 83% (!) of a screenshot created in OS X.

Tools for image optimization →