乐趣区

关于npm:还不知道npm私服一篇教会你搭建私服并发布vue3组件库到nexus

jiezi

介绍

继上一篇博客看了它！你也能轻松部署 vue3 组件库公布后，失去了很多小伙伴们的关注。

这篇还不晓得 npm 私服？一篇教会你搭建私服并公布 vue3 组件库到 nexus，有别于上一篇，此篇博客介绍了如何将 vue3 组件库公布到私服，而不是公布到 npm 官网仓库。

日常工作时，出于保密性、开发便捷性等需要，或者是还在内部测试阶段，咱们可能须要将 vue3 组件库部署到公司的 nexus 中。咱们可能心愿部署 vue3 组件库的操作是 CI/CD 中的一环。

当初建木 CI 有了主动公布构件的官网 npm 节点，这所有都将变得非常简单。

节点：npm 公布依赖包

筹备工作

  • 装置建木，参考建木如何部署
  • 装置 nexus 搭建 npm 私服，创立用户、开启 token 验证、生成 token

1. 装置 sonatype nexus

# docker search nexus 搜寻 nexus 下载量最高的那个 sonatype/nexus3
docker search nexus

# 从 docker hub 中将 sonatype nexus 拉取下来
docker pull sonatype/nexus3

# 启动 sonatype nexus 并使其监听 8081 端口
docker run -d -p 8081:8081 --name nexus sonatype/nexus3

拜访搭建的 nexus，能够看到如下界面，那么 nexus 搭建胜利

接下来，须要登录管理员(第一次登录会提供明码，而后要求改明码)，创立 Blob Stores 的数据池地址，供前面仓库抉择

创立咱们的公有 npm 库，须要留神的是咱们要创立三个仓库(仓库名有辨识即可)

  • group 见名知意，是一个仓库组，蕴含多个具体的仓库(proxy、hosted)
  • hosted 本地仓库，就是咱们外部公布包的地址
  • proxy 代理仓库，会去同步代理仓库的 npm 包(即下载本地仓库没有的包时，会去代理仓库下载，代理仓库可设置为官网仓库)

创立 proxy 仓库，须要设置一些值

创立 hosted 仓库，须要设置一些值

创立 group 仓库，抉择咱们之前创立的两个仓库

功败垂成！查看这个 hosted 类型的地址，建木 CI 流程编排须要这个地址作为参数

还须要私服的 token，须要先创立一个账户，用于本地生成 token

开启 nexus 的用户 token 权限验证

须要本地设置 hosted 类型仓库地址，npm config set registry http://xxx:8081/xxx/npm_hosted 而后 npm login 获取 token

增加 token 到建木的密钥，先创立命名空间 npm，在该空间下创立账户的密钥 wllgogogo_token

2. 筛选节点

建木是一个节点编排工具，那么咱们须要筛选适合的节点实现一系列的业务操作

  • git clone 节点

应用 git clone 节点，将咱们须要部署的前端 npm 包我的项目从近程仓库上拉取下来。git clone 节点的版本，咱们抉择 1.2.3 版本

如下图：拜访建木 Hub 能够查看节点详细信息，比方，git clone 节点的参数，源码，版本阐明等信息

  • nodejs 构建节点

应用 nodejs 构建节点，会将咱们 clone 下来的我的项目进行 build 构建，本文咱们将用到 1.4.0-16.13.0 版本

如下图查看此节点的详细信息：

  • 公布 npm 依赖包节点

应用公布 npm 依赖包节点，会将咱们 build 后的我的项目公布到公服或私服，从 1.1.0-16.15.0 版本开始反对私服的公布

如下图查看此节点的详细信息：

3. 编排流程

节点选好了，得把它们编排在一起，目前建木提供了两种形式来编排节点:

应用建木的 DSL 来编排节点
应用建木图形化编排性能来编排节点

首先编辑我的项目信息

从右边抽屉中将所需的三个节点拖拽进去

填充节点参数填充参数之前，将三个节点连起来，如图：这个箭头能够实现的性能有：

  • 定义流程运行先后顺序将上游节点的输入参数输入到上游节点，这里的 git clone 节点输入参数将被输入到后续所有节点

点击节点图标开始填充参数 git clone 节点这里咱们配置一个须要部署的 npm 包 我的项目的 git 地址，抉择 1.2.3 版本，改名 git_clone

  • nodejs 构建节点

同样配置此节点的必须参数

1. 节点版本：nodejs 构建节点的版本抉择 1.4.0-16.13.0
2. 工作目录：须要 build 的我的项目门路
3.registry url：给包管理工具设置镜像，个别设置淘宝镜像 registry.npmmirror.com/
4. 包管理器类型：依据具体我的项目状况来抉择包管理器，这个我的项目构建用的是 pnpm
5. 我的项目 package.json 文件目录相对路径：package.json 目录绝对地址，读取 name 和 version

nodejs 构建节点的工作目录参数援用了 git_clone 节点的输入参数（git_clone 作为上游节点将它的输入参数作为 nodejs 构建的输出参数传递给 nodejs 构建节点），下图演示了上游节点如何抉择上游节点的输入参数作为本人的输出参数

公布 npm 依赖包节点

1. 节点版本：抉择 1.1.0-16.15.0
2. 工作目录：公布包目录
3. 镜像仓库：后面筹备工作 nexus 创立的 npm 本地仓库地址
4.token 令牌：后面筹备工作 nexus 创立的用户，在本地设置 hosted 地址后，执行 npm login 生成的 token

公布 npm 包 构件到 nexus

启动流程

如下图启动流程

流程运行中

流程运行胜利

查看每个节点的运行日志 git clone 节点：

nodejs 构建节点

公布 npm 依赖包节点

在 nexus 中查看部署的 npm 依赖包

至此，咱们曾经应用建木 CI 胜利将 npm 依赖包部署到了 nexus 上！阐明想必大家对图形化编排十分感兴趣，其实图形化编排流程底层也是生成了一个流程 DSL，如果想参考本次测试流程具体生成的 DSL，能够移步此处 npm 公布 nexus

官⽹：https://jianmu.dev
代码：https://gitee.com/jianmu-dev
文档：https://docs.jianmu.dev
示例：https://ci.jianmu.dev

退出移动版