共计 3097 个字符，预计需要花费 8 分钟才能阅读完成。
当咱们的 [Angular](https://medium.com/angular-in…
) 应用程序部署到生产环境时，咱们常常会遇到与咱们在开发过程中编辑的不同的代码。咱们的代码在构建过程中会以各种形式进行批改和优化。
TypeScript 被 transpiled, minified 和 uglifed。生成的 JavaScript 包尽可能小，并且可能在浏览器中运行。
所有这些概念都很棒，因为它们进步了咱们应用程序的性能。然而，这也给生产零碎的故障排查带来了一些艰难。
SourceMap 是一个解决方案。
从实质上讲，源映射是一个 JSON 文件，其中蕴含将转译后的代码映射回原始源所需的所有信息。很酷！
从技术上讲，源映射只是一个蕴含以下字段的 JSON 文件：
- version : 示意源映射标准版本
- file : 此源映射所属的转译文件的名称
- sourceRoot : basePath — 源绝对于这里
- sources : 原始源文件的门路（例如 TypeScript 文件）
- sourcesContent : 可选属性，能够蕴含您的整个源代码。当源代码在此属性中内联时，无需托管源代码即可检索。
- names：代码中找到的办法或变量名称
- mappings：这是整个魔术产生的中央。从技术上讲，映射属性是一个十分大的字符串，其中蕴含 Base64 VLQ（可变长度数量）值。这些值有助于找到源文件中的原始地位。
如何检索源映射？
要检索源映射，咱们须要通知浏览器它们所在的地位。咱们能够通过增加以下行在文件开端指定
sourceMappingURL：
例子：
//# sourceMappingURL=pathToSourceMaps有了这些信息，浏览器就能够下载源映射文件并解释其内容以创立映射。
留神：浏览器仅在开发者工具关上时下载源地图。对于普通用户，没有性能影响。
除了在文件开端增加正文之外，您还能够 SourceMap 在获取 minified 的 JavaScript 文件的响应中将门路作为 HTTP 标头的值发送。
SourceMap: pathToSourceMap
第二种可能性使您能够在服务器端切换源映射，而无需更改 minified 之后的 JavaScript 文件。
开发和生产期间的源映射
开发和生产版本不同。
在开发过程中，领有残缺的源图是有意义的，因为咱们专一于工具、开发教训或 hot module 替换。
另一方面，在生产中，咱们专一于性能——应用 small bundles 疾速初始加载。
应该在生产过程中启用源映射吗？
这个问题的答案很大水平上取决于您的我的项目。如果您正在从事开源我的项目，那么必定是这样。
然而咱们大多数人在日常工作中并不从事开源我的项目。在企业我的项目中，您有充沛的理由不想公开您的源代码。
- 咱们不想裸露易于浏览的利用程序代码给外界。
- 更快的构建
- 不想裸露 source map 的提供源头
上面介绍如何在生产环境启用 Source Map，然而不裸露其起源。
Angular CLI 容许咱们配置是否须要源映射。而后它将这些信息传递给底层的 Webpack。
要摸索 Angular 中的源映射，让咱们从一个由 Angular CLI 生成的全新 Angular 我的项目开始。
ng new sourceMapInspector
Component 实现很简略：
public changeTitle(): void {this.title = 'awesome app';}模板里的生产代码：
<button (click)="changeTitle()">Change title</button>应用 ng serve 命令。
源映射帮忙咱们在开发工具中显示咱们的原始源。
咱们当初能够关上 app.component.ts 并在 changeTitle 函数内搁置一个断点。通过单击“更改题目”按钮，咱们而后点击了咱们的断点。
如果咱们查看 main.js 文件的最初一行，咱们能够看到浏览器获取源映射的地位。
//# sourceMappingURL=main.js.map
这对开发十分有用。咱们有残缺的源映射，能够轻松调试咱们的代码。
让咱们检查一下 Angular 中的生产构建在源映射方面的行为。咱们能够应用以下命令运行 prod 构建。
ng build –prod
该 dist 文件夹当初蕴含没有 source map 的捆绑文件。让咱们切换到该 dist 文件夹并在 HTTP 服务器上运行该应用程序，以理解它在生产中的外观。
能够应用 npm 模块 http-server 作为本地 Web 服务器。
http-server 是一个简略的、零配置的命令行 http 服务器，能够装置 npm i -g http-server
因而，让咱们运行咱们的生产版本并关上开发工具来调试咱们的性能。
在生产模式下，没有起源，也没有可供点击的 Webpack 菜单项。
咱们在哪里设置断点？咱们须要手动在转换后的 JavaScript 文件中找到咱们的函数，这很麻烦。
咱们在第 7841 行设置了断点，即便咱们的应用程序只蕴含几行代码。
将源映射增加到 Angular 生产构建
angular.json 文件蕴含一个 architect 属性，容许咱们指定是否要为咱们的生产构建应用源映射。
要启用源映射，咱们须要将 sourceMap 属性更改为 true 或通过传递 –source-map 给咱们的 ng build 命令来笼罩它。
这种办法会将源映射增加到咱们的生产构建中并在生产中获取它们，以便每个人都能够拜访咱们的源。
对源映射的细粒度管制️
Angular 7.2 为咱们提供了对源映射的更细粒度管制。该 sourceMap 属性当初承受具备以下属性的对象，而不是一个简略的 boolean 值。
"sourceMap": {
"hidden": true,
"scripts": true,
"styles": true
}scripts 和 styles 属性容许咱们只为 scripts 或者 styles 生成 source map.
而 hidden 属性，顾名思义，能够生成暗藏的 source map.
源映射自身对于惯例构建或带有暗藏源映射的构建没有区别。只有生成的包在一行中有所不同——webpack 增加的用于检索源映射的正文。
让咱们看一下应用源映射生成的包。
留神最初的一行正文语句。当咱们关上开发工具时，浏览器将解释此正文并尝试获取源映射。当初让咱们看一下应用暗藏源映射生成的包。
咱们能够看到文件开端没有增加正文。因而浏览器不会尝试获取源映射。如果有一种办法能够应用一些简略的 npm 脚本来解决生产环境中的源映射呢？
上传本地源地图
咱们总是能够在本地从新生成源映射并在当前上传它们。
"sourceMap": {
"hidden": true,
"scripts": true,
"styles": true
}接下来，咱们须要创立一个 postbuild 脚本，该脚本仅删除咱们刚刚生成的源映射。
"postbuild": "rm dist/sourceMapInspector/*.map"该 postbuild 脚本是必须的，否则咱们将提供源映射。因为短少 comment，它们不会被解析。但他们依然被提供。
为了在生产中进行调试，咱们手动上传源映射。然而咱们从哪里失去它们呢？咱们刚刚删除了它们。
答案很简略，咱们须要从新生成它们。
"build:sourcemaps": "ng build --prod --output-path=localSourceMaps"咱们当初能够应用 Chrome 开发工具从本地文件系统上传源映射。因而，关上开发工具并右键单击您的 main[hash].js. 当初输出下面脚本生成的源映射的门路。
必须按以下形式增加门路：file///pathToFile.
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
