hugo-teek is loading...

2024-12-25 运维 +2 devops 项目工程构建工具 1616 字 8 分钟 -- 次

NPM-YARN构建工具实践

最后更新于: 2025-12-06 17:39:04

实战：NPM&YARN构建工具实践-2023.6.22(测试成功)

实验环境

1gitlab/gitlab-ce:15.0.3-ce.0
2jenkins/jenkins:2.346.3-2-lts-jdk11
3openjdk 11.0.18
4[root@Devops6 ~]#npm -v
56.14.12
6[root@Devops6 ~]#node -v
7v14.16.1
8[root@Devops6 ~]#yarn -v
91.22.19

实验软件

链接：https://pan.baidu.com/s/13ih893J78fla-pUemvhWDw?pwd=0820 提取码：0820

2023.6.22-实战：NPM&YARN构建工具实践(测试成功)

1、NPM

官网：https://nodejs.org/en/download/

1.配置环境

 1##1、下载并解压目录
 2wget https://nodejs.org/dist/v14.16.1/node-v14.16.1-linux-x64.tar.xz
 3tar xf node-v14.16.1-linux-x64.tar.xz -C /usr/local/
 4
 5##2、配置环境变量
 6# vi /etc/profile
 7export NODE_HOME=/usr/local/node-v14.16.1-linux-x64
 8export PATH=$NODE_HOME/bin:$PATH
 9#生效
10source /etc/profile
11
12##3、查看
13# node -v
14v14.16.1
15# npm -v
166.14.12

2.项目生成

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

1[root@Devops6 ~]#cd /data/devops6
2[root@Devops6 devops6]#npm install -g vue-cli
3[root@Devops6 devops6]#vue-init  webpack vuedemo

生成项目后，我们看下生成的文件：

1[root@Devops6 devops6]#cd vuedemo/
2[root@Devops6 vuedemo]#ls
3build  config  index.html  node_modules  package.json  package-lock.json  README.md  src  static
4[root@Devops6 vuedemo]#rm -rf node_modules/ #删除下这个目录

手动编译下

1npm install
2npm run build

3.创建gitlab仓库并上传代码

创建一个devops6-npm-service项目

注意：这里取消勾选初始化仓库配置项。

在本地git端将项目代码上传到刚才创建的项目里：

 1[root@Devops6 vuedemo]#pwd
 2/data/devops6/vuedemo
 3[root@Devops6 vuedemo]#ls
 4build  config  index.html  package.json  package-lock.json  README.md  src  static
 5
 6git init
 7git checkout -b  main
 8git remote add origin http://172.29.9.101:8076/devops6/devops6-npm-service.git
 9git add .
10git commit -m "Initial commit"
11git push -u origin main

4.创建Jenkins作业

Jenkins上以devops6-gradle-service来拷贝创建devops6-npm-servicepipeline类型作业，点击保存。

然后这里改变一些参数值：

其它都是一样的，点击保存。

5.编写Jenkins Pipeline

注意：因为Maven和Gradle只是构建工具不一样，而后面的Jenkins代码则是完全一致的，因此这里直接测试。

运行

此时报错了。。。

奇怪，自己在机器上测试都没问题，但是用jenkins来跑任务就出现了问题。。。

经过百度发现：

http://www.manongjc.com/detail/50-ppymurmbcmvaujd.html

https://blog.csdn.net/Qevery678/article/details/104803433

按百度提供的办法配置后，再次运行，发现就ok了。

1[root@Devops6 ~]#ls /usr/local/node-v14.16.1-linux-x64/bin/
2node      npm       npx       vue       vue-init  vue-list  yarn      yarnpkg
3[root@Devops6 ~]#ln -s /usr/local/node-v14.16.1-linux-x64/bin/node /usr/bin/node

常用命令

1npm install <moduleName> -g   包安装到全局
2npm list：查看当前已安装的包。
3npm config set registry https://registry.npm.taobao.org   #设置淘宝源
4npm config set cache  "/opt/npmcache/"   #设置缓存路径
5
6#构建项目
7npm install && npm run build

2、YARN

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

1.配置环境

安装好node；

再安装yarn工具；

1npm install -g yarn
2yarn info

2.项目生成

项目生成见NPM方式。（这里使用同一个测试项目）

3.Jenkins与yarn集成

因为yarn和npm都是构建前端项目，因此这里就直接用上面流水线测试了：

常用命令

1yarn / yarn install
2yarn clean 
3yarn config set cache-folder "/opt/yarncache"
4
5yarn config set registry https://registry.npm.taobao.org
6yarn config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"

FAQ

案例：GitlabCI & Npm集成

创建一个gitlab-ci.yml文件，编写代码，提交并观察效果：

这里需要注意下：此时，runner tag为build，有2个runner符合要求：

 1stages:
 2  - build
 3  - test
 4
 5variables:
 6  GIT_CHECKOUT: "false" 
 7  RUNNER_TAG: "build"
 8
 9pipelineInit:
10  stage: .pre
11  tags:
12    - "${RUNNER_TAG}"
13  variables:
14    GIT_CHECKOUT: "true" 
15  script:
16    - ls -l 
17
18cibuild:
19  tags:
20    - "${RUNNER_TAG}"
21  stage: build
22  script:
23    - /usr/local/node-v16.15.0-linux-x64/bin/npm install
24    - /usr/local/node-v16.15.0-linux-x64/bin/npm run build

以上代码构建后可能存在问题：

因此这里方便演示，将tag改为npm，然后再次提交构建，观察效果：

 1stages:
 2  - build
 3  - test
 4
 5variables:
 6  GIT_CHECKOUT: "false" 
 7  RUNNER_TAG: "npm"
 8
 9pipelineInit:
10  stage: .pre
11  tags:
12    - "${RUNNER_TAG}"
13  variables:
14    GIT_CHECKOUT: "true" 
15  script:
16    - ls -l 
17
18cibuild:
19  tags:
20    - "${RUNNER_TAG}"
21  stage: build
22  script:
23    - /usr/local/node-v16.15.0-linux-x64/bin/npm install
24    - /usr/local/node-v16.15.0-linux-x64/bin/npm run build