使用 Angular 进行 Chrome 扩展开发：如何包含源映射

Question

在 Windows 10 我有这个讨厌的问题，Chrome 不允许我提取以 chrome 扩展协议处理程序开头的 map 文件：

DevTools 无法加载 SourceMap：无法加载 chrome-extension://ophhkjncpgcjadncildcofemdojplgpp/main.js.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME

如何调试基于 Angular 的 Chrome 扩展 web 页面？

使用 Chrome 89 和 90 进行测试。使用 Angular 11。

使用https://github.com/larscom/ng-chrome-extension作为入门项目。

Answer 1

我能够将 map 文件内联到生成的 javascript 文件中。 Angular cli 本身不提供配置设置来强制执行此行为。 我应用ngx-build-plus ：

npm i -D ngx-build-plus

将原理图应用于您的 Angular 项目：

ng add ngx-build-plus

将 ngx-build-plus 插件文件添加到您的项目中，例如名称为build-customization-plugin.js ：

const { mergeWithCustomize, customizeObject } = require('webpack-merge');
const webpack = require("webpack");

exports.default = {
    config: function (cfg) {       
        // first, we replace devtool in the webpack used by the angular cli to have the value 'inline-source-map'
        const strategy = mergeWithCustomize({
            customizeObject: customizeObject({
                'devtool': 'replace'
            })
        });
        const result = strategy(cfg, {
            devtool: 'inline-source-map'
        });

        // then we find SourceMapDevToolPlugin and remove it
        // This is because we should never use both the devtool option and plugin together.
        // The devtool option adds the plugin internally so you would end up with the plugin applied twice.
        // See https://webpack.js.org/configuration/devtool/
        const index = result.plugins.findIndex((plugin) => {
            return plugin instanceof webpack.SourceMapDevToolPlugin;
        });
        result.plugins.splice(index, 1);

        return result;
    }
}

使用附加的--plugin参数运行 Angular cli：

ng build --plugin ~build-customization-plugin.js

波浪号 (~) 强制 ngx-build-plus 查看当前目录，而不是解析到节点模块。

Package.json 条目：

• “ngx-build-plus”：“^11.0.0”
• "@angular-devkit/build-angular": "~0.1102.11" 可传递安装 "webpack-merge": "5.7.3"

注意：我的解决方案基于使用merge.strategy的示例。 这导致运行时错误merge.strategy is not a function 。 我猜webpack-merge在从主要版本 4 迁移到 5 时更改了其 API。5.0.0 于 2020 年 8 月左右推出。