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

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

    版本格式：主版本号.次版本号.修订号（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",

    • 1

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

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

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

// 重新发布
npm publish

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    注意：如果你更新了你的工程，需要重新发布,记得要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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

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

    设置 Git 版本库标签

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

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

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

    在这里插入图片描述

    确认要发布的文件

    文件名：package.json

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

    • 1
    • 2
    • 3

    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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    利用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

    • 1
    • 2

    根据目前的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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    使用命令行工具执行

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

    • 1
    • 2
    • 3
    • 4

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

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

    • 1

    结果：

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

    • 1

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

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

    • 1

    结果：

      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/

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 切换为官方镜像
    nrm use npm

    • 1

    结果：

    Registry has been set to: https://registry.npmjs.org/

    • 1
    • 登录NPM
    npm login

    • 1

    结果：

    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/.

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 发布包
    npm publish

    • 1

    结果：

    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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    发布成功。

    首次发布后，其余更新就可以使用 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: "."

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

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

    • 创建Pull Request

    在这里插入图片描述

    • 合并pull request

    在这里插入图片描述

    • 查看工作流

    在这里插入图片描述

    • 查看npm包

    在这里插入图片描述

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

    1-更新版本

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

    • 1

    2-创建标签

    git tag 1.0.1

    • 1

    3-推送

    git push --tag

    • 1

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

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

    在这里插入图片描述

    完美。

  • 相关阅读:
    Eureka详解
    GPS硬件坐标转百度地图坐标
    学习ASP.NET Core Blazor编程系列十三——路由（完）
    中压电缆和高压电缆有哪些型号？它们的的执行标准是什么？
    [Qt基础内容-08] Qt中MVC的M（Model）
    风起乌兰察布，中国自动驾驶迎来170倍提速
    vue开始日期与结束日期分开选择，结束日期禁用开始选中日期
    【LeetCode-940 hard】不同的子序列 II
    pyinstaller 错误排查的验证史
    Vue学习笔记(2) 使用介绍
  • 原文地址：https://blog.csdn.net/qq_36362721/article/details/127975485