Grunt Configuration for React + Browserify + Babelify

Datetime:2016-08-23 02:47:20          Topic: Grunt  React           Share

React is awesome. I recently began using it on a side project and it has quickly proven itself to be a great way to create fast, dynamic user interfaces with code that’s easy to reason about (I love that expression). It relies on the idea of components, which matches nicely with the practice of splitting your JavaScript into separate smaller files, each representing an individual component. This keeps your code super organized and manageable.

To achieve this modularity, I use a tool called Browserify . This allows us to create a chain of dependencies using the Node.js syntax “require()”. If you’re using React’s JSX syntax (which you should be), you’ll need Babelify , which is a Babel transformer specifically made for Browserify. Each time you save a .js in your React application, Babelify will convert your JSX syntax into JavaScript, and Browserify will compile all your separate .js modules together into one file that the browser understands (check out Browserify’s documentation if you don’t know how to implement it in your code). I use Grunt to automate these tasks.

I realize there are many different ways and many different tools to accomplish what I’m doing here. Webpack instead of Browserify, Reactify instead of Babelify, Gulp instead of Grunt, etc. If those are your tools, Google can help you. The purpose of this article is to show a sample configuration using specific tools: React, Browserify, Babelify and Grunt.

Besides Grunt and React, here’s what you’ll need:

And here’s my gruntfile:

/*gruntfile.js*/

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    watch: {
      browserify: {
        files: ['src/scripts/**/*.js'],
        tasks: ['browserify']
      }
    },

    browserify: {
      dist: {
        options: {
           transform: [['babelify', {presets: ['es2015', 'react']}]]
        },        
        src: ['src/scripts/app.js'],
        dest: 'dist/scripts/app.js',
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-watch');  
  grunt.loadNpmTasks('grunt-browserify');

  grunt.registerTask('default', ['browserify']);

};

The part that tripped me up initially is the transform: [['babelify', {presets: ['es2015′, 'react']}]] property within the browserify options. You must load Babelify’s es2015 and react presets exactly like I’ve done here ( note the double square brackets around the value ), or else you’ll receive errors.

Hopefully this helps some people in the same situation as myself.





About List