要怎么才可以发布一个自己的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包的场景很少,除了为自家公司项目的定制化包,大部分需求社区都有提供第三方包。

最后

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

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

相关推荐
大猫会长9 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_9 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe101010 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang11 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi12 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课15 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥15 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe101016 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋18 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe101019 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端