使用 typescript 和 browserify/gulp 严重破坏源图

Question

我成功地从我的构建过程中获取源映射输出，该过程使用带有 gulp 的 browserify。但是，源映射在调试时不起作用 - 当我设置断点时（在 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 告诉 typescript 发出源映射。 "inlineSources": true 告诉它将打字稿源嵌入到源映射本身中。

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

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

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

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

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

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

总的来说，我发现带有 typescript 的源图令人沮丧 - 即使设置正确，我仍然偶尔会发现断点/代码步进行为很差，尽管这些年来它肯定在改进。

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