如果在 Angular 中将 sourcemap 设置为 false 会发生啥

Posted 2023-03-05

【中文标题】如果在 Angular 中将 sourcemap 设置为 false 会发生啥

【英文标题】：What will happen if sourcemap is set as false in Angular如果在 Angular 中将 sourcemap 设置为 false 会发生什么

【发布时间】：2019-07-19 15:31:47

【问题描述】：

我是 Angular 的新手。我在tsconfig.json 中看到了sourcemap，默认情况下它是"sourceMap": true。我几乎没有任何疑问，发现this link 很有用。我仍然对此有以下疑问。

我设置了"sourceMap": false，但在应用程序中找不到任何更改。如果我这样设置，实际的变化是什么？

【参考方案1】：

应用的运行方式不会发生任何变化。

变化将体现在您的调试体验中。

Source maps 有助于调试代码。你用 TypeScript 编写代码，编译器会将 source 代码转换为 javascript。当您的应用程序在 Firefox 等浏览器中运行时，浏览器正在运行 JavaScript。即使浏览器正在运行该 JavaScript，如果您在 Firefox 中打开调试器，调试器将显示 TypeScript 源代码并允许您在其中设置断点。调试器能够做到这一点是因为源映射，它将 TypeScript 源代码映射到 JavaScript 运行时代码。这就是源映射的作用：它们将源代码映射到运行时代码，以便在运行时启用源代码调试。

【讨论】：

这绝对是我想要的。但还有一个问题是 Angular 12 默认在生产模式下运行，因此，我也无法调试。我找不到将其设置为开发模式的配置，所以我可以调试。你能建议我能做些什么来解决它吗？

您可以在运行 ng build 命令之前使用 ng serve -o 命令来调试您的 Angular 应用程序。 @ammadkhan

【参考方案2】：

sourceMap 仅用于开发经验（调试），通常您在生产构建中不需要这些文件，如果您检查 angular.json，您会发现它为您设置为 false

  "configurations": 
    "production": 
      "fileReplacements": [
        
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,  <----
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true
    

【参考方案3】：

当sourceMap 设置为false。输出将在没有源映射文件的情况下构建。没有那个，你就不能用浏览器对 ts 文件进行调试。