JavaScript的 sourcemap 的理解

標籤：壓縮檔   開發項目   user   const   blog   cli   script   靜態   rip   

　　當我們在使用vue-cli 開發項目完成後, 就要進行部署，執行npm run build 命令，你會發現它產生.js檔案的同時，還會產生一個對應的.map 檔案。 當時查了一下， .map 檔案的主要作用是，我們對檔案進行壓縮合并之後， 如果壓縮檔出現了報錯，我們能夠準確地定位到報錯的原位置，就是找到報錯在沒有打包之前的未壓縮的檔案中的位置。也僅僅是知道概念而已，現在明白了，就記一下。

　　現在用vue-cli 建立一個項目，使用它預設的內容就可以了，你也可以製造點錯誤，比如，隨便寫幾個ajax 請求，介面肯定是不存在的，肯定有錯誤，如果不寫錯誤，你也可以隨便console.log()點東西，以便我們能準確定位到原始檔案的位置。這時執行npm run build 命令，你可以看到多了dist檔案夾，開啟它， 有static 檔案夾，再開啟，有css 和js 檔案夾，在檔案夾中，你可以看到壓縮的檔案和對應的map 檔案。

　　由於壓縮後的檔案，是要放到伺服器上進行部署的，我們還要寫點伺服器代碼，建立一個檔案夾vue-node， 再npm init -y 初始化它，再npm install express 安裝express 依賴。建立index.js 檔案，和public 檔案夾。我們把dist 目錄中的內容，就是要部署的檔案，複製到 public 檔案夾中。整個目錄如下

　　這時在 index.js寫服務端代碼

const express = require(‘express‘);const app = express();// 主要輸出靜態檔案app.use(express.static(‘public‘))app.listen(3000)

　　這時nodemon index.js  啟動伺服器，在瀏覽器中輸入localhost:3000, 可以看到頁面，這時開啟控制台，介面報錯了

　　getUser 介面報錯，報錯在header.vue中，點擊header.vue， 你看到了原檔案中的位置，這就是sourcemap， .map檔案的作用，我們知道了錯誤在源檔案中的位置。 點擊header.vue 你看到它跳轉到了控制台的sources 面板中。

　

　　這時看sources面板的左側，你發現webpack:// , 點擊它，你會看到src，原來這裡存放我們的原始碼，這也是sourcmap的作用。有了原始碼，什麼都可以做了，點開我們想要看的源檔案，它會顯示在右側，這時我們就可以設定斷點，檢查檔案。

　　當我們把所有的map檔案去掉時，你會發現上面所說的優勢都不存在了。我們可以試一下，開啟vue-node  下面的public 檔案夾，把裡面js 和css map檔案刪掉。這時再重新整理瀏覽器，控制台只看到壓縮後的檔案

　　點擊檔案名稱，進行跳轉，跳轉到也是壓縮的檔案，很難debug.

JavaScript的 sourcemap 的理解