成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript Source Map 簡介

libxd / 1139人閱讀

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

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

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

如果轉(zhuǎn)換代碼的時候，我們能記錄原始代碼和生成的代碼行數(shù)間對應(yīng)的關(guān)系，那該有多好啊。

Source map就是干這個。

有了它，調(diào)試的時候?qū)⒅苯语@示原始代碼，而不是生成的代碼。多方便！

使用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是轉(zhuǎn)換前的所有變量名和屬性名。mappings決定原始文件和生成文件是如何對應(yīng)的，看上去不太直白，因為它使用了Base64 VQL編碼。

啟用

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

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

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

X-SourceMap: /path/to/script-min.js.map
調(diào)試

新版的Google Chrome的Developer tools和Firefox的Firebug都支持。其中，F(xiàn)irefox是默認(rèn)開啟的。

CoffeeScript

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/77984.html

相關(guān)文章

  • [email protected]研究筆記【03】- devtool

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

    wangtdgoodluck 評論0 收藏0

  • 萌新誤入vue-loader洞穴 -- sourcemap

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

    Atom 評論0 收藏0

  • WebPack+React.Js+BootStrap 實現(xiàn)進制轉(zhuǎn)換工具

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

    Y3G 評論0 收藏0

  • 【翻譯】PostCSS簡介

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

    Lsnsh 評論0 收藏0

  • babel插件入門-AST

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

    sanyang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<