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?

you could try passing `retainLines` to options in grunt. https://babeljs.io/docs/usage/options/ "this will lead to wacky code but is handy for scenarios where you can't use source maps." — azium, Sep 07 '15 at 15:32
Why do you want to keep the formatting anyways? It should be good enough to debug with breakpoints the way it formats normally. — azium, Sep 07 '15 at 15:33
One of the reasons is too easily track line numbers in a code coverage. The second reason is to prove my colleagues, that are not using ES6 syntax, that babel won't affect their code in any particular way. — Serhii Holinei, Sep 07 '15 at 15:47
Well in that case `retainLines` should do the trick, but I think the metric of code 'affection' should be how it works not how it looks. Too bad about your colleagues. They should realize that ES6 is backwards compatible without being convinced.. — azium, Sep 07 '15 at 15:50
Totally agree with you. You may provide an answer and I'll approve it — Serhii Holinei, Sep 07 '15 at 15:52

score 2 · Accepted Answer · answered Sep 07 '15 at 15:58

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/

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

1 Answers1