【发布时间】:2022-01-13 00:48:30
【问题描述】:
我有一个管道,它执行npm install,然后是角度构建,最近我添加了一个缓存任务来减轻安装,在开发人员添加一个新的私有依赖项 "runtime-config-loader": "^3.0.0" 之前,它运行良好。
这可能需要再次重新安装 npm,但是,由于某种原因,缓存任务认为它不需要重新安装,因此它会跳过 npm install,然后在 Angular 构建中失败,很可能因为 npm 没有在代理上重新安装。
我禁用了缓存任务并从npm install 任务中删除了自定义条件eq(variables['CACHE_RESTORED'],False),构建成功。
为什么缓存无法识别需要再次重新安装依赖项?以及如何删除缓存以便再次安装 npm?提醒一下,当我禁用缓存任务并在代理上重新安装 npm 时,构建成功 - 所以这肯定是一个缓存问题。
这是构建 YAML:
steps:
- task: Cache@2
displayName: 'npm Cache'
inputs:
key: 'npm | "$(Agent.OS)" | $(System.DefaultWorkingDirectory)/EE/Angular/package-lock.json'
path: '$(System.DefaultWorkingDirectory)/EE/Angular/node_modules'
cacheHitVar: 'CACHE_RESTORED'
restoreKeys: 'npm | "$(Agent.OS)"'
enabled: false
steps:
- task: Npm@1
displayName: 'npm install'
inputs:
command: custom
workingDir: EE/Angular
verbose: false
customCommand: 'install --legacy-peer-deps'
condition: eq(variables['CACHE_RESTORED'],False)
steps:
- task: Npm@1
displayName: 'npm custom: angular build'
inputs:
command: custom
workingDir: EE/Angular
verbose: false
customCommand: 'run-script build -- --prod'
旧的 package.json 文件,构建 with 缓存可以正常使用:
{
"name": "angular",
"version": "11.2.14",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "11.2.14",
"@angular/cdk": "10.2.3",
"@angular/common": "^11.2.14",
"@angular/compiler": "11.2.14",
"@angular/core": "11.2.14",
"@angular/forms": "11.2.14",
"@angular/localize": "11.2.14",
"@angular/platform-browser": "11.2.14",
"@angular/platform-browser-dynamic": "11.2.14",
"@angular/router": "11.2.14",
"@fortawesome/angular-fontawesome": "0.8.2",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.13.0",
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@ng-bootstrap/ng-bootstrap": "9.1.3",
"@ng-idle/core": "^10.0.0-beta.1",
"@ng-idle/keepalive": "^10.0.0-beta.1",
"@ng-select/ng-select": "7.0.0",
"css-what": "^5.0.1",
"hammerjs": "^2.0.8",
"highcharts": "9.1.2",
"highcharts-angular": "2.10.0",
"html2pdf.js": "0.9.3",
"jspdf": "^2.3.1",
"ng-multiselect-dropdown": "0.3.4",
"ngx-cookie-service": "11.0.2",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.5.4",
"tslib": "^2.0.0",
"xmldom": "^0.5.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.14",
"@angular/cli": "11.2.14",
"@angular/compiler-cli": "11.2.14",
"@angular/language-service": "11.2.14",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "4.1.2"
}
}
新建 package.json 文件:
{
"name": "angular",
"version": "11.2.14",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "11.2.14",
"@angular/cdk": "^11.2.13",
"@angular/common": "^11.2.14",
"@angular/compiler": "11.2.14",
"@angular/core": "11.2.14",
"@angular/forms": "11.2.14",
"@angular/localize": "11.2.14",
"@angular/platform-browser": "11.2.14",
"@angular/platform-browser-dynamic": "11.2.14",
"@angular/router": "11.2.14",
"@fortawesome/angular-fontawesome": "0.8.2",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.13.0",
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@ng-bootstrap/ng-bootstrap": "9.1.3",
"@ng-idle/core": "^11.1.0",
"@ng-idle/keepalive": "^11.0.3",
"@ng-select/ng-select": "^6.1.0",
"css-what": "^5.0.1",
"hammerjs": "^2.0.8",
"highcharts": "9.1.2",
"highcharts-angular": "2.10.0",
"html2pdf.js": "0.9.3",
"jasmine": "^3.8.0",
"jspdf": "^2.3.1",
"ng-multiselect-dropdown": "0.3.4",
"ngx-cookie-service": "11.0.2",
"runtime-config-loader": "^3.0.0",
"rxjs": "^6.6.0",
"rxjs-compat": "^6.5.4",
"tslib": "^2.0.0",
"xmldom": "^0.5.0",
"zone.js": "^0.11.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.14",
"@angular/cli": "11.2.14",
"@angular/compiler-cli": "11.2.14",
"@angular/language-service": "11.2.14",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "^3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "^8.3.0",
"tslint": "~6.1.0",
"typescript": "^4.1.5"
}
}
【问题讨论】:
-
我理解你为什么这样做,但我认为缓存 node_modules 不是一个好主意。使用
npm ci而不是npm install安装依赖项怎么样?那应该快得多。 -
@JSONDerulo 很有趣,为什么缓存不是一个好主意?安装大约需要 15 分钟,所以微软是推荐我使用缓存任务的人,但我对你的看法很好奇 :) 还有你的意思是什么 npm ci? npm task 不是 npm ci 吗?
-
@JSONDerulo 好的,所以我只是尝试了
npm ci而不是npm install(只是在 npm 任务中选择了 ci 选项而不是 install 选项)。我确实注意到了改进,但是我什至首先使用缓存的原因是由于某种原因其中一个管道使用 npm install 需要超过 15 分钟,因此 Microsoft 建议使用缓存。我禁用了此管道上的缓存并让npm ci运行,这次安装在 -
添加了答案。但是我仍然认为这不是最好的解决方案。过去,我在 Windows 构建代理上也经历过非常缓慢的 npm 安装。您是否尝试过切换到 linux 代理?这对我们来说要快得多(从 > 10 分钟降至
标签: angular npm azure-pipelines