jsxgrunt-browserify

Getting reactify and browserify to work with ES6


I have a browserify task that is configured like so:

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    dev: {
      src: 'assets/js/main.jsx',
      dest: '.tmp/public/js/main.js',
      options: {
        debug: true,
        extensions: ['.jsx'],
        transform: ['reactify']
      }
    }
  });

  grunt.loadNpmTasks('grunt-browserify');
};

I tried configuring it to use es6 this way:

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    dev: {
      src: 'assets/js/main.jsx',
      dest: '.tmp/public/js/main.js',
      options: {
        debug: true,
        extensions: ['.jsx'],
        transform: ['reactify', {'es6': true}]
      }
    }
  });

  grunt.loadNpmTasks('grunt-browserify');
};

This causes an error though:

Error: path must be a string

I can't understand from the docs how to do this given that I don't want to configure the transform in my package.json. Any help would be appreciated.


Solution

  • I was missing a bracket after the transform option. This works:

    module.exports = function(grunt) {
    
      grunt.config.set('browserify', {
        dev: {
          src: 'assets/js/main.jsx',
          dest: '.tmp/public/js/main.js',
          options: {
            debug: true,
            extensions: ['.jsx'],
            transform: [
              [ 'reactify', {'es6': true} ]
            ]
          }
        }
      });
    
      grunt.loadNpmTasks('grunt-browserify');
    };