亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JavaScript Source Map 簡(jiǎn)介

libxd / 1197人閱讀

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

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

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

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

Source map就是干這個(gè)。

有了它，調(diào)試的時(shí)候?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格式簡(jiǎn)單明了：

{
　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決定原始文件和生成文件是如何對(duì)應(yīng)的，看上去不太直白，因?yàn)樗褂昧薆ase64 VQL編碼。

啟用

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

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

如果你喜歡在代碼尾部加注釋，你也可以為生成的JavaScript指定一個(gè)特別的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。只需在編譯時(shí)加上-m參數(shù)即可。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/77984.html

相關(guān)文章

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

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

    wangtdgoodluck 評(píng)論0 收藏0

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

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

    Atom 評(píng)論0 收藏0

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

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

    Y3G 評(píng)論0 收藏0

  • 【翻譯】PostCSS簡(jiǎn)介

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

    Lsnsh 評(píng)論0 收藏0

  • babel插件入門-AST

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

    sanyang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<