之前在研究如何搭建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/包名称