Search code examples
typescriptgulpecmascript-6babeljsecmascript-5

Typescript -> es6 -> es5 error with sourcemaps

When compiling typescript -> es6 -> es5 appears a problem with sourcemaps. I'm want to get typescript sourcemaps, but they generated only for files in root directory. For nested folders generated only es6 sourcemaps, without ts. Screenshot

Tools: gulp-tsb: 1.10.0, gulp-babel: 6.1.2, gulp-sourcemaps: ^1.3.0

Options in tsconfig:

 "compilerOptions": {
 "rootDir": "src/",
 "sourceMap": true,
 "target": "es6",
 "module": "commonjs",
 "declaration": false,
 "noImplicitAny": false,
 "noResolve": true,
 "removeComments": true,
 "noLib": false,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true     
}

My gulp task:

var typescriptCompiler = typescriptCompiler || null;
   gulp.task('build-system', function() {
    if(!typescriptCompiler) {
       typescriptCompiler =  typescript.create(require('../../tsconfig.json').compilerOptions);
}
  return gulp.src(paths.dtsSrc.concat(paths.source))
  .pipe(plumber())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(typescriptCompiler())
  .pipe(to5(assign({}, compilerOptions.commonjs())))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest(paths.output));
});
Solution

  • There are a few bugs:

    TS > ES6 > JS conversion while preserving source maps from original *.ts files

    I created a small repo with the code that shows the error: https://github.com/helios1138/--babel-sourcemaps-error-case

    clone, npm install and run ./build.sh to see Invalid mapping error

    It looks like changes in TS2.0+ prevent a relative sourceMapUrl from being generated despite the adding the mapRoot attribute in the tsconfig.json

    References