Gitlab 发布 npm 包到 Gitlab 私有仓库

2024-10-28

#gitlab

随着公司前端项目增多，考虑创建一个组件库项目来存放公共组件和通用函数，其它项目通过 npm 包的方式引入它。由于是公司内部项目，不能直接发布到 npm 公共仓库，考虑使用 Gitlab 的私有仓库来管理 npm 包。

一、创建组件库项目

本文使用 dumi 作为组件文档项目框架，你也可以使用其它框架如 storybook、docz 等。

# 找个地方建个空目录
$ mkdir demo-ui && cd demo-ui

# 通过官方工具创建项目，选择你需要的模板
$ npx create-dumi

# 选择二个模板
$ ? Pick template type › - Use arrow-keys. Return to submit.
$     Static Site # 用于构建网站
$ ❯   React Library # 用于构建组件库，有组件例子
$     Theme Package # 主题包开发脚手架，用于开发主题包

# 安装依赖后启动项目，访问 http://localhost:8000 可以看到组件示例文档
$ npm start

二、创建 Gitlab 项目

在 Gitlab 上面创建私有项目：demo-ui，用如下命令将本地项目上传到 Gitlab 仓库。

$ cd demo-ui
$ git init --initial-branch=main
# --------------> 这里换成你新建仓库的地址 <----------------
$ git remote add origin git@gitlab.com:dkvirus/demo-ui.git
$ git add .
$ git commit -m "Initial commit"
$ git push --set-upstream origin main

这一步完成后，刷新 Gitlab 页面可以看到已经有代码了。

左边面板点击 Deploy > Package Registry，这会儿看还是空的，待会儿上传 npm 包实际上就是上传到这个地方。

三、往 Gitlab 私有仓库发布包

.gitlab-ci.yml

在项目根目录下创建 .gitlab-ci.yml 文件，内容如下：

image: node:latest

publish-npm:
  stage: deploy
  script:
    - echo "@dkvirus:registry=https://${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/" > .npmrc
    - echo "//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}" >> .npmrc
    - npm install
    - npm run build
    - npm publish

echo 开头的两行非常关键:

告诉 npm 不要往默认的 npm 公共仓库上传代码，而是往 Gitlab 私有仓库上传代码；
其中有很多变量，它们是 Gitlab 提供的变量，在实际跑脚本时会自动替换为指定的值；
修改 @dkvirus:registry，将这里的 dkvirus 改成你想要的域前缀，比如这里是 @dkvirus:registry，之后上传的 npm 包名就是 @dkvirus/demo-ui

package.json

打开 package.json 文件，检查里面的 name 字段是否正确。如果上一步 echo 后面你写的是 @test:registry，那么这里的 name 就要写成 @test/demo-ui，这个需要一致。

{
  "name": "@dkvirus/demo-ui",
  // ...
}

检查脚本运行状态

将本地代码 push 到远程仓库，在 Gitlab 左边面板点击 Build > Pipelines，可以看到正在跑 .gitlab-ci.yml 脚本内容，当显示 Passed 时表示脚本运行成功，如果是 Error 就需要看下是不是脚本哪里写的不对。（需要讨论可以联系笔者 email: me@dkvirus.com）

查看 Gitlab 私有仓库

Gitlab 左边面板点击 Deploy > Package Registry，这会可以看到刚刚上传的 npm 包。

去 npm 公共仓库里搜是没有这个包的，确实做到了私有。

四、从 Gitlab 私有仓库安装包

Deploy tokens

Gitlab 私有仓库既然是私有仓库，意味着不是所有人都可以从里面下载包。
Gitlab 会生成一个 Deploy token，拥有这个 token 的人可以从仓库中下载包。

Gitlab 左边面板点击 Settings > Repository，右边可以看到 Deploy tokens 选项，展开它然后创建一个新 token。一定要勾选 read_package_registry 和 write_package_registry，这样生成的 token 才有从 Gitlab Package Registry 里面上传/下载的权限。

点击 Create deploy token 按钮后，页面上会出现 token，如下图 gldt- 开头的字符串就是 token 值，在本地保存好，这个界面关掉之后就无法再查看 token 了。如果别人拿到了这个 token，意味着别人也可以从 Gitlab 私有仓库下载包，所以需要保管好。

.npmrc

修改 .npmrc 文件，里面追加两行代码，告诉 npm 先去 Gitlab 私有仓库下载包，如果找不到包，会自动重定向到 npm 公共仓库下载包。

@<scope>:registry=https://gitlab.com/api/v4/projects/<project_id>/packages/npm/
//gitlab.com/api/v4/projects/<project_id>/packages/npm/:_authToken=<NPM_TOKEN>

其中有三个地方需要替换值：

<scope> 就是第三步中提到的域前缀，比如这里是 dkvirus
<project_id> 可以从 Settings > General 里面获取到
<NPM_TOKEN> 就是刚刚创建的 Deploy token 值: gldt- 开头的字符串

验证安装依赖

到这里为止，你可以在其它项目中安装 demo-ui 了。

$ npm install @dkvirus/demo-ui

↶ 返回首页

本文总阅读量次