将外部 javascript 注入 html 脚本标签以获得 cobertura 代码覆盖结果答案

【问题标题】：Inject external javascript into html script tag for cobertura code coverage results将外部 javascript 注入 html 脚本标签以获得 cobertura 代码覆盖结果
【发布时间】：2019-01-02 21:47:18
【问题描述】：

类似于this我想注入html外部的js文件。

我的问题的背景——我正在使用 cobertura 为我的 Angular6 应用程序生成代码覆盖率。在我的 vsts 构建中，我发布了代码覆盖率结果，但是当需要触发 .js 文件时单步执行文件链接时，我在浏览器中遇到错误：

Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

我认为最好的解决方案是执行一个脚本，将 javascript 代码直接注入到 html 中，而不是从外部链接到它。

例如说html是这样的：

<html>

   <script src="code.js"></script>
...
</html>

然后在运行像injector.js 这样的脚本之后：node ./injector.js

html 会变成：

<html>

   <script>
      function hello() {
         console.log('hello');
      }
   </script>
</html>

你怎么能做到这一点？

或者有没有更好的办法解决这个问题？

【问题讨论】：

请检查这个类似的线程进行故障排除：stackoverflow.com/questions/34315723/…
这个帖子供您参考：stackoverflow.com/questions/24453898/…

标签： javascript angular code-coverage azure-pipelines cobertura

【解决方案1】：

因为您的开发完全基于 NodeJs。

你可以简单地写一个nodejs脚本

使用 Glob 模块使用覆盖文件夹中的模式获取所有 HTML 文件
遍历每个生成的报告 HTML 并内联 CSS 和脚本。
保存
然后将您的代码覆盖率报告发布为工件。

在 NPM 模块 之后，只需少量优化即可完成内联工作 https://www.npmjs.com/package/vsts-coverage-styles

免责声明： 我写了上面提到的简单可重用的 npm 包。

【讨论】：