source map 的原理探究

线上产品代码一般是编译过的,前端的编译处理过程包括不限于

转译器/Transpilers (Babel, Traceur)

编译器/Compilers (Closure Compiler, TypeScript, CoffeeScript, Dart)

压缩/Minifiers (UglifyJS)

这里提及的都是可生成source map 的操作。

经过这一系列骚气的操作后,发布到线上的代码已经面目全非,对带宽友好了,但对开发者调试并不友好。于是就有了 source map。顾名思义,他是源码的映射,可以将压缩后的代码再对应回未压缩的源码。使得我们在调试线上产品时,就好像在调试开发环境的代码。

来看一个工作的示例

准备两个测试文件,一个 log.js 里包含一个输出内容到控制台的函数:

log.js

function sayHello(name) { if (name.length > 2) { name = name.substr(0, 1) + '...' } console.log('hello,', name) }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfxdf.html