使用 typescript 和 browserify/gulp 严重破坏了 Sourcemaps

Question

我成功地从我的构建过程中获取了 sourcemaps 输出，该过程将 browserify 与 gulp 结合使用。然而，sourcemaps 在调试时不起作用 - 当我设置断点时（在 Chrome 中），断点通常会跳到不同的行，而且很明显脚本实际上并没有在它说的地方暂停。当我将鼠标悬停在变量上以查看它们的值时，它显示了错误的东西，等等。我使用 this tutorial 作为基础，所以它似乎应该有效。

我的 gulpfile.js 中的相关构建步骤是：

return browserify({
  basedir: '.',
  debug: mode === 'dev',
  entries: [`${paths.src}/app/${buildConfig.appFolder}/${buildConfig.appSrc}`],
  cache: {},
  packageCache: {},
})
  .plugin(tsify)
  .bundle()
  .pipe(source('app.js'))
  .pipe(gulp.dest(`${paths.dist}/app/${buildConfig.appFolder}`))
  .on('error', err => {
    console.error(err.toString());
    done(err);
  });

而tsconfig.json是：

{
  "compilerOptions": {
    "lib": ["es2018", "dom"],
    "target": "es2015",
    "jsx": "react",
    "moduleResolution": "node",
    "diagnostics": true,
    "types": [
      "react",
      "react-dom",
      "lodash"
    ]
  }
}

Answer 1

尝试设置编译器选项：

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

"sourceMap": true 告诉打字稿发出源地图。 "inlineSources": true 告诉它在源映射本身中嵌入打字稿源。

如果这仍然不起作用，您可以尝试使用 "inlineSourceMap": true（结合 inlineSources），这会导致 sourcemaps 实际上内联在发出的 javascript 中（最好确保生产版本禁用它以避免膨胀你的最终包）

我不确定这是否适用于您的 gulp / browserify 设置。您链接的那个教程提到添加：

var sourcemaps = require('gulp-sourcemaps');

....
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))

这也值得一试，尽管这似乎与丑化有关，https://www.typescriptlang.org/docs/handbook/gulp.html#uglify

参考：https://www.typescriptlang.org/docs/handbook/compiler-options.html

总的来说，我发现 sourcemaps with typescript 令人沮丧 - 即使设置正确，我仍然偶尔会发现断点/代码步进行为不佳，尽管这些年来它确实有所改进。

作为一般提示，我发现将第三方依赖项拆分为一个单独的包，然后在 chrome 开发工具中将其黑盒化以提供帮助，因为它避免了进入承诺、可观察对象的库代码，等等

使用 typescript 和 browserify/gulp 严重破坏了 Sourcemaps

Sourcemaps horribly broken using typescript and browserify/gulp

typescript

gulp

browserify

source-maps