当我们的[Angular](https://medium.com/angular-in...)应用程序部署到生产环境时，我们经常遇到与我们编辑的代码不同的情况在开发过程中。我们的代码在构建过程中以各种方式进行了修改和优化。TypeScript被转译、缩小和丑化。生成的JavaScript包尽可能小并且能够在浏览器中运行。所有这些概念都很棒，因为它们提高了我们应用程序的性能。但是，这也给生产系统的故障排除带来了一些困难。SourceMap是一种解决方案。本质上，源映射是一个JSON文件，其中包含将转译后的代码映射回原始源所需的所有信息。很酷！从技术上讲，sourcemap只是一个包含以下字段的JSON文件：version：表示sourcemap规范versionfile：此sourcemap所属的翻译文件的名称sourceRoot：basePath—相对于此sources的源：原始路径源文件（如TypeScript文件）sourcesContent：可选属性，可以包含您的整个源代码。在此属性中内联源代码时，可以在不托管源代码的情况下检索它。名称：在代码映射中找到的方法或变量名称：这是整个魔法发生的地方。从技术上讲，地图属性是一个非常大的字符串，其中包含一个Base64VLQ（可变长度数量）值。这些值有助于找到源文件中的原始位置。如何检索源地图？要检索源映射，我们需要告诉浏览器它们所在的位置。我们可以通过添加以下行在文件末尾指定sourceMappingURL：Example://#sourceMappingURL=pathToSourceMaps使用此信息，浏览器可以下载源地图文件并解释其内容以创建地图。注意：浏览器仅在开发者工具打开时下载源地图。对于普通用户，没有性能影响。除了在文件末尾添加注释外，您还可以在响应中将SourceMap路径作为HTTP标头的值发送，以获取缩小的JavaScript文件。SourceMap:pathToSourceMap第二种可能性允许您在服务器端切换源地图，而无需在缩小后更改JavaScript文件。开发和生产期间的源映射对于开发版本和生产版本是不同的。在开发过程中，拥有完整的源地图是有意义的，因为我们关注工具、开发经验或热模块替换。另一方面，在生产中，我们专注于性能-小包的快速初始加载。应该在生产中启用源地图吗？这个问题的答案在很大程度上取决于您的项目。如果您正在从事一个开源项目，那么它当然是。但是我们大多数人在日常工作中并不从事开源项目。在企业项目中，您出于充分的理由不想公开您的源代码。我们不想将易于阅读的应用程序代码暴露给外界。更快的构建不想公开源映射的来源。下面介绍如何在生产环境中启用源映射，但不公开其源代码。AngularCLI允许我们配置是否需要源映射。然后它将此信息传递给底层的Webpack。要探索Angular中的源映射，让我们从AngularCLI生成的全新Angular项目开始。ngnewsourceMapInspectorComponent的实现很简单：publicchangeTitle():void{this.title='awesomeapp';}模板中的消费代码：Changetitle使用ng服务命令。源地图帮助我们在开发工具中显示我们的原始资源。我们现在可以打开app.component.ts并在changeTitle函数中放置一个断点。通过单击“更改标题”按钮，我们然后到达断点。如果我们查看main.js文件的最后一行，我们可以看到浏览器从何处获取源映射。//#sourceMappingURL=main.js.map这个对开发很有用。我们有完整的源映射，可以轻松调试我们的代码。让我们检查一下Angular中的生产构建在源映射方面的行为。我们可以使用以下命令运行产品构建。ngbuild--proddist文件夹现在包含没有源映射的捆绑文件。让我们切换到该dist文件夹并在HTTP服务器上运行该应用程序以查看它在生产环境中的外观。您可以使用npm模块http-server作为本地Web服务器。http-server是一个简单的零配置命令行http服务器，可以使用npmi-ghttp-server安装。所以让我们运行我们的生产构建并打开开发工具来调试我们的功能。在生产模式下，没有来源，也没有可供点击的webpack菜单项。我们在哪里设置断点？我们需要在转换后的JavaScript文件中手动找到我们的函数，这很麻烦。我们在第7841行设置了一个断点，即使我们的应用程序只包含几行代码。将源映射添加到Angular生产构建angular.json文件包含一个架构师属性，它允许我们指定是否要为我们的生产构建使用源映射。要启用源地图，我们需要将sourceMap属性更改为true或通过将--source-map传递给我们的ngbuild命令来覆盖它。这种方法会将源映射添加到我们的生产构建中，并在生产中获取它们，以便每个人都可以访问我们的源。对SourceMaps的细粒度控制?Angular7.2为我们提供了对sourcemaps的更细粒度控制。sourceMap属性现在接受具有以下属性的对象，而不是简单的布尔值。"sourceMap":{"hidden":true,"scripts":true,"styles":true}scripts和styles属性允许我们仅为脚本或样式生成源地图。hidden属性，顾名思义，可以生成隐藏的源映射。源映射本身对于常规构建或使用隐藏源映射的构建没有区别。只有生成的包在一行上有所不同——webpack添加的用于检索源映射的注解。让我们看一下使用源映射生成的包。注意注释语句的最后一行。当我们打开开发工具时，浏览器将解释此注释并尝试获取源映射。现在让我们看一下使用隐藏源映射生成的包。我们可以看到文件末尾没有添加注释。所以浏览器不会尝试获取源地图。如果有一种方法可以使用一些简单的npm脚本来处理生产中的源映射呢？上传本地源地图我们总是可以在本地重新生成源地图，然后再上传。"sourceMap":{"hidden":true,"scripts":true,"styles":true}接下来，我们需要创建一个postbuild脚本来简单地删除我们刚刚生成的源映射。"postbuild":"rmdist/sourceMapInspector/*.map"这个postbuild脚本是必须的，否则我们会提供sourcemaps。由于缺少注释，它们将不会被解析。但他们仍然提供。为了在生产中进行调试，我们手动上传源映射。但是我们从哪里得到它们呢？我们刚刚删除了它们。答案很简单，我们需要重新生成它们。"build:sourcemaps":"ngbuild--prod--output-path=localSourceMaps"我们现在可以使用Chrome开发工具从本地文件系统上传sourcemaps。所以打开开发工具并右键单击您的main[hash].js。现在输入上述脚本生成的源映射的路径。必须按以下方式添加路径：file///pathToFile。更多Jerry原创文章在这里：《王子熙》：
