Jenkins基础:使用NPM构建前端应用3:使用NodeJS构建前端应用

这篇文章以具体的例子使用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 root
Running in Durability level: MAX_SURVIVABILITY
[Pipeline] Start of Pipeline
[Pipeline] node
Running on Jenkins in /data/jenkins/workspace/angular-pipeline-job
[Pipeline] {
[Pipeline] stage
[Pipeline] { (Prepare Node and NPM)
[Pipeline] tool
[Pipeline] sh
+ npm --version
6.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.12
updated 1 package in 36.096s
[Pipeline] sh
+ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.12
Node: 10.15.3
OS: linux x64
Angular: 
... 

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.12
rxjs                         6.4.0
    
[Pipeline] }
[Pipeline] // stage
[Pipeline] stage
[Pipeline] { (Prepare Angular Project)
[Pipeline] sh
+ '[' '!' -d demo ]
+ ng new demo --style less
CREATE 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.js

npm 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.747s
found 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 install
npm 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.165s
found 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 build

Generating 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 Pipeline
Finished: SUCCESS
  • 前端构建结果确认
    可以看到已经成功的生成了dist目录,而在dist目录下demo应用的相关的js文件的得到了构建生成。
/data/jenkins/workspace/angular-pipeline-job/demo # ls
README.md     browserslist  e2e		   node_modules       package.json  tsconfig.app.json  tsconfig.spec.json
angular.json  dist	    karma.conf.js  package-lock.json  src	    tsconfig.json      tslint.json
/data/jenkins/workspace/angular-pipeline-job/demo # ls dist
demo
/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.js
index.html	    main-es5.js.map	     polyfills-es5.js.map   runtime-es5.js.map	  styles-es5.js.map	vendor-es5.js.map
main-es2015.js	    polyfills-es2015.js      runtime-es2015.js	    styles-es2015.js	  vendor-es2015.js
main-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上也能实时地确认到构建的输出信息
    在这里插入图片描述
淼叔 CSDN认证博客专家 神经网络 TensorFlow NLP
资深架构师,PMP、OCP、CSM、HPE University讲师,EXIN DevOps Professional与DevOps Master认证讲师,曾担任HPE GD China DevOps & Agile Leader,帮助企业级客户提供DevOps咨询培训以及实施指导。熟悉通信和金融领域,有超过十年金融外汇行业的架构设计、开发、维护经验,在十几年的IT从业生涯中拥有了软件开发设计领域接近全生命周期的经验和知识积累,著有企业级DevOps技术与工具实战。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页