使用Jenkins CI/CD和Gitee webhooks发布前端自定义组件库到npm

通过之前的学习,沉淀出了一套自定义公共组件库,现在要实现将其通过Jenkins的CICD 推送代码到npm上

一、配置npm (服务器命令行窗口上配置)

1.设置官方网址
npm config set registry https://registry.npmjs.org/
2.登录(输入npm用户名密码和与npm账号绑定的邮箱)
//在输入密码的时候不是明文  所以正常输入也不会显示密码内容
npm login
3.输入验证码 (输入邮箱之后 进入到邮箱查看npm发来的验证码,回到cmd窗口输入验证码 即可)

在这里插入图片描述

二、配置Jenkins (如何配置Jenkins 大家按需查看)

前端自动化(其一)部署gitlab

前端自动化(其二)部署jenkins、配置环境、连接gitlab(本章!)

前端自动化(其三)持续集成和持续部署

1.配置Jenkins PipeLine Gitee WebHooks

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.配置PipeLine 脚本
pipeline {agent anystages {stage('拉取代码') {steps {git credentialsId: '8e706ee7-075c-41bf-a4b4-e2986', url: 'https://gitee.com/ove/qg-ite-react-coms.git'}}stage('安装依赖') {steps {sh 'yarn'}}stage('打包组件库') {steps {sh 'yarn run qgbuild'}}stage('上传至NPM') {steps {// 删除远程服务器目录内容sh 'npm publish'}}}post {always {// 这里可以添加构建后的操作,比如清理、发送通知等echo '基于React18-Antd5.x公共组件库 项目已经构建完成.'}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/518271.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧城市中的数据力量:大数据与AI的应用

目录 一、引言 二、大数据与AI技术的融合 三、大数据与AI在智慧城市中的应用 1、智慧交通 2、智慧环保 3、智慧公共安全 4、智慧公共服务 四、大数据与AI在智慧城市中的价值 1、提高城市管理的效率和水平 2、优化城市资源的配置和利用 3、提升市民的生活质量和幸福感…

四节点/八节点四边形单元悬臂梁Matlab有限元编程 | 平面单元 | Matlab源码 | 理论文本

专栏导读 作者简介:工学博士,高级工程师,专注于工业软件算法研究本文已收录于专栏:《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现,并提供所有案例完整源码;2.单元…

微服务获取登录用户Id与单体服务下获取用户Id对比(黑马头条Day03)

前置声明 当前前后端分离开发项目中,后端某个请求向具体某个数据库中的多个表插入数据时,经常需要使用到当前登录用户的Id(唯一标识)。在当前用户线程下以实现变量共享,同时为了避免不同用户线程之间操作变量的影响&am…

期货开户如何查询最新的手续费明细?

一、如何查询最新的手续费明细和保证金明细? 1、手机或者电脑交易软件下单窗口,点击品种合约,一般会显示1手需要的保证金比例,比如手机博弈大师/同花顺期货通等。 2、电脑交易软件下单窗口,点合约,里面会…

在idea中如何开启项目的热部署

热部署&#xff1a;就是当我们IDEA的项目在运行期间&#xff0c;我们修改代码以后&#xff0c;不需要我们自己重启项目&#xff0c;IDEA就会自动的重启项目 在idea中开启项目热部署的步骤 第一步&#xff1a;引入热部署的依赖 <dependency><groupId>org.springfr…

重磅!云智慧推出轻量智能化服务管理平台轻帆云

近日&#xff0c;云智慧推出智能服务管理平台轻帆云&#xff0c;通过构建服务体系、规范服务流程、保障服务质量、提升服务效能&#xff0c;为企业提供安全可靠的一站式服务管理解决方案。SaaS轻量化部署方式&#xff0c;仅需通过简单操作&#xff0c;即可轻松完成搭建&#xf…

物体检测-系列教程22:YOLOV5 源码解析12 (BottleneckCSP层、Conv模块、Bottleneck模块)

&#x1f60e;&#x1f60e;&#x1f60e;物体检测-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 点我下载源码 16、BottleneckCSP层 16.1 BottleneckCSP类 位置&#xff1a;yolov5/models/common.py/…

数据结构:顺序表的奥秘

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生&#x1f43b;‍❄个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE&#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&a…

Golang搭建grpc环境

简介 OS : Windows 11 Golang 版本: go1.22.0 grpc : 1.2 protobuffer: 1.28代理 没有代理国内环境下载不了库七牛CDN &#xff08;试过可用&#xff09; go env -w GOPROXYhttps://goproxy.cn,direct阿里云代理(运行grpc时下载包出现报错 ): go env -w GOPROXYhttps://mirr…

el-table 表格多选, 批量删除功能

一、基础的多选el-table ElementUI 提供了多选行table&#xff0c;同时若依框架也提供了成熟的多选表格。 1.table基础结构 需要绑定selection-change方法 <el-tablev-loading"loading"stripe:data"productList"selection-change"handleSelect…

Vue+Vue CLI学习

1、Vue基础 1.1、Vue简介 &#xff08;1&#xff09;Javascript框架 &#xff08;2&#xff09;简化Dom操作 &#xff08;3&#xff09;响应式数据驱动 vue基础&#xff1b;vue-cli;vue-router;vuex;element-ui;vue3 vue文件包括html、css、js 1.2、第一个Vue程序 Vue …

如何进行渗透测试以提高软件安全性

对于各种规模的企业和组织来说&#xff0c;软件安全是一个至关重要的问题。随着网络攻击越来越复杂&#xff0c;软件中的漏洞越来越多&#xff0c;确保你的软件安全比以往任何时候都更重要。提高软件安全性的一个有效方法是渗透测试&#xff08;penetration testing&#xff09…