要怎么才可以发布一个自己的npm包?

最近开发遇到一个问题,自研公司有很多很多个项目,老的,新的,不同框架的。而且业务逻辑比较复杂。我遇到的一个问题是,同样逻辑的一些业务函数和工具函数(比如一些复杂的金额计算),我居然要每个项目都复制一次才能用。而且如果业务出现变化,又要在每个项目里面去修改多次。

所以干脆弄一个npm包,每个项目下载依赖,这样业务逻辑出现变动的时候,只要修改依赖项目,然后重新下载即可。

so,进入本文正题,我们如何上传一个依赖包?

请先准备科学上网。

步骤

第一步

首先你需要一个npm官网的账号 www.npmjs.com/

没有npm账号又不知道怎么注册的萌新,请参考:npm官网注册教程

第二步

新建一个文件夹 gbye_util_pack,然后进入当前文件夹,然后进入当前文件夹,执行 npm init 命令。

对于不熟悉的小伙伴,执行完npm init以后建议一路回车,这里的内容都是可以在生成的package.json文件里再进行编辑的。

回车结束后你会得到一个package.json文件,现在这个项目是这样的↓

swift 复制代码
{
  "name": "gbyz_util_pack", // 包名,包名不允许重复,npm i XXX 下载就是按这个包名下载的
  "version": "1.0.0", // 版本号  --默认是1.0.0,当然版本号可以随意更改
  "author": "工边页字", // 作者名称
  "description": "", // 描述信息--可以不写
  "keywords": ["utils", "format", "money", "phone"], // 关键词,提升SEO  --可以不写
  // 代码托管的位置 --可选,建议必选,除非不打算维护
  "repository": {
    "type": "git",
    "url": "https://github.com/xxxx/xxxx.git"  //代码托管地址
  },
  "license": "ISC", // 许可证 
  "homepage": "", // 这个包的介绍网站首页 --可以没有
  "bugs": "", // 使用者bug反馈地址  ---可以没有
  "main": "index.js", // 入口文件  默认是index.js 可修改 必填
  "scripts": {
    // 存放可执行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    // 运行依赖
  },
  "devDependencies": {
    // 开发依赖
  }
}

如果想知道更多关于package.json的文件配置,请参考 package.json | npm Docs (npmjs.com)这个网址。

第三步

在当前目录下建立一个index.js文件,然后在当前index.js文件中开始编写你的函数。

然后去github建立上传当前github的托管地址。 (没有git地址也可以发布成功并引用,但为了后续可以维护,建议还是推一下git)

csharp 复制代码
  git init
  git add .
  git commit -m "first commit"
  git branch -M main
  git remote add origin https://github.com/xxxxx/xxxx.git
  git push -u origin main
  

注意,执行 git push -u origin main的时候如果报了以下的错,关掉科学工具再试一次。

确认代码已经成功上传以后

第四步

执行 npm config get registry 查看自己的npm的地址 如果不是 registry.npmjs.org/ 这个默认地址,则执行 npm config set registry registry.npmjs.org/ 修改npm镜像源地址

然后再次执行 npm config get registry 确认地址是否已经更改

这样就好啦

设置和确认完毕镜像源之后执行npm login进行登录

如何确认是否已经登录?执行 npm whoami 查看,执行完毕后如果出现了你的用户名,那就是登录了,如图↓

最后执行 npm publish 进行发布即可。

如何查看是否已经发布?

这里有就是发布成功了。

我们尝试引用这个包

自己随便启一个基础项目,像正常下载依赖那样下载刚刚推送上去的包 npm i XXXX (XXX就是你的包名)。然后使用就好了。

注意,一个常见的错误

403 Forbidden - PUT registry.npmjs.org/gbyz_util_p... - You cannot publish over the previously published versions: 1

这个错误的意思是,当前版本已存在,需要修改版本号

当然,其实我们本身用到npm包的场景很少,除了为自家公司项目的定制化包,大部分需求社区都有提供第三方包。

最后

记不住吗,没关系~ 收藏一下,下次发包的时候再拿出来看就好嘞~

如果文章对你有帮助的话~

相关推荐
前端之虎陈随易13 小时前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·vue.js·人工智能·typescript·node.js
一路向北he13 小时前
字节钢铁军团--“提供情境,而非控制”
java·开发语言·前端
kyriewen13 小时前
豆包和千问同时关了智能体,我用它们搭的 3 个自动化全废了——迁移方案整理
前端·javascript·ai编程
前端一小卒13 小时前
我用 TypeScript 从零手写了一个 Claude Code,然后发现它的核心只有 30 行
前端·agent
Waay13 小时前
面试口述版:个人对 Prometheus 完整理解
运维·学习·云原生·面试·职场和发展·kubernetes·prometheus
大圣编程15 小时前
Python中continue语句的用法是什么?
开发语言·前端·python
yuhaiqiang15 小时前
随手 vibecoding 的浏览器插件已经 6000 多次下载,聊聊他的产品设计
前端·后端·面试
之歆16 小时前
Vue商品详情与放大镜组件
前端·javascript·vue.js
再吃一根胡萝卜16 小时前
如何把小米 MiMo 接入 CodeBuddy,打造私有 Agent
前端
负责的蛋挞17 小时前
异步HttpModule的实现方式
java·服务器·前端