how to set up grunt + browserify + tsify + babelif

Question

I am struggling to set up grunt + browserify + tsify + babelify (with debug).

The below gruntfile setting does compile typescript, but no babel transpling is happening.

Can anybody let me know how to do this? (i might need to use gulp to do this??)

        browserify: {
        main: {
            src: 'app/scripts/main.ts',
            dest: 'app/scripts/bundle.js',
        },
        options: {
            browserifyOptions: {
                plugin: [['tsify']],
                transform: [['babelify', {presets: ['es2015'], extensions: ['.ts']}]],
                debug: true
            }
        }
    }

tsconfig.json has target set to 'es2015'.

Answer 1

The problem is that grunt-browserify loads the transforms first and then the plugins, so what you want to do - put the transform after the plugin - is not possible with a declarative configuration.

However, you can use the grunt-browserify configure function and set up the plugin and transform inside said function:

browserify: {
    main: {
        src: 'app/scripts/main.ts',
        dest: 'app/scripts/bundle.js',
    },
    options: {
        browserifyOptions: {
            debug: true
        },
        configure: function (bundler) {

            bundler.plugin(require('tsify'));
            bundler.transform(require('babelify'), {
                presets: ['es2015'],
                extensions: ['.ts']
            });
        }
    }
}