发布npm包到GitLab教程

news2024/9/25 9:28:46

之前在研究如何搭建UI组件库（内部使用），其中重要的一步就是发布npm包到GitLab。中间踩了很多坑，在这里记录一下整个流程方便大家快速上手。不足之处欢迎指出🙏

1. 获取Token

在gitlab中打开access tokens申请页面，新增一个至少拥有read_registry,write_registry权限的Token,建议全部勾选,申请后保存下来。
在这里插入图片描述

2.新建项目

新建一个文件夹npm-demo，目录结构如下：
在这里插入图片描述
执行命令npm init创建一个package.json文件，按照提示填写相关内容（一般默认即可，后面还可以改）。

// package.json
{
  "name": "@scope/npm-demo", // scope 换成自己的项目组
  "version": "1.0.1",   // 版本号，每次发布要修改，不能重复
  "description": "publish the npm package to gitlab",
  "main": "index.js",   // 入口文件
  "type": "module",  // 使用 ES 模块规范（index.js中用到了export）
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm",
    "gitlab"
  ],
  "author": "joshuali",
  "license": "ISC"
}

新建一个js文件，写一个sum函数

// index.js
export function sum(a, b) {
  return a + b;
}

新建一个npm配置文件.npmrc，内容如下

# .npmrc
@scope:registry=https://your_domain_name/api/v4/projects/your_project_id/packages/npm/
//your_domain_name/api/v4/projects/your_project_id/packages/npm/:_authToken="${NPM_TOKEN}"

@scope替换为要发布包的项目组名。
your_domain_name替换为你们公司gitlab的域名。注意前面是https还是http
your_project_id替换为项目 ID，可在项目概述页面上找到。
"${NPM_TOKEN}"与您稍后在流程中创建的令牌相关联。

3.推送包

在git bash窗口:
NPM_TOKEN=your_token npm publish
在powershell窗口：
$env:NPM_TOKEN=“your_token”
npm publish

在这里插入图片描述
打开gitlab可以看到刚刚推送成功的包。

4.下载包

当前目录没有.npmrc文件：

npm config set – //your_domain_name/:_authToken=your_token
npm config set – //your_domain_name/api/v4/projects/your_project_id/packages/npm/:_authToken=your_token
npm install @scope/包名称