Source Map的概念

source map顾名思义，就是代码地图，为什么会有这个东西呢，具体的起源等有时间在追溯，先看看这个东西是怎么用的，有什么用。

提到source map，说的最多的是javascript source map，其实并不仅仅是javascrip程序需要生成source map，其他的代码也需要，比如css（尤其是对于一个大型的前端样式库，比如bootstrap等）。

现代javascript程序越来越复杂，尤其是模块化后，一个javascript程序是由很多文件构，为了让浏览器支持这个复杂的js程序，必须使用开发平台的各种构建工具比如webpack，gulp等等对js程序进行压缩，减少体积；合并，减少HTTP请求的次数；甚至是转换，比如把TypeScript转换成标准的javascript。这样就导致，在浏览器中实际运行的javascript代码跟实际的源程序的脱节，这样给调试程序打来问题，浏览器中的错误提示可能很难定位到具体的程序中。

使用less开发的css文件，合并压缩后，也有类似的问题，这时候就需要source map文件

简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

比如构建工具，在生成app.js的同时，生成一个sourcemap文件app.js.map，在app.js文件的末尾添加一行如下的代码

//@ sourceMappingURL=/path/to/app.js.map

如果要使sourcemap文件在调试中起作用，还的浏览器支持，否则也没有用，目前好像只用chrome浏览器支持加载source map文件，chrome的开发者工具，里面的有个设置信息，在工具栏右上角

默认是开启的，这样在调试js的时候就可以看到具体的文件位置了。

下面看看怎么使用构建工具gulp，生成source map文件

一个简单的gulpfile.js文件

// 引入gulp
var gulp = require('gulp');
// 引入gulp-concat插件
var concat = require('gulp-concat');
// 引入gulp-uglify插件
var uglify = require('gulp-uglify');
// 引入gulp-sourcemaps插件
var sourceMap = require('gulp-sourcemaps');
gulp.task('sourcemap',function() {gulp.src('./src/*.js')  .pipe( sourceMap.init() ).pipe( concat('all.js') )  .pipe( uglify() )  .pipe( sourceMap.write('../maps/',{addComment: false}) ).pipe( gulp.dest('./dist/') )
})

1）sourceMap.init( ) 启用sourcemaps功能
2）sourceMap.write( ) 生成记录位置信息的sourcemaps文件
经过 concat 和 uglify ，将生成的all.js 与源文件( src 下的所有js文件 )之间的位置映射信息，生成sourcemaps文件。
sourceMap.write( )，不传参，将会直接在 all.js 尾部，生成sourcemaps信息。
sourceMap.write( path )，将会在指定的 path，生成独立的sourcemaps信息文件。如果指定的是相对路径，是相对于 all.js 的路径。
无法指定路径为 src 目录，否则，sourcemaps文件会生成在 dist 目录下。
addComment : true / false ; 是控制处理后的文件（本例是 all.js ），尾部是否显示关于sourcemaps信息的注释。
不加这个属性，默认是true。设置为false的话，就是不显示。

Source Map的概念相关推荐

【转】webpack中关于source map的配置
Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...
Source Map的原理探究
摘要: Source Map很神奇,它的原理挺复杂的- 原文:source map 的原理探究地址:https://www.cnblogs.com/Wayou/p/understanding_fro ...
Node.js 中 source map 使用问题总结
起源 Node 应用功能越来越复杂,很多业务都开始尝试使用 TypeScript 来开发.现在前端写的 JS 大部分是经过编译过程的,浏览器中通过 source map 的使用,可以很好的解决源码和编 ...
记录webpack的source map使用详细说明
common.js export const show = () => {console.log(1212121)();document.write('hello webpack 11') } ...
Angular 开发中的 Source Map
SourceMaps Demystified (.js.map) 当我们构建 Angular 应用程序时,会创建 js 文件和 .js.map(源映射文件)文件. 从本质上讲,源映射是一个 JSON ...
你知道source map如何帮你定位源码么？
大家好,我是若川.今天分享一篇我们经常会忽略的定位原始代码位置原理的文章.文章不长,例子不错,可以先收藏,有空时动手试试. 学习源码系列.年度总结.JS基础系列前言我们知道,代码上线前要经过压缩, ...
Source Map调试压缩后代码
在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦. 这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代 ...
DevTools failed to load source map: Could not load content for…System error: net::ERR_FILE_NOT_FOUN
DevTools failed to load source map: Could not load content for--System error: net::ERR_FILE_NOT_FOUN ...
微信开发者工具 Source Map 的使用
在小程序后台 ->开发管理 ->运维中心 -> 错误日志中可以看到小程序运行中的报错信息,但是代码都是压缩混淆的,那就需要如何去定位,下面说明说如使用微信开发者工具 Source ...
一文看懂 webpack 的所有 source map ！
一直以来对source map 都懵懵懂懂, 被webpack 所提供的多样的source 给乱花了眼. 这次就决定来一一尝试一下各种source map的区别什么是source map 现代的前端 ...

Source Map的概念

Source Map的概念相关推荐

最新文章

热门文章