如何配置Angular项目支持npm run build:production构建命令？

我的Angular项目目前可通过以下命令构建生产环境包：

npm run build --production

也可通过以下命令构建：

npm run build -- --c production

但我希望使用冒号（:）的形式，执行npm run build:production来实现相同的构建效果，请问是否可行？

附上项目的package.json文件内容：

{"name": "@coreui/lutosa-obs","version": "0.00.1","description": "Lutosa OBS Portal","license": "MIT","scripts": {"ng": "ng","postinstall": "ngcc --properties es2015 browser module main --first-only","start": "ng serve","build": "ng build --prod --aot --build-optimizer --common-chunk --vendor-chunk --optimization --progress","test": "ng test","lint": "ng lint","e2e": "ng e2e","prettier": "prettier --write \\\"{,!(node_modules|dist|build|coverage)/**/}*.{js,jsx,ts,json}\\\"","pre-commit": "npm run lint && npm run prettier","extract-i18n": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,nl,fr,es,it,de}.json --format namespaced-json --sort"},"private": true,"husky": {"hooks": {"pre-commit": "npm run pre-commit"}},"dependencies": {"@angular/animations": "^11.1.0","@angular/cdk": "^11.1.0","@angular/common": "^11.1.0","@angular/compiler": "^11.1.0","@angular/core": "^11.1.0","@angular/forms": "^11.1.0","@angular/localize": "^11.1.0","@angular/platform-browser": "^11.1.0","@angular/platform-browser-dynamic": "^11.1.0","@angular/router": "^11.1.0","@coreui/angular": "~2.11.1","@coreui/coreui": "^2.1.16","@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1","@coreui/icons": "^2.0.0-rc.0","@coreui/icons-angular": "1.0.0-alpha.3","@fortawesome/angular-fontawesome": "^0.8.2","@fortawesome/fontawesome-svg-core": "^1.2.34","@fortawesome/free-brands-svg-icons": "^5.15.2","@fortawesome/free-regular-svg-icons": "^5.15.2","@fortawesome/free-solid-svg-icons": "^5.15.2","@ng-select/ng-select": "^6.1.0","@ngrx/store": "^11.0.1","@ngx-translate/core": "^13.0.0","@ngx-translate/http-loader": "^6.0.0","@rxweb/reactive-form-validators": "^2.1.2","@uiowa/digit-only": "^2.2.3","ag-grid-angular": "^25.1.0","ag-grid-community": "^25.1.0","bootstrap": "^4.6.0","bs-stepper": "^1.7.0","chart.js": "^2.9.4","classlist.js": "^1.1.20150312","cookieconsent": "^3.1.1","core-js": "^3.8.3","lodash": "^4.17.21","messageformat": "^2.3.0","moment": "^2.29.1","moment-timezone": "^0.5.33","ng-lazyload-image": "9.1.0","ngrx-store-localstorage": "^11.0.0","ngx-avatar": "^4.1.0","ngx-bootstrap": "^6.2.0","ngx-cookieconsent": "^2.2.3","ngx-editor": "^9.0.2","ngx-perfect-scrollbar": "^10.1.0","ngx-toastr": "^13.2.1","ngx-translate-cache": "^9.0.2","ngx-translate-messageformat-compiler": "^4.9.0","primeflex": "^2.0.0","primeicons": "^4.1.0","primeng": "^11.2.3","rxjs": "^6.6.3","simple-line-icons": "^2.5.5","ts-helpers": "^1.1.2","tslib": "^2.0.0","web-animations-js": "^2.3.2","zone.js": "~0.10.3"},"devDependencies": {"@angular-devkit/build-angular": "^0.1101.1","@angular/cli": "^11.1.1","@angular/compiler-cli": "^11.1.0","@angular/language-service": "^11.1.0","@biesbjerg/ngx-translate-extract": "^7.0.3","@types/jasmine": "^3.6.3","@types/jasminewd2": "^2.0.8","@types/node": "^14.14.22","codelyzer": "^6.0.0","husky": "^5.1.2","jasmine-core": "~3.6.0","jasmine-spec-reporter": "~5.0.0","karma": "~5.2.0","karma-chrome-launcher": "~3.1.0","karma-coverage": "~2.0.3","karma-jasmine": "~4.0.0","karma-jasmine-html-reporter": "^1.5.0","prettier": "^2.2.1","protractor": "~7.0.0","ts-node": "^8.10.2","tslint": "~6.1.0","typescript": "~4.0.5"},"engines": {"node": ">= 10.13","npm": ">= 6"}}

请问需要修改scripts部分的哪些内容才能实现该需求？

解决方案 #

完全可行，只需在package.json的scripts字段中新增build:production脚本即可，以下是三种推荐实现方式：

方式1：直接复用现有生产构建参数 #

你的现有build脚本已经包含了--prod等全套生产环境构建参数，直接复制该命令作为build:production的执行内容即可：

"scripts": {
  "ng": "ng",
  "postinstall": "ngcc --properties es2015 browser module main --first-only",
  "start": "ng serve",
  "build": "ng build --prod --aot --build-optimizer --common-chunk --vendor-chunk --optimization --progress",
  "build:production": "ng build --prod --aot --build-optimizer --common-chunk --vendor-chunk --optimization --progress",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "prettier": "prettier --write \"{,!(node_modules|dist|build|coverage)/**/}*.{js,jsx,ts,json}\"",
  "pre-commit": "npm run lint && npm run prettier",
  "extract-i18n": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,nl,fr,es,it,de}.json --format namespaced-json --sort"
}

方式2：调用现有build脚本避免重复代码 #

如果想减少代码冗余，可以让build:production直接调用已有的build脚本并传递生产参数：

"scripts": {
  "ng": "ng",
  "postinstall": "ngcc --properties es2015 browser module main --first-only",
  "start": "ng serve",
  "build": "ng build --prod --aot --build-optimizer --common-chunk --vendor-chunk --optimization --progress",
  "build:production": "npm run build --production",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "prettier": "prettier --write \"{,!(node_modules|dist|build|coverage)/**/}*.{js,jsx,ts,json}\"",
  "pre-commit": "npm run lint && npm run prettier",
  "extract-i18n": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,nl,fr,es,it,de}.json --format namespaced-json --sort"
}

方式3：使用Angular CLI配置项（规范写法） #

若你的angular.json中已配置好production环境配置，也可以直接用--configuration参数调用，更符合Angular CLI的规范用法：

"scripts": {
  "ng": "ng",
  "postinstall": "ngcc --properties es2015 browser module main --first-only",
  "start": "ng serve",
  "build": "ng build --prod --aot --build-optimizer --common-chunk --vendor-chunk --optimization --progress",
  "build:production": "ng build --configuration production",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "prettier": "prettier --write \"{,!(node_modules|dist|build|coverage)/**/}*.{js,jsx,ts,json}\"",
  "pre-commit": "npm run lint && npm run prettier",
  "extract-i18n": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,nl,fr,es,it,de}.json --format namespaced-json --sort"
}

修改完成后，执行npm run build:production就能得到和原命令完全一致的生产构建产物。

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