angular - 是什么使得在 chrome 中调试 typescript 成为可能？

Question

当浏览器只理解 Javascript 时，是什么使得在 chrome 中调试 typescript 成为可能？我总是在使用 chrome 开发人员工具的 Angular CLI 创建的 Angular 项目中调试我的 typescript 文件，但是我不知道我们如何能够调试 typescript 文件的原因。谁能给我解释一下？

Answer 1

Angular CLI 使用 webpack。当 webpack 将你的 TS 转换为 JS 时，它也可以配置(默认情况下)生成源映射。这就是 Chrome 能够将 javascript 代码绑定(bind)回 typescript 以进行调试的方式。

由 Angular CLI 生成的示例 tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true, <--- this right here
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}