Typescript -> es6 -> es5 错误与 sourcemaps

Question

在编译 typescript -> es6 -> es5 时出现源映射问题。我想获取打字稿源映射，但它们仅为根目录中的文件生成。对于仅生成 es6 sourcemaps 的嵌套文件夹，没有 ts。 Screenshot

工具： gulp-TSB：1.10.0， gulp-通天塔：6.1.2， gulp-源地图：^1.3.0

tsconfig 中的选项：

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

我的gulp任务：

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));
});

Answer 1

有一些错误：

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

参考资料

TypeScript Issue #10612: Not producing relative sourceMappingUrl's with mapRoot
Webpack Issue #2995: /* #sourceMappingURL= ... */" in a JS comment triggers a webpack errors
Babel Issue #3751: impossible to pass inline sourcemaps from typescript through es6 > es5 transpilation ("Invalid mapping" error) (T6686)
systemJS Issue #450: In-browser transpilation sourcemaps do not work outside of Chrome

Typescript -> es6 -> es5 错误与 sourcemaps

Typescript -> es6 -> es5 error with sourcemaps

ecmascript-5

typescript

ecmascript-6

gulp

babeljs