SourceMaps Demystified (.js.map)

当我们构建 Angular 应用程序时，会创建 js 文件和 .js.map（源映射文件）文件。

从本质上讲，源映射是一个 JSON 文件，其中包含将转译后的代码映射回原始源所需的所有信息。

• 在开发阶段调试 TypeScript 代码需要映射文件。

• ng build --prod - 生产构建 - 没有源映射
• ng build - dev build - 存在源映射

从技术上讲，源映射只是一个包含以下字段的 JSON 文件：

• version：表示源映射规范版本
• file：此源映射所属的转译文件的名称
• sourceRoot: basePath — 源相对于这里定位
• sources：原始源文件的路径（例如 TypeScript 文件）
• sourcesContent：可选属性，可以包含您的整个源代码。
  当源代码在此属性中内联时，无需托管源即可检索。
• names：在代码中找到的方法或变量名称
• mappings：这是整个魔术发生的地方。从技术上讲，映射属性是一个非常大的字符串，其中包含 Base64 VLQ（可变长度数量）值。这些值有助于找到源文件中的原始位置。

Dev Build vs Production Build

正如我们所知，dev build 默认遵循 jit 编译，它创建映射文件，但在生产构建中遵循 aot 编译，不会创建映射文件。

Source Maps during Development

Source maps 帮助我们在开发工具中的 webpack:// 下显示我们的原始源代码。我们现在可以打开 app.component.ts 并在 app.component.ts 文件中放置一个断点。

让我们尝试在没有 sourcemap 文件的情况下运行项目，这类似于生产构建，因为在生产构建中我们将没有映射文件。

ng serve --sourceMap=false

我们在哪里设置断点？ 我们需要手动在转换后的 JavaScript 文件中找到我们的函数，这很麻烦。

SourceMapExplorer

To install for project:

npm install source-map-explorer --save-dev
To Install Globally:
npm install -g source-map-explorer

The source map explorer determines which file each byte in your minified code came from. It shows you a treemap visualization to help you debug where all the code is coming from.

可以通过这个video学习。

更多Jerry的原创文章，尽在：“汪子熙”: