logo标签列表

在不指定特定环境的情况下在多个环境上运行npm run build。

angularnpm
4

我使用带有多个环境的 Angular 项目。每次构建一个环境时，花费的时间太长了。我该如何缩短时间？我已经在这里添加了我的项目配置。

package.json:

{
  "name": "test",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=10240 ./node_modules/@angular/cli/bin/ng serve --aot",
    "build": "rimraf dist && node --max_old_space_size=10240 ./node_modules/@angular/cli/bin/ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:universal": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:universal": "node dist/server.js",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "postbuild": "node zipbuild"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "7.3.3",
    "@angular/animations": "7.2.6",
    "@angular/cdk": "^7.3.3",
    "@angular/cli": "7.3.3",
    "@angular/common": "7.2.6",
    "@angular/compiler": "7.2.6",
    "@angular/core": "7.2.6",
    "@angular/flex-layout": "7.0.0-beta.23",
    "@angular/forms": "7.2.6",
    "@angular/http": "7.2.6",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "7.2.6",
    "@angular/platform-browser-dynamic": "7.2.6",
    "@angular/platform-server": "7.2.6",
    "@angular/router": "7.2.6",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.3",
    "@angular/compiler-cli": "7.2.6",
    "@angular/language-service": "7.2.6",
    "@types/jasmine": "~3.3.9",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "^11.9.5",
    "codelyzer": "^4.5.0",
    "css-loader": "2.1.0",
    "jasmine-core": "^3.3.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.2",
    "ts-node": "^8.0.2",
    "tslint": "^5.13.0",
    "typescript": "3.2.4"
  }
}

angular.json:

    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "test": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist",
                "index": "src/index.html",
                "main": "src/main.ts",
                "tsConfig": "src/tsconfig.app.json",
                "polyfills": "src/polyfills.ts",
                "assets": [
                  "src/assets",
                  "src/favicon.ico",
                  "src/web.config"
                ],
                "styles": [
                  "src/styles.scss"
                ],
                "scripts": [
                  "src/assets/SigWebTablet.js"
                ]
              },
              "configurations": {
                "demo": {
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "extractCss": true,
                  "namedChunks": false,
                  "aot": true,
                  "extractLicenses": true,
                  "vendorChunk": false,
                  "buildOptimizer": true,
                  "outputPath": "dist/demo",
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.demo.ts"
                    }
                  ]
                },
"demo1": {
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "extractCss": true,
                  "namedChunks": false,
                  "aot": true,
                  "extractLicenses": true,
                  "vendorChunk": false,
                  "buildOptimizer": true,
                  "outputPath": "dist/demo",
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.demo.ts"
                    }
                  ]
                }
              }
            },
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "options": {
                "browserTarget": "test:build"
              },
              "configurations": {
                "production": {
                  "browserTarget": "test:build:production"
                },
                "sacramento": {
                  "browserTarget": "test:build:sacramento"
                },
                "denver": {
                  "browserTarget": "test:build:denver"
                },
                "orange": {
                  "browserTarget": "test:build:orange"
                },
                "slo": {
                  "browserTarget": "test:build:slo"
                }
              }
            },
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "atims-prebook:build"
              }
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "src/test.ts",
                "karmaConfig": "./karma.conf.js",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.spec.json",
                "scripts": [],
                "styles": [
                  "src/styles.scss"
                ],
                "assets": [
                  "src/assets",
                  "src/favicon.ico"
                ]
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [
                  "src/tsconfig.app.json",
                  "src/tsconfig.spec.json"
                ],
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            },
            "server": {
              "builder": "@angular-devkit/build-angular:server",
              "options": {
                "outputPath": "dist/server",
                "main": "main.server.ts",
                "tsConfig": "tsconfig.server.json"
              }
            }
          }
        },
        "test-e2e": {
          "root": "",
          "sourceRoot": "e2e",
          "projectType": "application",
          "architect": {
            "e2e": {
              "builder": "@angular-devkit/build-angular:protractor",
              "options": {
                "protractorConfig": "./protractor.conf.js",
                "devServerTarget": "test:serve"
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [
                  "e2e/tsconfig.e2e.json"
                ],
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            }
          }
        }
      },
      "defaultProject": "test",
      "schematics": {
        "@schematics/angular:class": {
          "spec": false
        },
        "@schematics/angular:component": {
          "spec": false,
          "prefix": "pbpc",
          "styleext": "scss"
        },
        "@schematics/angular:directive": {
          "spec": false,
          "prefix": "pbpc"
        },
        "@schematics/angular:guard": {
          "spec": false
        },
        "@schematics/angular:module": {
          "spec": false
        },
        "@schematics/angular:pipe": {
          "spec": false
        },
        "@schematics/angular:service": {
          "spec": false
        }
      }
    }

我使用命令 "npm run build -- --c demo" 和 "npm run build -- --c demo1" 在不同的命令提示符中进行构建。每个单独的构建大约需要20到30分钟。我们是否有任何选项可以在单个查询中构建？

2个回答
7

你可以将命令一起执行，像这样：

npm run build -- --c demo && npm run build -- --c demo1

或者您可以使用 package.json 脚本指定自己的命令：

{
  "name": "myApp",
  "version": "0.0.0",
  "engines": {
    "node": "10.13.0",
    "npm": "6.4.1"
  },
  "scripts": {
    "test": "jest src/app",
    "test:watch": "jest src/app --watch",
    "lint": "tslint -c tslint.json 'src/app/**/*.ts' --project src/tsconfig.json",
    "appStart": "npm run build -- --c demo && npm run build -- --c demo1" // This line
  },
}

然后只需要运行： 
npm run appStart

注意：

有更多选项可用于执行多个命令，这是一个秘籍：

A; B    # Run A and then B, regardless of success of A
A && B  # Run B if and only if A succeeded
A || B  # Run B if and only if A failed
A &     # Run A in background.
谢谢。它运行得很好。我想知道，是否可能只构建一个环境，并且我们可以更改内置文件的配置设置以用于其余环境。因为单个构建本身需要30分钟。有没有解决方案？我期望像ASP.NET发布过程一样。 - Venkateswaran R
很高兴我能帮到你(: 不确定我是否理解你的问题。可以只构建一个环境=是的。更改构建文件中的配置设置=不确定我是否理解。构建所需的时间=似乎是一个新问题，您需要提供更多信息来询问。构建通常不应该花费太长时间。 - MCMatan
谢谢您提供的信息。我会另外发一个新问题来询问。 - Venkateswaran R
当然，很抱歉我无法在这里提供帮助，似乎没有足够的信息来解决构建时间长的原因，可能有几个原因。如果此答案解决了您最初的问题，请接受它。 - MCMatan
@venkateswaran R，我需要同一个单一的构建版本，它应该基于部署环境中的动态值工作。我不想为每个环境获取单独的构建版本。你有关于这个的任何信息吗？ - luvking
0

你可以使用 child_process 和 Promise 编写一个 Node.js 程序来并行运行多个命令。

1
目前你的回答不够清晰，请[编辑]以添加更多细节，帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接