如何使用 Angular CLI 生成 sourcemaps 并将它们上传到 Sentry？

Question

有两种设置源地图的方法：将它们托管在网站上并在捆绑文件中引用，或者将它们直接上传到像哨兵这样的服务。我正在努力完成后者。问题是，如果不将文件路径写入捆绑文件，似乎无法使用 angular cli 生成源映射。

我的第一个想法是有两个构建 - 一个生成源映射，一个不生成。然后我会在没有源映射的情况下部署构建并将构建与它们一起上传到哨兵。这不起作用，因为包文件名不同（angular cli 使用文件哈希作为缓存清除的文件名，当您生成 sourcemaps 时，它会将路径添加到 .map 文件作为最后的注释导致更改哈希和文件名）。

我的另一个选择是使用 sourcemaps 构建，将它们上传到 sentry，然后在部署站点之前删除地图文件。但这里的问题是捆绑文件仍然包含对现在不存在的地图文件的引用。这本身不应该是一个问题，但它可能会引发扩展或浏览器的问题，并且看起来像是一个 hackish 解决方案。

你会如何在构建过程中实现这样的东西？

Answer 1

Here 是解释如何将 angular sourcemaps 上传和监控到 sentry 的文章。

Answer 2

如评论中所述，您可以像这样在 angular.json 文件中启用 sourceMaps：

 "configurations": {
  "production": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "hidden": true
    },

此外，我建议您在上传到 sentry 之后和部署之前删除 .map 文件。所以在你的 ci 添加这一行：

rm -rf dist/YOUR_PROJECT/*.map

Answer 3

official recommendation of Sentry is to upload source maps via sentry-webpack-plugin or sentry-cli.

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

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

1，简直rm -rf dist/**/*.map

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

3、一个自定义的webpack插件如this one:

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();
  },
  ...
]

如何使用 Angular CLI 生成 sourcemaps 并将它们上传到 Sentry？

How to generate sourcemaps using Angular CLI and upload them to Sentry?

angular

continuous-integration

source-maps

sentry