最近負(fù)責(zé)做一個比較大型的前端編輯器項目豺总，里面涉及很多前端npm包相互引用，為了更好的調(diào)試择懂，需包與包的引用之間能夠通過devtool調(diào)試喻喳，但是為了使用調(diào)試功能，必須source-map功能正常使用困曙。
理想很完美 現(xiàn)實很殘酷表伦，業(yè)務(wù)項目Webpack啟用后谦去，控制臺爆Warning ‘Failed to parse source map from ’，下面就一探究竟蹦哼。
分析warning之前鳄哭，先簡單了解source-map的背景與原理。
一纲熏、背景
隨著瀏覽器的性能與兼容性越來越好妆丘，業(yè)務(wù)邏輯的前移也越多，很多業(yè)務(wù)邏輯與效果讓js來承擔(dān)赤套，加之代碼也分模塊書寫飘痛，源代碼都需要轉(zhuǎn)換與壓縮后才能投入生產(chǎn)使用。
源代碼壓縮后的代碼容握，已經(jīng)與源代碼相差甚遠(yuǎn)宣脉，如果線上有錯，debug變的困難重重
為了解決這個問題，發(fā)明了source-map這個玩意
二、source-map
source-map文件是一個json數(shù)據(jù)鞭光，目前在版本3的格式如下叫挟。
{
"version": 3, // 文件版本，必須是個正整數(shù)
"file": "out.js", // 編譯器生成后的文件
"sourceRoot": "", // 源文件相對路徑胶惰，如果都在當(dāng)前路徑上，為空
"sources": [], // 源文件列表
"sourcesContent": [], // 源文件配置，當(dāng)沒有配置source的時候則使用這個
"names": [], // 變量列表
"mappings": "" // 映射表
}
mappings 數(shù)據(jù)結(jié)構(gòu)
- 生成后的文件蜡励，每一行的映射片段都會以分號（；）分隔開來阻桅，所以第一個分號前的內(nèi)容就是對應(yīng)源代碼的第一行凉倚，以此類推
- 第二層是位置對應(yīng)，以逗號（嫂沉，）表示稽寒，每個逗號對應(yīng)轉(zhuǎn)換后源碼的一個位置，所以第一個逗號前的內(nèi)容趟章，就是對應(yīng)該行源碼的第一個位置杏糙，一次類推
- 第三層是位置轉(zhuǎn)換，以VLQ編碼表示蚓土，代表位置對應(yīng)的轉(zhuǎn)換前的源碼位置
每個位置的映射宏侍，從左算起，有如下含義
- 第一位蜀漆，表示這個位置在轉(zhuǎn)換后的代碼的第幾列
- 第二位谅河，表示這個位置屬于sources屬性中的哪一個文件
- 第三位，表示這個位置屬于轉(zhuǎn)換前代碼的第幾行
- 第四位，表示這個位置屬于轉(zhuǎn)換前代碼的第幾列
- 第五位旧蛾，表示這個位置屬于names屬性中的哪一個變量
webpack配置
業(yè)務(wù)項目配置
{
devtool: "source-map"
}
但要加載npm里面的source-map文件莽龟，需要借助loader(source-map-loader)
配置項如下
module.exports = {
module: {
rules: [
{
test: /\.js$/,
enforce: "pre",
use: ["source-map-loader"],
},
],
},
};
配置完成后，借助chrome開發(fā)工具就可以使用與打斷點了
參考目錄
