如何在Angular生产构建中移除data-qa属性（含/不含Angular CLI方案）

没问题！我来给你分享几个靠谱的方法，不管你用不用Angular CLI，都能轻松把data-qa属性从生产构建里去掉：

一、用Angular CLI的情况 #

方法1：自定义Webpack配置 + PostHTML插件（最推荐） #

这是最常用也最容易上手的方案，步骤很清晰：

1. 先装需要的依赖：

   npm install @angular-builders/custom-webpack posthtml posthtml-remove-attributes --save-dev
   

2. 在项目根目录新建一个custom-webpack.config.js文件，配置PostHTML插件专门移除data-qa属性：

   const posthtml = require('posthtml');
   const removeAttributes = require('posthtml-remove-attributes');
   
   module.exports = {
     module: {
       rules: [
         {
           test: /\.html$/,
           use: [
             {
               loader: 'html-loader',
               options: { minimize: true },
             },
             {
               loader: 'posthtml-loader',
               options: {
                 plugins: [removeAttributes({ attrs: 'data-qa' })]
               }
             }
           ]
         }
       ]
     }
   };
   

3. 改一下angular.json，把默认的构建器换成自定义Webpack的：
   找到projects -> [你的项目名] -> architect -> build，把builder字段改成@angular-builders/custom-webpack:browser，再加上customWebpackConfig配置：

   "build": {
     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./custom-webpack.config.js"
       },
       // 保留你原来的其他配置
     },
     "configurations": {
       "production": {
         // 原来的生产配置不动
       }
     }
   }
   

   要是你平时用ng serve开发，记得把architect -> serve的builder也改成@angular-builders/custom-webpack:dev-server哦。

4. 跑生产构建命令试试：

   ng build --prod
   

   这下打包出来的文件里就再也看不到data-qa属性啦。

方法2：Angular编译器自定义转换（进阶玩法） #

要是你不想加额外插件，也可以直接在Angular编译阶段动手修改模板AST，把data-qa属性删掉。不过这个方法需要你对Angular的编译流程有点了解，步骤相对复杂，适合喜欢折腾的开发者：

• 写一个自定义的TemplateVisitor，遍历模板的抽象语法树，找到带data-qa的属性节点并移除。
• 在tsconfig.json的angularCompilerOptions里引入这个扩展。
  个人还是更推荐第一种方法，性价比更高～

二、不用Angular CLI的情况（自定义Webpack构建） #

如果是自己手动搭的Webpack环境，那就更简单了，直接在Webpack配置里加PostHTML的处理逻辑就行：

1. 先装依赖：

   npm install posthtml posthtml-remove-attributes html-loader posthtml-loader --save-dev
   

2. 在Webpack的规则里添加对.html文件的处理：

   module.exports = {
     // 你的其他Webpack配置
     module: {
       rules: [
         {
           test: /\.html$/,
           exclude: /node_modules/,
           use: [
             'html-loader',
             {
               loader: 'posthtml-loader',
               options: {
                 plugins: [require('posthtml-remove-attributes')({ attrs: 'data-qa' })]
               }
             }
           ]
         }
       ]
     }
   };
   

3. 运行你的生产构建命令（比如webpack --mode production），搞定！

额外小提示 #

• 要是你只想在生产环境删这些属性，还可以通过环境变量控制插件的启用——比如判断process.env.NODE_ENV === 'production'的时候才加载PostHTML插件，开发环境保留data-qa方便测试。
• 除了data-qa，你还可以一次性删多个测试属性，比如把attrs改成['data-qa', 'data-test']就行。

内容的提问来源于stack exchange，提问作者bucicimaci