JavaScript Map 檔案
在 Angular 或類似的 Web 框架中進行開發時，我們使用指令碼化的 JavaScript 檔案作為開發人員的版本選擇。
最近，ES6 及其後續版本已經成為一種方便的 JavaScript 指令碼形式，並且這些修改後的版本需要更少的程式碼行來定義與之前版本的 ES6 相同的功能。
所有瀏覽器均不相容 ECMA Script 的最新更新，引入了 .map 檔案，開發體驗無與倫比。
我們通常將 JavaScript 檔案的縮小後的 uglifying 檔案用於生產用例的瀏覽器。
縮小的檔案本質上是擁擠的，減少了空白，更具體地說，是功能性 js 檔案的壓縮格式。
正如我們所說，原始檔案和縮小檔案在檔案尺寸和內容排列方面存在差異，源對映檔案根據功能範圍為每一行建立適當的對映。
對映約定以行和列的形式返回。此外，如果你使用 ES6 進行編碼並使其可被所有瀏覽器讀取，則源對映檔案會將原始檔案轉換為更適合的編碼格式。
從技術上講，這就是源對映檔案的工作方式，在這裡我們將瞭解如何在本地生成此對映檔案以及轉換後原始檔案的外觀。
在 JavaScript 中安裝 babel 或 webpack 以生成我們的源對映檔案
在 JavaScript 中，要啟用源對映檔案，我們需要安裝 babel 或 webpack。我們將在這裡使用 babel 來生成我們的源對映檔案。
首先，我們將建立一個 index.html 來匯入 example.js 檔案。我們的 examplpe.js 將有一個彙總一些數字的函式，並且程式碼行符合 ES6 約定。
程式碼片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="example.js"></script>
</body>
</html>
var add = (...arr) => {
return arr.reduce((sum, el) =>{
return sum+el;
}, 0)
}
console.log(add(1,2,3));
輸出：
我們將把 index.html 和 example.js 兩個檔案儲存在一個資料夾中（假設我們將其命名為 work）。
我們將開啟 cmd 並將 babel 本地安裝到這個工作目錄中。命令是——
npm install @babel/cli @babel/core @babel/preset-env
點選回車後，你將獲得一個 package.json 檔案、package-lock.json 檔案和一個 node_modules 資料夾。
我們將需要另一個檔案 .babelrc，該檔案將包含以下幾行來完成此任務。
// The file name would be ".babelrc" in the work directory
{
"presets": [
"@babel/preset-env"
]
}
下一個工作是在你的 package.json 檔案中新增一個 npm 指令碼。在你的 package.json 檔案中已經分配了一些 dependencies。
當你首先安裝 babel 軟體包時，預設情況下會新增這些。因此附加的 npm 指令碼將如下所示：
{
"dependencies": {
"@babel/cli": "^7.16.8",
"@babel/core": "^7.16.12",
"@babel/preset-env": "^7.16.11"
},
"scripts": {
"start-babel": "babel example.js --out-file main.dist.js --source-maps"
}
}
在你的 package.json 檔案中新增此部分後不久，轉到 bash 並輸入以下命令。
npm run start-babel
在此之後，你將擁有一個 main.dist.js 檔案和一個名為 main.dist.js.map 檔案的原始檔。main.dist.js 檔案將具有 example.js 檔案的顯式形式。
這個檔案的最後一行會有一個註釋部分，上面寫著 *//# sourceMappingURL=main.dist.js.map*。這確保了對映過程成功執行。
// main.dist.js
"use strict";
var add = function add() {
for (var _len = arguments.length, arr = new Array(_len), _key = 0; _key < _len; _key++) {
arr[_key] = arguments[_key];
}
return arr.reduce(function (sum, el) {
return sum + el;
}, 0);
};
console.log(add(1, 2, 3));
//# sourceMappingURL=main.dist.js.map
// main.dist.js.map
{"version":3,"sources":["example.js"],"names":[],"mappings":";;AAAA,IAAI,GAAG,GAAG,SAAN,GAAM,GAAY;AAAA,oCAAR,GAAQ;AAAR,IAAA,GAAQ;AAAA;;AAClB,SAAO,GAAG,CAAC,MAAJ,CAAW,UAAC,GAAD,EAAM,EAAN,EAAY;AAC1B,WAAO,GAAG,GAAC,EAAX;AACH,GAFM,EAEJ,CAFI,CAAP;AAGH,CAJD;;AAKA,OAAO,CAAC,GAAR,CAAY,GAAG,CAAC,CAAD,EAAG,CAAH,EAAK,CAAL,CAAf","file":"main.dist.js","sourcesContent":["var add = (...arr) => {\r\n return arr.reduce((sum, el) =>{\r\n return sum+el;\r\n }, 0)\r\n}\r\nconsole.log(add(1,2,3));"]}
因此，在完成所有這些任務之後，我們的任務是檢查原始檔案 example.js 是否與傳輸的檔案 main.dist.js 檔案相似。
我們將把 html 檔案的指令碼目錄從 example.js 更改為 main.dist.js 檔案。我們的輸出將與以前一樣。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="main.dist.js"></script>
</body>
</html>
輸出：
まとめ
JavaScript 源對映檔案在除錯 JavaScript 和 CSS 檔案方面取得了突破。特別是轉換為可讀程式碼並正確對映縮小和原始檔案。
這就是 JavaScript 中的 .map 檔案 如何使開發部分保持無錯誤。
