Question

我正在尝试从Angular 7应用程序的html文件中删除不必要的Cypress属性。

我找到了这个https://www.google.com/url?q=https://www.siteB.com/modB/8988

所以我添加到了angular.json：

"build": {
  "builder": "angular-cli-builders:custom-webpack-browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack/webpack.extra.js",
      "mergeStrategies": {
        "externals": "append"
      }
    },

当我使用ng build时会删除属性，但是当我使用ng build --prod时会不会删除属性，为什么？

我也试图在此处添加它，但没有成功：

 "configurations": {
   "production": {
     "customWebpackConfig": { [...]

Answer 1

您必须在build命令中指定它，首先安装ngx-build-plus

npm i -D ngx-build-plus

然后使用

ng build --prod  --extra-webpack-config webpack.extra.js

这是我的示例，我使用自定义的webpack配置从构建包中删除未使用的本地语言：

我的webpack.extra.js与package.json位于同一目录

const webpack = require('webpack');
  module.exports = {
   plugins: [
       new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en|fr/),
   ],
};

然后使用命令

ng build --prod  --extra-webpack-config webpack.extra.js

Answer 2

@angular-builders/custom-webpack有四个选项，具体取决于您的构建（通用，开发等）。阅读these simple instructions后，实际上非常容易。

Answer 3

此问题中引用的solution on Medium对于Angular 8+已过时。

首先，不建议使用angular-cli-builders npm软件包。您将需要使用与您的Angular版本相对应的@angular-builders/custom-webpack版本。

然后，如果您的构建使用的是提前进行的编译-大多数产品配置将使用该编译-那么在源.html文件中截取和替换data-cy属性非常困难。我可以可靠地使它起作用的唯一方法是检查生成的.js输出，并替换其中的属性。

以下是Angular 9工作angular.json文件的相关部分：

{
  "projects": {
    "datacy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "sourceMap": true,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "customWebpackConfig": {
                "path": "./webpack-config.prod.ts",
                "mergeStrategies": {
                  "module.rules": "prepend"
                }
              },
              "optimization": true,
              "aot": true,
              ...

webpack.config.prod.ts

import * as path from 'path';
import * as webpack from 'webpack';

export default {
  module: {
    rules: [{
      test: /\.js$/,
      use: [{ loader: path.resolve('./data-cy-loader.ts') }],
    }],
  },
} as webpack.Configuration;

data-cy-loader.ts

/*
  HTML formatting looks like <element data-cy="value">
  Inlined within a javascript string, it looks like <element data-cy=\"value\">

  Compiled AOT, the element attributes are turned into an array:
    [["class", "cssClassName"], ["data-cy", "value"], ...]

  The data-cy attribute may appear at the start, middle, or end of this array.
*/
export default (source: string) => {
  if (source.indexOf('data-cy') >= 0) {
    return source.replace(/\["data-cy" ?,"([^"]*)"\],/g, '')              // ["data-cy", "..."], variants
                 .replace(/, ?\["data-cy", ?"([^"]*)"\]/g, '')            // , ["data-cy", "..."]] variant
                 .replace(/(\[")?data-cy(=|(",))\\?"([^"]*)"(\])?/g, ''); // [["data-cy","..."]] and html variants
  }
  return source;
};

customWebpackConfig在ng build --prod在Angular中不起作用

3 个答案: