第十一章 建立语义化版本并提交组件库到NPM仓库

news2024/10/6 6:04:28

语义化版本是这样规定的。

版本格式：主版本号.次版本号.修订号（MAJOR.MINOR.PATCH），版本号递增规则如下：

  • 主版本号：当你做了不兼容的 API 修改；
  • 次版本号：当你做了向下兼容的功能性新增；
  • 修订号：当你做了向下兼容的问题修正。

以 Vue 的版本为例 ：

  • Vue 2.6.0
  • Vue 2.7.0 - 新增 Composition API；
  • Vue 2.7.1 - 修正 bug；
  • Vue 3.0.0 - alpha - 新版本 Vue 的第一个预览版、与以前版本 API 不兼容；
  • Vue 3.0.0 - alpha.2 - 第二个预览版；
  • Vue 3.0.0 - beta - 测试版、也叫公开测试版；
  • Vue 3.0.3 - RC - Release Condidate 已经具备正式上线条件的版本，也叫做上线候选版；
  • Vue 3.0.0 - GA - General Availability 正式发布的版本；
  • Vue 3.0.1 - 修正 bug。

了解了语义化版本的知识，下面我们就可以按照社区通行的规则发布自己的版本了。

具体参考地址：语义化版本控制规范（SemVer）

修改 Package 版本信息

发布一个版本首先要做的就是修改 package.json 上的版本信息。对于 npm 软件包管理器来讲， package 上的版本号就是唯一的版本标识。

文件名：package.json

  "version": "1.0.0",

如果了解发布npm包的小伙伴应该知道可以通过命令修改版本号

// 自动更改版本号，并且commit
// npm version xxx

// 控制台会返回下一个小版本号 如v1.0.0 ===> v1.0.1
npm version patch

// 重新发布
npm publish

注意：如果你更新了你的工程，需要重新发布,记得要commit你的代码，不然会报错

// patch：补丁号，修复bug，小变动，如 v1.0.0->v1.0.1
npm version patch

// minor：次版本号，增加新功能，如 v1.0.0->v1.1.0
npm version minor

// major：主版本号，不兼容的修改，如 v1.0.0->v2.0.0
npm version major

根据你所修改的功能和版本差距，来修改你的版本号

设置 Git 版本库标签

Tag 是 git 版本库的一个标记， 指向某个 commit 的指针。

在发布版本的时候，应该给 git 打上一个 v.1.0.0 这样的版本标记 。

# 创建版本号对应的 git tag
git tag 1.0.0

# 将新的 git tag 推送到 github 上面
git push --tag

推送版本到 Github ，就可以在 Git 上面看到一个版本标记，而且可以提供此版本的 zip 打包下载。实际上这个也可以作为一种软件分发方式，只不过相对于使用 npm 包管理器，没有提供自动依赖安装。

在这里插入图片描述

确认要发布的文件

文件名：package.json

{
  "files": ["dist/**/*"],
}

files字段描述了将软件包作为依赖项安装时要包括的条目，默认值为[“*”]，这意味着它将包括所有文件。

如果需要把打包后的代码也发布到 NPM 仓库，我们这里只需要将dist目录包含即可

还可以在包的根目录或子目录中提供.npmignore 文件，以防止某些文件被发布。

.npmignore 文件的工作原理与.gitignore 一样。
如果存在.gitignore 文件，而缺少.npmignore, 则将改用.gitignore 的内容。

files字段内容会覆盖.npmignore 和.gitignore的内容

文件名：.npmignore

node_modules
.vscode
.github
.husky
config
demo
docs
test
.DS_Store
.gitignore
src
.eslintignore
.eslintrc.cjs
index.html
commitlint.config.js
jsdom-config.js
pnpm-lock.yaml
tsconfig.json
vite.config.ts

利用GitHub Action 实现自动发布

传统的做法是使用命令实现。在项目的根目录下，运行 npm publish 就可以实现。

还有一种方法就是利用 CI 工具实现，实际上这个过程叫做 CD 持续交付，对于组件库来讲，最终的交付就是推送到版本仓库中。

推送仓库的触发条件，肯定不是每次 push， 而是在有新的版本发布时，发布新版的动作可以通过判断 publish 提交的方法判定。具体做法为，首先单独划分一个 publish 分支，当发布版本时，就建立一个 pull request 到 publish 分支，当在 github 上 merge 分支时就触发发布流程。

首先，先划分 publish 分支。

git checkout -b publish-smarty-ui-vite
git push --set-upstream origin publish-smarty-ui-vite

根据目前的npm规则，首次发布比较严格，需要识别验证码。所以需要在本地发布。 在项目根目录下建立一个 publish.sh 文件。 这个 Shell 脚本的功能包括

  • 切换镜像仓库 （主要是由于国内默认是 taobao这种第三方仓库、需要切换到原始库）
  • 认证
  • 发布
  • 还原Taobao镜像仓库

文件名：publish.sh

#!/usr/bin/env bash
npm config get registry # 检查仓库镜像库
npm config set registry=http://registry.npmjs.org
echo '请进行登录相关操作：'
npm login # 登陆
echo "-------publishing-------"
npm publish # 发布
npm config set registry=https://registry.npm.taobao.org # 设置为淘宝镜像
echo "发布完成"
exit

使用命令行工具执行

# 修改执行权限
chmod +x publish.sh
# 执行
./publish.sh

由于我这里执行过程失败，我使用手动发布：

  • 检查仓库镜像库
npm config get registry

结果：

https://registry.npm.taobao.org/

我这里是淘宝镜像，所以要切换为官方镜像

  • 使用nrm查看镜像列表
nrm ls

结果：

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/
  • 切换为官方镜像
nrm use npm

结果：

Registry has been set to: https://registry.npmjs.org/
  • 登录NPM
npm login

结果：

npm WARN adduser `adduser` will be split into `login` and `register` in a future version. `adduser` will become an alias of `register`. `login` (currently an alias) will become its own command.
npm notice Log in on https://registry.npmjs.org/
Username: geniusman
Password:                                                                                                                                                                                           
Email: (this IS public) geniusmanyxh@gmail.com                                                                                                                                                      
npm notice Please check your email for a one-time password (OTP)
Enter one-time password: 60513851
Logged in as geniusman on https://registry.npmjs.org/.
  • 发布包
npm publish

结果：

npm notice 
npm notice 📦  study-vue-ui@1.0.0
npm notice === Tarball Contents ===
npm notice 1.1kB  LICENSE
npm notice 956B   README.en.md
npm notice 1.9kB  README.md
npm notice 8.4kB  dist/assets/entry.cb9ba4f4.css
npm notice 9.8kB  dist/smarty-ui.iife.js
npm notice 3.1kB  dist/smarty-ui.iife.js.map
npm notice 1.7kB  dist/smarty-ui.mjs
npm notice 3.3kB  dist/smarty-ui.mjs.map
npm notice 10.0kB dist/smarty-ui.umd.js
npm notice 3.1kB  dist/smarty-ui.umd.js.map
npm notice 1.5kB  package.json
npm notice === Tarball Details ===
npm notice name:          study-vue-ui
npm notice version:       1.0.0
npm notice filename:      study-vue-ui-1.0.0.tgz
npm notice package size:  8.0 kB
npm notice unpacked size: 44.8 kB
npm notice shasum:        8c6d4e3556c6f4222ccc3a4ac5d54ec636e5a590
npm notice integrity:     sha512-TajKl38rDMBKl[...]/T6jUCfM6HPfA==
npm notice total files:   11
npm notice
npm notice Publishing to https://registry.npmjs.org/
+ study-vue-ui@1.0.0

发布成功。

首次发布后，其余更新就可以使用 CI 工具自动完成了。

编写一个 Action 脚本用于自动打包，并推送新的软件包到 npm。

Action 的方法和前面讲的持续集成类似，只是发布动作，可以使用一个现成的 publish 插件完成。

插件地址：https://github.com/primer/publish

在需要提交 npm 库时需要认证，我们通过向 npm 申请 token 完成。

  • 申请token

在这里插入图片描述

  • 生成token

在这里插入图片描述

这个 Token 相当于随意操作你自己 npm 库的授权，提交的时候需要用到。但是又不能放在 Action 代码中，因为代码是公开的，一旦公开了 Token，相当于任何人都可以操作你的 npm 库，解决的办法就是使用 Action Secret 功能。

Action Secret 相当于建立了一个不公开的环境变量。只有项目的所有者可以设定，其他人则看不到。

  • 使用Action Secret

在这里插入图片描述

  • 添加NPM的token

在这里插入图片描述

添加完成查看：

在这里插入图片描述

  • 生成github个人令牌

在这里插入图片描述

  • 添加github的TOKEN

在这里插入图片描述

添加完成查看：

在这里插入图片描述

设置后就可以在 Action 脚本中使用了。

  • 编写action脚本

文件名：.github/workflows/publish.yml

name: Publish Smarty-ui-vite To NPM

on:
  push:
    branches: [publish-smarty-ui-vite]

jobs:
  publish:
    runs-on: ubuntu-latest

    name: "publish npm"

    environment: npm

    steps:
      - uses: actions/checkout@master
      - uses: pnpm/action-setup@v2.1.0
        with:
          version: 6.31.0
      - name: Install modules
        run: pnpm install
      - name: Build
        run: pnpm run build
      - name: "Publish to the npm registry"
        uses: primer/publish@3.0.0
        env:
          GITHUB_TOKEN: ${{ secrets.GIT_TOKEN }}
          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} # 跟前面步骤中的 NPM_AUTH_TOKEN 保持一致
        with:
          default_branch: "publish"
          dir: "."

提交代码到 github，并创建一个 Pull Request。

  • 创建Pull Request

在这里插入图片描述

  • 合并pull request

在这里插入图片描述

  • 查看工作流

在这里插入图片描述

  • 查看npm包

在这里插入图片描述

这里发现最新版本格式出了点问题，是因为我们没有更新版本的原因

1-更新版本

npm version patch // 也可以手动修改package.json

2-创建标签

git tag 1.0.1

3-推送

git push --tag

4-再次创建并合并一个pull request

由于重复操作这不在演示，直接查看结果：

在这里插入图片描述

完美。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

springboot+vue毕业生离校系统

springboot+vue毕业生离校系统

目 录 摘 要 I 目 录 III 第1章 概述 1 1.1 研究背景 1 1.2 研究现状 1 1.3 研究内容 2 第二章 开发技术介绍 2 2.1 系统开发平台 2 2.2 平台开发相关技术 3 2.2.1 B/S架构 3 2.2.2 Java技术介绍 4 2.2.3 mysql数据库介绍 4 2.2.4 …
阅读更多...
盘点程序员的花式赚外快的骚操作

盘点程序员的花式赚外快的骚操作

2022世界杯比赛难得如期开幕了，卡塔尔王子的表情包想必大家已经看到眼晕。 我拿2200亿和你玩，你踢一个0：2过不过分啊~ 现实中的投资可不比卡塔尔王子的表情包失落更多，毕竟投资有风险入行需谨慎。 然而悲惨的事实是，…
阅读更多...
[附源码]SSM计算机毕业设计新生入学计算机配号系统JAVA

[附源码]SSM计算机毕业设计新生入学计算机配号系统JAVA

项目运行 环境配置： Jdk1.8 Tomcat7.0 Mysql HBuilderX（Webstorm也行） Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。 项目技术： SSM mybatis Maven Vue 等等组成，B/S模式 M…
阅读更多...
企业若要实现预期广告推广效果，必须做好这六个步骤

企业若要实现预期广告推广效果，必须做好这六个步骤

在网络营销中，软文营销是一种最常用的营销手段。 我们知道，很多公司都是用软文进行广告推广。 然而，许多公司都觉得，软文营销并不是一件容易的事情，因为它不仅要有高品质的内容，还要有一定的操作能力&#…
阅读更多...
CAD最常用的快捷键大全来啦

CAD最常用的快捷键大全来啦

CAD快捷键的使用能够让我们加快画图的速度，但是想想CAD中有那么多的功能命令，所以CAD快捷键是很多的，想要完全记住是不可能的，这里就总结了常用的CAD快捷键命令，可能不全但是很实用。 一、常用绘图快捷键 最基本的一…
阅读更多...
低代码与mes生产管理系统：功能篇

低代码与mes生产管理系统：功能篇

随着信息技术的发展和应用,信息系统在企业中的使用也越来越广泛。不仅可以使企业内部和企业间的信息流通更为便捷和频繁，同时可以提高管理的水平，有助于提高企业的生产效益。其中mes生产管理系统就是美豳的调查资询公司AMR(Advanced Manufacturing Resea…
阅读更多...
牛顿法，高斯牛顿法，列文伯格-马夸尔特(LM)法

牛顿法，高斯牛顿法，列文伯格-马夸尔特(LM)法

文章目录一：牛顿法 （Newtons method）1：概述2：牛顿方向与牛顿法3：牛顿法的基本步骤4：举例二：高斯牛顿法 （Gauss–Newton algorithm）1：概述2&#x…
阅读更多...
若依、多选框前后端处理，MyBatis处理多对多关系

若依、多选框前后端处理，MyBatis处理多对多关系

背景 很经典的CRUD&#xff0c;整理下笔记。 后端 实体类 /*** 专业方向主键&#xff0c;用于下拉框搜索*/private Long disasterTypeId;/*** 专业方向*/private List<DisasterType> disasterType;业务层 /*** 新增专家信息库** param expertInfo 专家信息库* return 结…
阅读更多...
mac pro M1(ARM)安装：php开发环境

mac pro M1(ARM)安装：php开发环境

0. 引言 最近在处理各个语言的加密算法&#xff0c;正好需要安装php环境&#xff0c;特此记录&#xff0c;以供后续参考 1. 安装php 1、安装php包管理工具composer brew install composer2、安装php brew install php # 同时可以指定版本安装 brew install php8.0 # 查…
阅读更多...
基于Java+SpringBoot+Mybatis+Vue+ElementUi的航空公司电子售票系统

基于Java+SpringBoot+Mybatis+Vue+ElementUi的航空公司电子售票系统

项目介绍 本系统是利用Spring Boot框架而设计的一款结合用户的实际情况而设计的平台&#xff0c;前端利用VUE技术开发&#xff0c;将可供教师和管理员来使用的所有界面来显示出来&#xff0c;利用Java语言技术来编程实现用户和管理员所执行的各类操作业务逻辑&#xff0c;以My…
阅读更多...
在MacOS上实现两个网络调试助手的UDP通信测试

在MacOS上实现两个网络调试助手的UDP通信测试

文章目录一、背景二、网络调试助手软件三、UDP通信过程一、背景 因为有一个项目要中会使用本机中两个应用程序之间的UDP通信。 因此本文记录一下怎么在MacOS上实现两个网络调试助手的UDP通信测试。 二、网络调试助手软件 我使用的网络调试助手软件是&#xff1a;网络调试助…
阅读更多...
Revit 中参数化多边形的画法？

Revit 中参数化多边形的画法？

Revit 中参数化多边形的画法 问题提出 :在 Revit 中&#xff0c;系统画多边形的命合都无法参数化&#xff0c;网上有“六边形”参数化的画法教学 ( 这个教学被收入《每日一技》第 76期“Revit 中族编辑时可控六边形的画法详解”)&#xff0c;却对任意多边形无可奈何。 网上及前…
阅读更多...
Spring-全面详解（学习总结---从入门到深化）

Spring-全面详解（学习总结---从入门到深化）

目录 Spring简介 Spring体系结构 IOC_控制反转思想 IOC_自定义对象容器 IOC_Spring实现IOC IOC_Spring容器类型 ​ 容器实现类 IOC_对象的创建方式 使用构造方法 使用工厂类的方法…
阅读更多...
少儿编程 电子学会图形化编程等级考试Scratch一级真题解析（判断题）2022年9月

少儿编程 电子学会图形化编程等级考试Scratch一级真题解析（判断题）2022年9月

2022年9月scratch编程等级考试一级真题 判断题（共10题，每题2分，共20分） 26、一个角色只能包含一个造型 答案：错 考点分析：考查角色造型，一个角色可以有多个造型，所以错误 27、我们可以根据需要将角色的任意一点设为造型中心 答案：对 考点分析：考查角色造型，角色…
阅读更多...
CC1310F128RSMR Sub-1GHz射频微控制器 - MCU 433MHz 868MHz 915MHz ULP Wireless MCU

CC1310F128RSMR Sub-1GHz射频微控制器 - MCU 433MHz 868MHz 915MHz ULP Wireless MCU

CC1310F128RSMR Sub-1GHz射频微控制器 - MCU 433MHz 868MHz 915MHz ULP Wireless MCU CC1310设备是德州仪器公司生产的一款性价比高、超低功耗、Sub-1GHz射频设备,这是SimpleLink的一部分,微控制器&#xff08;MCU&#xff09;平台。该平台包括Wi-Fi&#xff0c;蓝牙低能耗&am…
阅读更多...
世界杯中隐藏的IoT物联网黑科技

世界杯中隐藏的IoT物联网黑科技

世界杯首个大冷门上演&#xff01;&#xff01;夺冠热门阿根廷竟然一比二输给了沙特队&#xff0c;实在让人始料未及&#xff0c;让不少球迷都在黯然神伤。 回过头看&#xff0c;上半场4粒进球&#xff0c;被判越位无效的有3粒。整场比赛累计7次越位判罚&#xff0c;超过了上届…
阅读更多...
APS智能排产系统的优势

APS智能排产系统的优势

APS智能排产系统是通过同步考虑多种有限能力资源的约束&#xff0c;依据各种预设规则&#xff0c;针对解决&#xff1a;客户订单交期评估与答复、人工排产效率低、设备资源利用率低、物料计划与生产计划脱节、生产计划执行率低、库存积压与生产缺料等相关问题&#xff0c;依靠严…
阅读更多...
WebRTC技术专题（2）【大势所趋，迈向认识 WebRTC 的第一步】

WebRTC技术专题（2）【大势所趋，迈向认识 WebRTC 的第一步】

每日一句 人生的挑战&#xff0c;无处不在&#xff0c;满怀信心&#xff0c;轻装上路&#xff0c;明天永远是充满希望的战场。 承接上文 承接上文的内容介绍完相关WebRTC技术的概念和发展历程后&#xff0c;开始初步摸索一下相关WebRTC技术的功能和原理。 技术回顾 WebRTC概念…
阅读更多...
字符串压缩（二）之LZ4

字符串压缩（二）之LZ4

一、LZ4压缩与解压 LZ4有两个压缩函数。默认压缩函数原型&#xff1a; int LZ4_compress_default(const char* src, char* dst, int srcSize, int dstCapacity); 快速压缩函数原型&#xff1a; int LZ4_compress_fast (const char* src, char* dst, int srcSize, int dstCapaci…
阅读更多...
router路由的配置和使用（详细教程）

router路由的配置和使用（详细教程）

vue路由的原理&#xff1a; 路由就是专门来实现单页面应用的&#xff1b;根据不同的路径&#xff0c;加载不同的组件&#xff1b;路径和组件之间一一映射的关系&#xff1b;路径&#xff0c;组件一一对应&#xff1b;加载这个路径&#xff0c;这个组件就出来了&#xff1b;原理…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023