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

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

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

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

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

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

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

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

1.配置Jenkins PipeLine Gitee WebHooks




2.配置PipeLine 脚本
js 复制代码
pipeline {
    agent any

    stages {
        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公共组件库 项目已经构建完成.'
        }
    }
}
相关推荐
xingpanvip10 小时前
星盘接口开发文档:组合三限盘接口指南
android·开发语言·前端·python·php·lua
阿拉丁的梦10 小时前
blender最好的多通道吸色工具(拾取纹理颜色排除灯光)
前端·html
吴声子夜歌10 小时前
Vue3——脚手架Vite
前端·javascript·vue.js·vite
摘星编程10 小时前
当AI开始学会“使用工具“——从ReAct到MCP,大模型如何获得真正的行动力
前端·人工智能·react.js
light blue bird10 小时前
设备数据变化上传图表数据汇总组件
大数据·前端·信息可视化
2501_9181269110 小时前
开源祭祖网页index
前端·开源·html
庚昀◟11 小时前
腾讯云 CVM + Docker + Jenkins + GitLab CI/CD 全流程指南(python、flask实现简单计算器)
python·ci/cd·docker·flask·jenkins
傻瓜搬砖人11 小时前
SpringMVC的请求
java·前端·javascript·spring
爱上好庆祝11 小时前
学习js的第六天(js基础的结束)
开发语言·前端·javascript·学习·ecmascript
IT_陈寒11 小时前
JavaScript的异步地狱,我差点没爬出来
前端·人工智能·后端