如何使用Angular CLI生成源地图并将其上传到Sentry？

Question

设置源地图的方法有两种：将其托管在站点上并在捆绑的文件中引用，或者将其直接上传到哨兵之类的服务中。我正在尝试完成后者。问题在于，如果没有将文件路径写入捆绑文件，似乎就无法使用angular cli生成源地图。

我的第一个想法是拥有两个版本-一个带有源映射生成，另一个不带。然后，我只部署没有源映射的构建，并将包含它们的构建上载到哨兵。那是行不通的，因为包的文件名是不同的（角度cli使用文件哈希作为缓存清除的文件名，当您生成源地图时，它将路径添加到.map文件作为注释的末尾，从而导致哈希和文档名称）。

我的另一个选择是使用源地图进行构建，将其上传到哨兵，然后在部署站点之前删除地图文件。那里的问题是捆绑文件仍然包含对现在不存在的映射文件的引用。这本身不应该是一个问题，但是它可能会引起扩展程序或浏览器的问题，并且似乎是一个棘手的解决方案。

您将如何在构建过程中实施类似的操作？

Answer 1

Sentry官方推荐通过sentry-webpack-plugin或sentry-cli上传源地图。

CLI 文档没有提到发布源映射的问题，但许多人询问有关插件的问题：1 , 2 , 3 , 4 , 5。

社区似乎已经确定了上传后删除源地图的解决方案。这可以通过上述问题中讨论的不同方式来实现，例如

1、简单rm -rf dist/**/*.map

2、各种webpack插件，最著名的是clean-webpack-plugin

3、一个自定义的 webpack 插件，例如这个：

webpack.config.js

const glob = require("glob");
const { removeSync } = require("fs-extra");

...
plugins: [
  ...
  {
    apply: compiler =>
      compiler.hooks.done.tap("CleanJsMapPlugin", () => {
        glob.sync(".webpack/**/*.js.map").forEach(f => removeSync(f));
      }),
      cb();
  },
  ...
]