本文共 10256 字，大约阅读时间需要 34 分钟。

这篇文章以具体的例子使用NodeJS插件来构建NodeJS的前端应用，本文以Angular8.3.8的cli生成的demo应用为例，通过一个具体的Jenkinsfile，介绍Angular的应用从创建到编译的过程。

基础知识

如果对于NodeJS的插件使用或者在Jenkins的Jenkinsfile中使用npm的基本方法不熟悉的开发者可以先行查看如下文章。

• 在Jenkins中安装和设定NodeJS插件：https://liumiaocn.blog.csdn.net/article/details/102618269
• 如何在Jenkinsfile中使用NodeJS：
• https://liumiaocn.blog.csdn.net/article/details/102598127

而关于Alpine镜像中使用NodeJS则有诸多问题，常见的对应方法可以参看：

• https://liumiaocn.blog.csdn.net/article/details/102587460

事前准备

安装NodeJS的10.15.3版，然后创建一个名为angular-pipeline-job的Pipeline类型的Job。

Jenkinsfile

node {
      stage('Prepare Node and NPM') {
    // confirm nodejs plugin and setting    env.NODEJS_HOME = "${tool 'nodejs-10.15.3'}"	env.PATH="${env.NODEJS_HOME}/bin:${env.PATH}"	sh 'npm --version'   }   stage('Prepare Angular CLI') {
    // install global angular cli    sh 'npm -g install @angular/cli'    sh 'ng --version'   }   stage('Prepare Angular Project') {
    // prepare angular demo app    sh 'if [ ! -d demo ]; then ng new demo --style less; fi'   }   stage('Build Angular Project') {
    // build angular demo app    sh 'cd demo && npm install && npm run build'   }}

代码说明：

angular是通过cli来创建应用程序脚手架的，在Prepare Angular Project的stage中通过使用ng new demo创建了demo的angular应用。而在后续的stage中则通过npm install安装相关的依赖，通过npm run build则生成了结果的dist目录与文件。

结果确认

• 执行日志确认
  执行日志如下所示：

Started by user rootRunning in Durability level: MAX_SURVIVABILITY[Pipeline] Start of Pipeline[Pipeline] nodeRunning on Jenkins in /data/jenkins/workspace/angular-pipeline-job[Pipeline] {[Pipeline] stage[Pipeline] { (Prepare Node and NPM)[Pipeline] tool[Pipeline] sh+ npm --version6.4.1[Pipeline] }[Pipeline] // stage[Pipeline] stage[Pipeline] { (Prepare Angular CLI)[Pipeline] sh+ npm -g install @angular/cli/usr/local/node/10.15.3/bin/ng -> /usr/local/node/10.15.3/lib/node_modules/@angular/cli/bin/ng> @angular/cli@8.3.12 postinstall /usr/local/node/10.15.3/lib/node_modules/@angular/cli> node ./bin/postinstall/script.js+ @angular/cli@8.3.12updated 1 package in 36.096s[Pipeline] sh+ ng --version     _                      _                 ____ _     ___    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|                |___/    Angular CLI: 8.3.12Node: 10.15.3OS: linux x64Angular: ... Package                      Version------------------------------------------------------@angular-devkit/architect    0.803.12@angular-devkit/core         8.3.12@angular-devkit/schematics   8.3.12@schematics/angular          8.3.12@schematics/update           0.803.12rxjs                         6.4.0    [Pipeline] }[Pipeline] // stage[Pipeline] stage[Pipeline] { (Prepare Angular Project)[Pipeline] sh+ '[' '!' -d demo ]+ ng new demo --style lessCREATE demo/README.md (1022 bytes)CREATE demo/.editorconfig (246 bytes)CREATE demo/.gitignore (631 bytes)CREATE demo/angular.json (3665 bytes)CREATE demo/package.json (1290 bytes)CREATE demo/tsconfig.json (543 bytes)CREATE demo/tslint.json (1953 bytes)CREATE demo/browserslist (429 bytes)CREATE demo/karma.conf.js (1016 bytes)CREATE demo/tsconfig.app.json (270 bytes)CREATE demo/tsconfig.spec.json (270 bytes)CREATE demo/src/favicon.ico (948 bytes)CREATE demo/src/index.html (290 bytes)CREATE demo/src/main.ts (372 bytes)CREATE demo/src/polyfills.ts (2838 bytes)CREATE demo/src/styles.less (80 bytes)CREATE demo/src/test.ts (642 bytes)CREATE demo/src/assets/.gitkeep (0 bytes)CREATE demo/src/environments/environment.prod.ts (51 bytes)CREATE demo/src/environments/environment.ts (662 bytes)CREATE demo/src/app/app.module.ts (314 bytes)CREATE demo/src/app/app.component.less (0 bytes)CREATE demo/src/app/app.component.html (25498 bytes)CREATE demo/src/app/app.component.spec.ts (975 bytes)CREATE demo/src/app/app.component.ts (209 bytes)CREATE demo/e2e/protractor.conf.js (808 bytes)CREATE demo/e2e/tsconfig.json (214 bytes)CREATE demo/e2e/src/app.e2e-spec.ts (637 bytes)CREATE demo/e2e/src/app.po.ts (262 bytes)> core-js@2.6.10 postinstall /data/jenkins/workspace/angular-pipeline-job/demo/node_modules/babel-runtime/node_modules/core-js> node postinstall || echo "ignore"> core-js@3.2.1 postinstall /data/jenkins/workspace/angular-pipeline-job/demo/node_modules/core-js> node scripts/postinstall || echo "ignore"> core-js@2.6.10 postinstall /data/jenkins/workspace/angular-pipeline-job/demo/node_modules/karma/node_modules/core-js> node postinstall || echo "ignore"> @angular/cli@8.3.12 postinstall /data/jenkins/workspace/angular-pipeline-job/demo/node_modules/@angular/cli> node ./bin/postinstall/script.jsnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/webpack-dev-server/node_modules/fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/watchpack/node_modules/fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/karma/node_modules/fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/@angular/compiler-cli/node_modules/fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.1 (node_modules/fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})added 1188 packages from 1051 contributors and audited 18848 packages in 244.747sfound 6 high severity vulnerabilities  run `npm audit fix` to fix them, or `npm audit` for details*** Please tell me who you are.Run  git config --global user.email "you@example.com"  git config --global user.name "Your Name"to set your account's default identity.Omit --global to set the identity only in this repository.fatal: unable to auto-detect email address (got 'root@ba8864fea869.(none)')[Pipeline] }[Pipeline] // stage[Pipeline] stage[Pipeline] { (Build Angular Project)[Pipeline] sh+ cd demo+ npm installnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/webpack-dev-server/node_modules/fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/watchpack/node_modules/fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/karma/node_modules/fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/@angular/compiler-cli/node_modules/fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.1 (node_modules/fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})audited 18848 packages in 31.165sfound 6 high severity vulnerabilities  run `npm audit fix` to fix them, or `npm audit` for details+ npm run build> demo@0.0.0 build /data/jenkins/workspace/angular-pipeline-job/demo> ng buildGenerating ES5 bundles for differential loading...ES5 bundle generation complete.chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 9.89 kB [initial] [rendered]chunk {styles} styles-es5.js, styles-es5.js.map (styles) 14 kB [initial] [rendered]chunk {main} main-es2015.js, main-es2015.js.map (main) 46.5 kB [initial] [rendered]chunk {main} main-es5.js, main-es5.js.map (main) 53 kB [initial] [rendered]chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 789 kB [initial] [rendered]chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.2 kB [entry] [rendered]chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 3.48 MB [initial] [rendered]chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 4.81 MB [initial] [rendered]chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 264 kB [initial] [rendered]Date: 2019-10-18T02:34:59.103Z - Hash: b18533c9e47968821589 - Time: 15908ms[Pipeline] }[Pipeline] // stage[Pipeline] }[Pipeline] // node[Pipeline] End of PipelineFinished: SUCCESS

• 前端构建结果确认
  可以看到已经成功的生成了dist目录，而在dist目录下demo应用的相关的js文件的得到了构建生成。

/data/jenkins/workspace/angular-pipeline-job/demo # lsREADME.md     browserslist  e2e		   node_modules       package.json  tsconfig.app.json  tsconfig.spec.jsonangular.json  dist	    karma.conf.js  package-lock.json  src	    tsconfig.json      tslint.json/data/jenkins/workspace/angular-pipeline-job/demo # ls distdemo/data/jenkins/workspace/angular-pipeline-job/demo # ls dist/demo/favicon.ico	    main-es5.js		     polyfills-es5.js	    runtime-es5.js	  styles-es5.js		vendor-es5.jsindex.html	    main-es5.js.map	     polyfills-es5.js.map   runtime-es5.js.map	  styles-es5.js.map	vendor-es5.js.mapmain-es2015.js	    polyfills-es2015.js      runtime-es2015.js	    styles-es2015.js	  vendor-es2015.jsmain-es2015.js.map  polyfills-es2015.js.map  runtime-es2015.js.map  styles-es2015.js.map  vendor-es2015.js.map/data/jenkins/workspace/angular-pipeline-job/demo #

• 构建结果
  在blueocean上也能实时地确认到构建的输出信息
  

转载地址：https://liumiaocn.blog.csdn.net/article/details/102634571 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！