4.1.1什么是源地图？
您可能不了解Source Map，但前端开发通常会压缩JavaScript，CSS以减少体积，从而加快网页的显示速度。 但是，如果发生错误，就会导致无法确定错误，从而产生了Source Map。 举个例子，jQuery 1.9引入了Source Map，打开http://Ajax.googleapis.com/Ajax/libs/jquery/1.9.0/jquery.min.js，最后一行
//@ sourcemappingurl=jquery.min.map
这就是源地图。 这是一个独立的map (实际上是JSON )文件，通常与源代码位于同一目录中。
Source Map经常用于以下情况：
压缩电线，减少体积。 例如，jQuery 1.9的源代码在压缩前为252KB，在压缩后为32KB。
合并多个文件，减少HTTP请求数，仅用于前端。
将其他语言(如CoffeeScript和TypeScript )编译为JavaScript。
本节介绍如何使用Source Map。 本节不讨论map文件中字段的含义。 有兴趣的人请参考参考链接的文章。 接下来，我们将在Node.js环境中以场景1、3为例，介绍如何将uglify-es和TypeScript与Source Map结合使用。
4.1.2 uglify-es
uglify-js是最常见的JavaScript代码压缩工具，但仅支持ES5。 由于uglify-es支持ES6并与uglify-js兼容，因此本部分使用uglify-es。
source-map-support是在Node.js环境中支持Source Map的模块。
要安装uglify-es和source-map-support :
$ npm i uglify-es -g
$ npm i source-map-support
编写测试代码：
app.js
请求(source-map-support ) (.install ) )。
功能say hello (name ) {
throw new error (错误！ ' )
console.log(Hello，${name} ) ) ) ) )。
}
SayHello(world ) ) )。
使用uglify-es压缩代码文件并生成map文件：
$ uglifyjsapp.js-oapp.min.js-- source-map ' URL=app.min.js.map '
按如下方式生成app.min.js和app.min.js.map文件：
app.min.js
require(source-map-support ).install )； 功能say hello (name ) thrownewerror ) ) error！ ' )； console.log(hello，${name} ) sayhello ) (world )；
//# sourcemappingurl=app.min.js.map
app.min.js.map
{'version':3，' sources':['app.js']，' name':['require '，' install '，' sayHello '，' nameme }
在此处运行app.min.js将显示正确的错误堆栈。
$ node app.min.js
/users/NSW BMW/desktop/test/app.js :4
throw new error (错误！ ' )
^
错误：错误！
at say hello (/users/NSW BMW/desktop/test/app.js 3360433609 ) ) ) )。
如果删除app.min.js中最后一行的注释，则重新运行将不会显示正确的错误堆栈。
$ node app.min.js
/users/NSW BMW/desktop/test/app.min.js :1
require(source-map-support ).install )； 功能say hello (name ) thrownewerror ) ) error！ ' )； console.log(hello，${name} ) sayhello ) (world )；
^
错误：错误！
at say hello (/users/NSW BMW/desktop/test/app.min.js 33601336071 )。
source-map-support是通过error.prepare堆栈跟踪实现的，我们已经介绍了它的使用方法，但在此不再介绍。
4.1.3类型脚本
全局安装类型脚本：
$ npm i typescript -g
编写测试代码：
app_ts.ts
declarefunction require (名称：字符串)。
请求(source-map-support ) (.install ) )。
功能say hello (name : string ) : any {
throw new error (错误！ ' )
}
SayHello(world ) ) )。
执行：
$ tsc --sourceMap app_ts.ts
生成app_ts.js和app_ts.js.map，然后按如下方式运行app_ts.js :
$ node app_ts.js
/users/NSW BMW/desktop/test/app _ ts.ts :5
throw new error (错误！ ' )
^
错误：错误！
at say hello (/users/NSW BMW/desktop/test/app _ ts.ts 33605:9 )。
4.1.4资源映射支持的高级使用方法
可以在调用install方法时传递retrieveSourceMap参数来定制Source Map的处理。
require (源-映射-支持).install({ )。
retrievesourcemap 3360功能{
if(source==='compiled.js ' )。
返回{
url: 'original.js '，
map : fs.readfile sync (compiled.js.map )、() utf8 ) ) ) ) ) ) ) ) )。
}
}
返回空值
}
() )
例如，将所有map文件缓存在内存中，而不是磁盘中。
4.1.5参考链接