Search code examples
javascripttypescriptbabeljstsc

Typescript sourcemaps using command-line Babel

I'm trying to get Babel to produce sourcemaps when run from the command line. The Babel docs around sourcemaps seem to be targeted more toward the gulp workflow and I'm not sure how that translates to the command line.

I'm compiling my typescript using 

tsc -p ./src

My tsconfig.json:

{
    "compilerOptions": {
        "module": "amd",
        "noImplicitAny": true,
        "removeComments": false,
        "preserveConstEnums": true,
        "out": "wwwroot/app.js",
        "sourceMap": true,
        "target": "ES6"
    },
    "files": [
        "App.ts"
    ]
}

This produces wwwroot/app.js and wwwroot/app.js.map.

I then run babel over app.js:

babel ./wwwroot/app.js -o ./wwwroot/app.js --presets es2015 --compact false --inputSourceMap ./wwwroot/app.js.map --sourceMaps both

This modifies app.js, but leaves app.js.map in its original state, meaning the two no longer line up.

How do I get the babel step to produce a new sourcemap that maps my final app.js back to my typescript source?

Solution

  • I was looking for exactly the same thing and found this: https://phabricator.babeljs.io/T6911

    Basically, while advanced options can also be used with babel --name=value, specifying a filename for inputSourceMap is not supported from the CLI and is only available when using the code.

    Gulp sourcemaps with TypeScript and Babel might be helpful for you. I can get it to generate sourcemaps that reference both the JS and original TS files which seems promising. However (as mentioned in the comments of that answer) I also can't seem to get it to use the correct sourceRoot, so the .js.map files point to source locations that don't actually exist.

    Not very satisfactory. :-(