Jenkins 常用的项目构建工具集成 04 npm yarn

原创

wx5bcd2f496a1cf 2022-08-17 08:17:48 ©著作权

文章标签 jenkins ide linux css 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者wx5bcd2f496a1cf的原创作品，请联系作者获取转载授权，否则将追究法律责任

npm

前端项目的构建使用npm，前端项目下载node.js 官网：Download | Node.js

安装npm

wget https://nodejs.org/dist/v14.16.1/node-v14.16.1-linux-x64.tar.xz
tar xf node-v14.16.1-linux-x64.tar.xz -C /usr/local/


[root@zeyang-nuc-service node-v14.16.1-linux-x64]# vi /etc/profile

export NODE_HOME=/usr/local/node-v14.16.1-linux-x64
export PATH=$NODE_HOME/bin:$PATH


[root@zeyang-nuc-service node-v14.16.1-linux-x64]# source /etc/profile
[root@zeyang-nuc-service node-v14.16.1-linux-x64]# node -v
v14.16.1
[root@zeyang-nuc-service node-v14.16.1-linux-x64]# npm -v
6.14.12

通过下面的命令，初始化一个vue项目

[root@zeyang-nuc-service node-v14.16.1-linux-x64]# npm install -g vue
+ vue@2.6.12
added 1 package from 1 contributor in 3.342s
[root@zeyang-nuc-service node-v14.16.1-linux-x64]# vue-init  webpack vuedemo

? Project name vuedemo
? Project description A Vue.js project
? Author adminuser <2560350642@qq.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vuedemo".

这个是一个vue前端的项目，怎么打包呢？先去install去安装其依赖，没问题之后再去run buid去打包

常用命令

npm install <moduleName> -g 包安装到全局
npm list：查看当前已安装的包。
npm config set registryhttps://registry.npm.taobao.org 设置淘宝源
npm config set cache "/opt/npmcache/" 设置缓存路径

root@jenkins-master devops-web-service-master]# npm install
[            ......] / extract:caniuse-db: sill extract caniuse-db@1.0.30001208 extracted to /root/devops-web-service-master/node_m

> core-js@2.6.12 postinstall /root/devops-web-service-master/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> ejs@2.7.4 postinstall /root/devops-web-service-master/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> uglifyjs-webpack-plugin@0.4.6 postinstall /root/devops-web-service-master/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1272 packages from 675 contributors and audited 1279 packages in 169.809s

47 packages are looking for funding
  run `npm fund` for details

found 60 vulnerabilities (3 low, 50 moderate, 7 high)
  run `npm audit fix` to fix them, or `npm audit` for details

然后去打包

[root@jenkins-master devops-web-service-master]# npm run build

> vuedemo@1.0.0 build /root/devops-web-service-master
> node build/build.js

?.building for production...(node:28710) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:28710) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'find' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'head' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'set' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'test' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'to' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency
(node:28710) Warning: Accessing non-existent property 'which' of module exports inside circular dependency
Hash: c5df099009c25bc0dbca
Version: webpack 3.12.0
Time: 11333ms
                                                  Asset       Size  Chunks             Chunk Names
                  static/js/app.2f2e5edd9af2c59aa514.js    11.5 kB       0  [emitted]  app
               static/js/vendor.0aad2172a75b8ed4f46c.js    94.8 kB       1  [emitted]  vendor
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
    static/css/app.30790115300ab27614ce176899523b62.css  432 bytes       0  [emitted]  app
static/css/app.30790115300ab27614ce176899523b62.css.map  797 bytes          [emitted]  
              static/js/app.2f2e5edd9af2c59aa514.js.map    21.7 kB       0  [emitted]  app
           static/js/vendor.0aad2172a75b8ed4f46c.js.map     494 kB       1  [emitted]  vendor
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  509 bytes          [emitted]  

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

这里多了dist目录，这里可以看到静态文件，后期就是将静态文件打包传到服务器上面，也就是网站根目录要发的包。

[root@jenkins-master devops-web-service-master]# ls
build  config  dist  index.html  Jenkinsfile  Jenkinsfile1  node_modules  package.json  package-lock.json  README.md  src  static
[root@jenkins-master devops-web-service-master]# cd dist/
[root@jenkins-master dist]# ls
index.html  static
[root@jenkins-master dist]# ls static/
css  js

yarn

yarn，facebook取代npm的包管理工具，速度快。Yarn 缓存包，无需重复下载。并行下载，安装速度快。

安装配置

npm install -g yarn
yarn info

[root@jenkins-master devops-web-service-master]# yarn install
[root@jenkins-master devops-web-service-master]# yarn build
yarn run v1.22.10
$ node build/build.js
?.building for production...(node:29002) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:29002) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'find' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'head' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'set' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'test' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'to' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency
(node:29002) Warning: Accessing non-existent property 'which' of module exports inside circular dependency
Hash: c5df099009c25bc0dbca
Version: webpack 3.12.0
Time: 10486ms
                                                  Asset       Size  Chunks             Chunk Names
                  static/js/app.2f2e5edd9af2c59aa514.js    11.5 kB       0  [emitted]  app
               static/js/vendor.0aad2172a75b8ed4f46c.js    94.8 kB       1  [emitted]  vendor
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
    static/css/app.30790115300ab27614ce176899523b62.css  432 bytes       0  [emitted]  app
static/css/app.30790115300ab27614ce176899523b62.css.map  797 bytes          [emitted]  
              static/js/app.2f2e5edd9af2c59aa514.js.map    21.7 kB       0  [emitted]  app
           static/js/vendor.0aad2172a75b8ed4f46c.js.map     494 kB       1  [emitted]  vendor
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  509 bytes          [emitted]  

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

Done in 12.46s.

def buildTools = ["web": "/usr/local/node-v14.16.1-linux-x64"]

pipeline {
    agent { label  "build" }    
    options {
        skipDefaultCheckout true
    }

    stages {
        stage("GetCode"){
            steps{
                script{
                    println("下载代码 --> 分支： ${env.branchName}")
                    checkout([$class: 'GitSCM', branches: [[name: "${env.branchName}"]], extensions: [], userRemoteConfigs: [[credentialsId: '823b86fe-2c1b-466e-b0c3-66ae6991449d', url: "${gitHttpURL}"]]])
                }
            }
            
        }

        stage("Build"){
            steps {
                script {


                    sh """
                        ${buildTools["web"]}/bin/npm install  
                        ${buildTools["web"]}/bin/npm run build

                        """
                }
            }
        }

    }

    post {
        always {
            script{
                echo "always......"

            }
        }

        success {
            script {
                echo "success....."
            }
        }
    }

}