JavaScript Source Map 簡介

libxd 發布于2019-08-19 14:27 / 1133人閱讀

摘要：為了提高性能，通常需要通過壓縮和合并之后才能投入生產環境。多方便使用生成使用家的格式格式簡單明了是的版本，是生成的文件，是原始代碼所在的目錄，留空表示同一目錄。是原始代碼，是轉換前的所有變量名和屬性名。其中，是默認開啟的。

為了提高性能，JavaScript通常需要通過壓縮和合并之后才能投入生產環境。如果使用CoffeeScript，還需要進行編譯。

這就意味著，編輯的代碼和運行的代碼不一樣。JavaScript的解釋器的報錯信息的行數是針對生成的代碼的，行數與原來的代碼不對應，內部變量也改了名字。于是調試的時候我們就會感到茫然無措。

如果轉換代碼的時候，我們能記錄原始代碼和生成的代碼行數間對應的關系，那該有多好啊。

Source map就是干這個。

有了它，調試的時候將直接顯示原始代碼，而不是生成的代碼。多方便！

使用Source map 生成

使用Google家的closure compiler：

java -jar compiler.jar  
     --js script.js 
     --create_source_map ./script-min.js.map 
     --source_map_format=V3 
     --js_output_file script-min.js

格式

Source map格式簡單明了：

{
　version : 3,
　file: "out.js",
　sourceRoot : "",
　sources: ["foo.js", "bar.js"],
　names: ["src", "maps", "are", "fun"],
　mappings: "AAgBC,SAAQ,CAAEA"
}

version是 Source map 的版本，file是生成的文件，sourceRoot是原始代碼所在的目錄，留空表示同一目錄。sources是原始代碼，names是轉換前的所有變量名和屬性名。mappings決定原始文件和生成文件是如何對應的，看上去不太直白，因為它使用了Base64 VQL編碼。

啟用

只要在生成的代碼的尾部加上指向source map文件位置的一行就可以了：

//@ sourceMappingURL=/path/to/script-min.js.map

如果你喜歡在代碼尾部加注釋，你也可以為生成的JavaScript指定一個特別的header：

X-SourceMap: /path/to/script-min.js.map

調試

新版的Google Chrome的Developer tools和Firefox的Firebug都支持。其中，Firefox是默認開啟的。

CoffeeScript

CoffeeScript 1.6.1以上版本支持 source map。只需在編譯時加上-m參數即可。

云服務器 GPU云服務器 source-map javascript簡介 javascript語言簡介 javascript技術簡介

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/77984.html

webpack@4.32.2研究筆記【03】- devtool

摘要：簡介選項用于控制是否需要生成，以及如何生成。表示把每一個模塊文件都轉換為字符串，并且在每一個模塊代碼的尾部添加文件名，并使用執行。通過來處理已有的。優點是不需要建立和部署內網的服務器，缺點是無法直接線上源碼。簡介 ? devtool選項用于控制是否需要生成source map，以及如何生成source map。源碼地址什么是source map？ ? source ma...

wangtdgoodluck 2019-08-23 18:01 評論0 收藏0
萌新誤入vue-loader洞穴 -- sourcemap

摘要：今天的主線任務是，稍微了解下的這里簡單記錄下打怪經歷故事背景大祭司布魯梅爾，跟玩家說在杰羅瓦鎮的西北方有一個迷宮，里面有個被關閉了年的魔物，我們需要把這個魔物干掉，正好以此來測試下玩家是否具備開啟者的資格，也就是戰斗系轉職資格。今天的主線任務是，稍微了解下vue-loader的sourcemap 這里簡單記錄下打怪經歷故事背景大祭司布魯梅爾，跟玩家說在杰羅瓦鎮的西北方有一個迷宮，...

Atom 2019-08-21 11:24 評論0 收藏0
WebPack+React.Js+BootStrap 實現進制轉換工具

摘要：的作用是獲取用戶輸入的數據，當輸入框的值發生改變時，對應的事件響應會被調用也就是函數，其對進行了設置，并內部有回調函數告訴父級組件有屬性發生變化。于是我們就在這個函數中調用進制轉換的函數并把結果呈現出來，這樣就實現了數據的傳遞功能了。一.WebPack入門 1.WebPack簡介 WebPack是模塊打包機：分析項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的...

Y3G 2019-08-20 11:40 評論0 收藏0
【翻譯】PostCSS簡介

摘要：許多開發人員花時間在使用的預處理器上如和。傳統的預處理器的問題不能擴展。有些預處理器提供諸如的功能，可以徹底不使用它們。每個預處理器已經有了自己的標準。如下它被翻譯成嗯我從來沒有說過所有的插件都是有用的結束語和預處理器是偉大的。許多開發人員花時間在使用CSS的預處理器上如less,sass和stylus。這些工具已經成為Web開發的重要組成部分。寫一個網站的樣式，不使用嵌套，變量或混...

Lsnsh 2019-08-30 12:59 評論0 收藏0
babel插件入門-AST

摘要：是一個對象，它表示兩個節點之間的連接。接著返回一個對象，其屬性是這個插件的主要節點訪問者。所以上面的執行方式是運行引入了自定義插件的打包文件現在為明顯減小，自定義插件成功插件文件目錄覺得好玩就關注一下歡迎大家收藏寫評論目錄 Babel簡介 Babel運行原理 AST解析 AST轉換寫一個Babel插件 Babel簡介 Babel 是一個 JavaScript 編譯器,它能將es...

sanyang 2019-08-22 15:53 評論0 收藏0