當我們的 [Angular](https://medium.com/angular-in-depth/debug-angular-apps-in-production-without-revealing-source-maps-ab4a235edd85
) 應用程式部署到生產環境時，我們經常會遇到與我們在開發過程中編輯的不同的程式碼。我們的程式碼在構建過程中會以各種方式進行修改和最佳化。

TypeScript 被  transpiled, minified 和 uglifed。生成的 JavaScript 包儘可能小，並且能夠在瀏覽器中執行。

所有這些概念都很棒，因為它們提高了我們應用程式的效能。但是，這也給生產系統的故障排查帶來了一些困難。

SourceMap 是一個解決方案。

從本質上講，源對映是一個 JSON 檔案，其中包含將轉譯後的程式碼對映回原始源所需的所有資訊。很酷！
從技術上講，源對映只是一個包含以下欄位的 JSON 檔案：
- version : 表示源對映規範版本
- file : 此源對映所屬的轉譯檔案的名稱
- sourceRoot : basePath — 源相對於這裡
- sources : 原始原始檔的路徑（例如 TypeScript 檔案）
- sourcesContent : 可選屬性，可以包含您的整個原始碼。當原始碼在此屬性中內聯時，無需託管原始碼即可檢索。
- names：程式碼中找到的方法或變數名稱
- mappings：這是整個魔術發生的地方。從技術上講，對映屬性是一個非常大的字串，其中包含Base64 VLQ（可變長度數量）值。這些值有助於找到原始檔中的原始位置。

![](https://img-blog.csdnimg.cn/img_convert/d61c1c732efe6c1bde0ab4dec4c1fbe7.png)

# 如何檢索源對映？

要檢索源對映，我們需要告訴瀏覽器它們所在的位置。我們可以透過新增以下行在檔案末尾指定 
sourceMappingURL：

例子：

```html
//# sourceMappingURL=pathToSourceMaps
```

有了這些資訊，瀏覽器就可以下載源對映檔案並解釋其內容以建立對映。

注意：瀏覽器僅在開發者工具開啟時下載源地圖。對於普通使用者，沒有效能影響。

除了在檔案末尾新增註釋之外，您還可以SourceMap在獲取 minified 的 JavaScript 檔案的響應中將路徑作為HTTP 標頭的值傳送。

> SourceMap: pathToSourceMap

第二種可能性使您可以在伺服器端切換源對映，而無需更改 minified 之後的 JavaScript 檔案。

# 開發和生產期間的源對映

開發和生產版本不同。

在開發過程中，擁有完整的源圖是有意義的，因為我們專注於工具、開發經驗或 hot module 替換。

另一方面，在生產中，我們專注於效能——使用 small bundles 快速初始載入。

應該在生產過程中啟用源對映嗎？

這個問題的答案很大程度上取決於您的專案。如果您正在從事開源專案，那麼肯定是這樣。

但是我們大多數人在日常工作中並不從事開源專案。在企業專案中，您有充分的理由不想公開您的原始碼。

- 我們不想暴露易於閱讀的應用程式程式碼給外界。
- 更快的構建
- 不想暴露 source map 的提供源頭

下面介紹如何在生產環境啟用 Source Map，但是不暴露其來源。

Angular CLI 允許我們配置是否需要源對映。然後它將這些資訊傳遞給底層的 Webpack。

要探索 Angular 中的源對映，讓我們從一個由 Angular CLI 生成的全新 Angular 專案開始。

> ng new sourceMapInspector

Component 實現很簡單：

```typescript
public changeTitle(): void {
  this.title = 'awesome app';
}
```

模板裡的消費程式碼：

```html
<button>Change title</button>
```

使用 ng serve 命令。

源對映幫助我們在開發工具中顯示我們的原始源。

我們現在可以開啟app.component.ts並在changeTitle函式內放置一個斷點。透過單擊“更改標題”按鈕，我們然後點選了我們的斷點。

如果我們檢視 main.js 檔案的最後一行，我們可以看到瀏覽器獲取源對映的位置。

//# sourceMappingURL=main.js.map
這對開發非常有用。我們有完整的源對映，可以輕鬆除錯我們的程式碼。

![](https://img-blog.csdnimg.cn/img_convert/bc64c2e156cfbadb453cd051e27201ce.png)

讓我們檢查一下 Angular 中的生產構建在源對映方面的行為。我們可以使用以下命令執行 prod 構建。

> ng build --prod

該 dist 資料夾現在包含沒有 source map 的捆綁檔案。讓我們切換到該dist資料夾並在 HTTP 伺服器上執行該應用程式，以瞭解它在生產中的外觀。

可以使用 npm 模組http-server作為本地 Web 伺服器。
http-server 是一個簡單的、零配置的命令列 http 伺服器，可以安裝 npm i -g http-server

因此，讓我們執行我們的生產版本並開啟開發工具來除錯我們的功能。

![](https://img-blog.csdnimg.cn/img_convert/39cee1cc6504f4da11e7f3a808d0691d.png)

在生產模式下，沒有來源，也沒有可供點選的 Webpack 選單項。

我們在哪裡設定斷點？我們需要手動在轉換後的 JavaScript 檔案中找到我們的函式，這很麻煩。
我們在第 7841 行設定了斷點，即使我們的應用程式只包含幾行程式碼。

# 將源對映新增到 Angular 生產構建

angular.json 檔案包含一個 architect 屬性，允許我們指定是否要為我們的生產構建使用源對映。

要啟用源對映，我們需要將 sourceMap 屬性更改為 true或透過傳遞 --source-map 給我們的 ng build 命令來覆蓋它。

這種方法會將源對映新增到我們的生產構建中並在生產中獲取它們，以便每個人都可以訪問我們的源。

## 對源對映的細粒度控制️

Angular 7.2 為我們提供了對源對映的更細粒度控制。該 sourceMap 屬性現在接受具有以下屬性的物件，而不是一個簡單的 boolean 值。

```typescript
"sourceMap": {
  "hidden": true,
  "scripts": true,
  "styles": true
}
```

scripts 和 styles 屬性允許我們只為 scripts 或者 styles 生成 source map.

而 hidden 屬性，顧名思義，可以生成隱藏的 source map.

源對映本身對於常規構建或帶有隱藏源對映的構建沒有區別。只有生成的包在一行中有所不同——webpack 新增的用於檢索源對映的註釋。

讓我們看一下使用源對映生成的包。

![](https://img-blog.csdnimg.cn/img_convert/f40ea9de251af107a4d49ef3e888be18.png)

注意最後的一行註釋語句。當我們開啟開發工具時，瀏覽器將解釋此註釋並嘗試獲取源對映。現在讓我們看一下使用隱藏源對映生成的包。

![](https://img-blog.csdnimg.cn/img_convert/4e645f45b6a088bb2c909ccf5093a0bd.png)

我們可以看到檔案末尾沒有新增註釋。因此瀏覽器不會嘗試獲取源對映。如果有一種方法可以使用一些簡單的 npm 指令碼來處理生產環境中的源對映呢？

# 上傳本地源地圖

我們總是可以在本地重新生成源對映並在以後上傳它們。

```json
"sourceMap": { 
  "hidden": true, 
  "scripts": true, 
  "styles": true 
}
```

接下來，我們需要建立一個 postbuild 指令碼，該指令碼僅刪除我們剛剛生成的源對映。

```json
"postbuild": "rm dist/sourceMapInspector/*.map"
```

該 postbuild 指令碼是必需的，否則我們將提供源對映。由於缺少 comment，它們不會被解析。但他們仍然被提供。

為了在生產中進行除錯，我們手動上傳源對映。但是我們從哪裡得到它們呢？我們剛剛刪除了它們。
答案很簡單，我們需要重新生成它們。

```json
"build:sourcemaps": "ng build --prod --output-path=localSourceMaps"
```

我們現在可以使用 Chrome 開發工具從本地檔案系統上傳源對映。因此，開啟開發工具並右鍵單擊您的main[hash].js. 現在輸入上面指令碼生成的源對映的路徑。

必須按以下方式新增路徑：file///pathToFile.

在生產環境中除錯 Angular 應用程式而不顯示源對映

相關文章