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

我成功地从使用browserify和gulp的构建过程中获得了sourcemaps输出。然而，sourcemaps在调试时不起作用——当我（在Chrome中）设置断点时，断点通常会跳转到另一行，而且很明显，脚本实际上并没有在它所说的地方暂停。当我将鼠标悬停在变量上查看它们的值时，它会显示错误的内容，以此类推。我用它作为基础，所以它看起来应该有用

my

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

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

而

tsconfig.json

是：

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

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

---

尝试设置编译器选项：

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

“源映射”：true

告诉typescript发出源映射<代码>“inlineSources”：true告诉它将typescript源嵌入源映射本身

如果这仍然不起作用，您可以尝试使用

“inlineSourceMap”：true

（与

inlineSources

结合使用），这会导致SourceMap实际内联到发出的javascript中（最好确保生产版本禁用此功能，以避免最终捆绑包膨胀）

我不确定这是否适用于您的确切“吞咽/浏览”设置。您链接的教程提到添加：

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

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

这可能也值得一试，尽管这似乎与丑陋有关

参考：

总的来说，我发现使用typescript的sourcemaps令人沮丧——即使设置正确，我仍然发现偶尔会出现糟糕的断点/代码步进行为，尽管多年来它确实有所改进

---

作为一个一般提示，我发现将第三方依赖项拆分为一个单独的捆绑包，然后在chrome开发工具中对此进行黑盒处理以提供帮助，因为这样可以避免为了承诺、可观察性等而进入库代码

谢谢-不幸的是没有骰子。对我来说，如果你不能一步一步地完成你的代码，它几乎会毁掉typescript的好处：（顺便说一句，我也用你建议的行（{loadMaps:true}等）尝试过它），这也没用。非常令人沮丧。不过，感谢您的帮助。还有一件事可能会有所帮助，当浏览器在单步执行方面不合作时，我发现“debugger”语句仍然会导致它在适当的位置中断