Gitlab 发布 npm 包到 Npm 公共仓库

• #gitlab

一、本地创建项目

本文以 Dumi 为例介绍使用 Gitlab CI 自动化往 Npm 公共仓库发布 npm 包，其它框架或者不使用框架流程类似。

# 找个地方建个空目录
$ 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 页面可以看到已经有代码了。

三、创建 NPM 仓库 Access token

要发布 npm 包，首先需要在 Npm 网站 注册一个用户，这里不再赘述。

正常情况我们发布 npm 包会先敲 $ npm login，终端里会交互式让我们依次输入邮箱、密码等信息认证身份，完事了再敲 $ npm publish 发布包。

使用 Gitlab CI 发布包，不希望交互式登录，Npm 网站提供 Access token 代替交互式登录。

打开 Npm 网站 进行登录，然后点击右上角头像，在下拉弹窗里找到 Access Tokens 选项，点击进入。点击 Generate New Token 下拉按钮，选择 Granular Access Token，按要求填写信息后会生成 token，将这个值保存在本地，关闭窗口就无法再查看 token 了。

到这里，拥有这个 token 的人就可以发布包了，如果 token 被别人知道了，那别人就可以用你的身份往 Npm 仓库发布包。

四、编写 .gitlab-ci.yml 文件

image: node:latest

publish-npm:
  stage: deploy
  script:
    - echo "registry=https://registry.npmjs.org" > .npmrc
    - echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
    - npm install
    - npm run build
    - npm publish

echo 的内容是在发布包时告诉 npm 往 Npm 公共仓库发布包，带上 :authToken=${NPM_TOKEN} 是告诉 npm 使用 Access token 进行认证发布人身份，而不是交互式地输入邮箱和密码认证发布人身份。

这里的 ${NPM_TOKEN} 是个变量名，需要配置一下具体值。Gitlab 左边面板点击 Settings > CI/CD，找到 Variables 展开选项，点击 Add variable 按钮，输入 Key 为 NPM_TOKEN，Value 为刚才生成的 Access token，点击 Save 保存。

五、发布包验证

将本地代码 push 到远程仓库，Gitlab 左边面板 Build > Pipelines，可以看到正在跑 .gitlab-ci.yml 脚本内容。

当显示 Passed 时表示脚本运行成功，此时去 NPM 网站 可以搜到刚发布的包。

如果是 Error 就需要看下是不是脚本哪里写的不对。（需要讨论可以联系笔者 email: me@dkvirus.com）

↶ 返回首页