jenkins系列之使用yarn构建前端项目

末蓝、 2023-06-12 08:58 39阅读 0赞

# jenkins系列之使用yarn构建前端项目 #

变更：npm装包有时候会出现一个依赖拉不下来的情况，从而导致由于网络问题导致的构建失败，而yarn会在第一次构建的时候就生成缓存，后面构建的时候，会先看缓存区有没有package.json里用到的依赖包，如果有的话就不会下载，没有才会下载，提高了效率。

# 替换命令 #

在jenkins中将shell命令替换  
由原本的npm打包换成yarn打包

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
    npm install
    npm run build

替换成如下格式

node -v
    npm install -g yarn -registry=https://registry.npm.taobao.org
    yarn -v
    yarn install --pure-lockfile 
    #--pure-lockfile  这个参数是在服务器install不生成yarn.lock，防止服务器和本地代码冲突
    yarn run build

# 执行构建 #

构建成功，从原本用npm进行构建，换成用yarn来执行构建。  
**![image.png][]**

# 出现的问题 #

## 找不到yarn命令 ##

执行时发现找不到yarn命令，傻眼了，明明服务器装了yarn的，也能显示版本。为什么就是报错呢，猜测是不是jenkins里的yarn和服务器不是一个yarn，于是首先去看全局工具安装，发现只有node.js没有yarn，然后自己在代码里添加  npm  -y install yarn  还是报错，在服务器上查找yarn，服务正常。

[root@localhost ~]# find / -name yarn
    /root/.jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs/bin/yarn
    /root/.jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs/lib/node_modules/yarn
    /root/.jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs/lib/node_modules/yarn/bin/yarn
    [root@localhost ~]# yarn -v
    1.19.1

![image.png][image.png 1]  
然后去看日志，发现执行这个构建的服务器并不是jenkins所在的服务器，因为之前做了分布式，所以这个项目是在另一台服务器上运行的，把另一台服务器也装上yarn，问题解决。  
\*\*  
**![image.png][image.png 2]**

重新执行任务，构建成功。

\*\*  
\*\*  
\*\*

[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjM3MTE2LzE1NzMxMDU0ODAwOTgtMTMxNGVlN2EtYWY0Ni00NDYxLTgyNTctOTE2OTM4ZWQ0ZDZkLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=451&name=image.png&originHeight=451&originWidth=1221&search=&size=34068&status=done&width=1221
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjM3MTE2LzE1NzMxMDgzMzU1MDAtMzdiMzU2OTYtMDVhNC00MDE5LWI4MzMtZGExNmRiMGIxYjhmLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=92&name=image.png&originHeight=92&originWidth=770&search=&size=12895&status=done&width=770
[image.png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjM3MTE2LzE1NzMxMTEwMDUzNTUtNTEzNGYxOGMtNjM5NC00YTlkLTg4OGItOTEyM2Y1YjJhNGMzLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=235&name=image.png&originHeight=235&originWidth=929&search=&size=16128&status=done&width=929