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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular 开发中的 Source Map的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。