grunt-babel breaks file formatting (new lines and spaces)

Question

I've just started using babel with grunt-babel in my application. But I encounter some behavior I want to avoid:

Before babel:

(function() {
    'use strict';

    angular
        .module('app')
        .controller('Ctrl', Ctrl);

    Ctrl.$inject = ['$stateParams'];

    function Ctrl($stateParams) {

    }
})();

After babel:

(function () {
    'use strict';

    angular.module('app.standingOrder').controller('Ctrl', Ctrl);

    Ctrl.$inject = ['$stateParams'];

    function Ctrl($stateParams) {}
})();

My grunt task looks like this:

babel: {
    options: {
        sourceMap: false,
        blacklist: ['strict']
    },
    dist: {
        files: [
            {
                src: [ 'src/**/*.js' ],
                cwd: '<%= build_dir %>',
                dest: '<%= build_dir %>',
                expand: true
            }
        ]
    }
},

Note that babel removed blank lines, added/removed spaces that breaks previous formatting.

Is there any way to avoid this and keep my formatting?

Answer 1

The retainLines option will attempt to preserve your line numbers. https://babeljs.io/docs/usage/options/

I think source maps are probably the best option, though they require a bit more work to manage.

You can use the repl to see what babel's gonna do https://babeljs.io/repl/