发布npm包到GitLab教程

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

1. 获取Token

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


2.新建项目

新建一个文件夹npm-demo,目录结构如下:

执行命令npm init创建一个package.json文件,按照提示填写相关内容(一般默认即可,后面还可以改)。

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函数

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

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

plaintext 复制代码
# .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/包名称

当前目录有.npmrc文件:

  • 在git bash窗口:
    NPM_TOKEN=your_token npm install @scope/包名称
  • 在powershell窗口:
    $env:NPM_TOKEN="your_token"
    npm install @scope/包名称

5.使用

参考资料:包注册表中的 npm 包 |GitLab的

相关推荐
xiaoqi92214 分钟前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
打小就很皮...27 分钟前
Tesseract.js OCR 中文识别
前端·react.js·ocr
qq_1777673737 分钟前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
2603_9494621043 分钟前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter
wuhen_n1 小时前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon1 小时前
理解vue中的ref
前端·javascript·vue.js
jin1233222 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos
2501_920931702 小时前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
落霞的思绪3 小时前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q3 小时前
CSS 笔记2 (属性)
前端·css·笔记