Grunt babel multiple files and preserve source mapping

Question

I am trying, using grunt and babel, to transpile all js6 files in a folder and end up with a concatenated single file (js5) with a working sourcemap to the original es6 files. However the sourcemapping does not work. My babel, concat settings below:

 "babel": {
        options: {
            sourceMap : true
        },
        dist: {
            files:[
                {
                    expand: true,
                    cwd: 'wwwroot/js/src',
                    src: ['*.js'],
                    dest: 'tmp/js'
                }]
        }
    },

    concat: {
        options: {
            sourceMap: true
        },
        js: {
            src: [
              'tmp/js/*.js',
            ],
            dest: 'wwwroot/js/app.js'
        }
    }

Versions:
"grunt": "0.4.5",
"grunt-bower-task": "0.4.0",
"grunt-babel": "5.0.1",
"grunt-contrib-concat" : "0.5.1"

I am ending up with firstly a folder with a lot of js files and src maps(tmp directory). But concatinating them into one file messes up with source mapping completely.

Ideas? Also, can I somehow skip the making of temporary files and sort of just pipe the result into concat?

Etam

You could run concat task first and then on the single file run the babel task with source map option true – Osmic

@PrayagVerma that does make it a bit better since I can debug es6 code. Not from the original file but well, better. – Etam

There seems to be an inputSourceMap option for babel but getting it to work does not seem trivial to me. – Etam

@PrayagVerma that is good but when Babel encounters error, it will not show original source location for it, but in concatenated file. Does anyone knows how to solve this? – Proportional

Answer 1

Reversing the order of task will make this much easier.First run the concat task on the JS files. After that run babel task on the single file created by concat task previously with the following options

options: {
                sourceMap: true,
                inputSourceMap: grunt.file.readJSON('script.js.map')
            },

Here the script.js.map file is the name of the source map file generated by concat task. As inputSourceMap option excepts a source map object , we pass it in using the grunt.file API's readJSON method

The full Grunt file configuration would be:

concat: {
        options: {
            sourceMap: true
        },
        js: {
            src: ['Modules/**/js/*.js'],
            dest: 'script.js'
        }
    },
    babel: {
        dist: {
            options: {
                sourceMap: true,
                inputSourceMap: grunt.file.readJSON('script.js.map')
            },
            src: [
                'script.js',
            ],
            dest: 'app.js'
        }
    }

Example project: https://github.com/pra85/Grunt-Concat-Babel-Example

Osmic

This works, thank you. What I had to do to make it work in visual studio task runner was to change: inputSourceMap: function () { if (grunt.file.exists('../concatinated-es6.js.map')) { return grunt.file.readJSON('concatinated-es6.js.map') } return ''; }() Otherwise the task list would crash. – Etam

This Mostly worked, the Grunt file kept trying to read the source map before it was generated though. To fix this, I registered a custom task that gets run between concat and babel that addes the inputSourceMap option to the babel config. Making my Gruntfile.js look something like this: jsbin.com/rijazetaxe/3/edit?js – Cuirbouilli

According to babel source code, parsing the source map json is uneeded. Babel will always parse the source map comment from concat output, as long as inputSourceMap is truthy. Even worse, it will ignore any value if it finds a source map comment, which is always the case here. Consequently, this probably won't do what you expect. – Obloquy

Finally the real solution to the problem. Many other grunt plug-ins have an option sourceMapIn to which you can pass the path, but this plugin need a not better specified "source map object". Here it is. – Abradant

For me this is causing an out of memory error as my sourcemap is huge. Node option --max-old-space-size=10000 helps though. #53299930 – Bissau