角。从 html 标记中删除属性的构建步骤

Posted 2023-02-22

【中文标题】角。从 html 标记中删除属性的构建步骤

【英文标题】：Angular. Build step to remove attribute from html markup

【发布时间】：2019-11-18 14:55:57

【问题描述】：

我们在标记中使用“data-test”属性来查询测试中的元素。例如：

<div data-test='myDiv'></div>

我们不希望此属性出现在生产版本中。到目前为止，我找到了一种解决方法来创建一个指令，该指令在运行时删除生产构建的属性。这肯定会花费一些 CPU 并且似乎值得怀疑。寻找一种在构建时删除属性的方法。欢迎任何想法。

【问题讨论】：

用正则表达式删除属性的脚本怎么样？

@riorudo 请您详细说明：何时以及如何删除？在 package.json 生产构建脚本的源代码中删除？不想在某些 webpack 构建步骤中在编译期间关心每次构建后还原更改？将有助于链接到合适的 webpack 文档

您可以为此使用自定义 webpack 构建器 - github.com/just-jeb/angular-builders/tree/master/packages/…

@IAfanasov 我正在寻找同样的东西.. 不幸的是我找不到任何东西：/您是否设法在您的应用程序中解决了这个问题？

不。看起来像一个自定义的 webpack 插件可以做到这一点。如果你设法做到了，将感谢分享它（：

【参考方案1】：

查看这篇文章，了解如何在编译（使用 webpack 加载器）或运行时（使用指令）期间删除 data-cy 属性。您可以对任何data-* 属性执行完全相同的步骤（并忽略赛普拉斯的东西）。只需将 data-cy 表达式替换为 data-test 即可。

https://medium.com/agilix/angular-and-cypress-data-cy-attributes-d698c01df062

这至少适用于 Angular6+。