Typescript sourcemaps using command-line Babel

Question

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?

Answer 1

Here's how I made it work. In your tsconfig.json you'll need the following options:

{
  "compilerOptions": {
    "inlineSourceMap": true,
    "inlineSources": true
  }
}

Then when you run babel-cli, you'll need to pass --source-maps inline. Here's an example npm script that assumes tsc outputs to a build directory and that babel will output to the same directory:

tsc && babel build -d build --source-maps inline

Answer 2

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. :-(