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

最后

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

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

相关推荐
用户938515635071 分钟前
Type vs Interface:读完这篇就没有面试官能难倒你了
前端·面试·typescript
油丶酸萝卜别吃1 小时前
jquery-ajax.js 说明文档
前端·javascript·jquery
windliang1 小时前
Claude Code 源码分析(九):子 Agent 如何分叉、继续与回到父会话
前端·javascript·面试
柒和远方2 小时前
V063: TS 面试必考:interface 与 type 的四大差异,与 LLM Harness 的自动化择优
前端·javascript
半个落月2 小时前
React useRef 详解:DOM 引用、持久化值与 Worker 实例
前端·react.js
阿黎梨梨2 小时前
TypeScript 类型编程:从新手到 Harness 工程实践
前端
黄金决明子2 小时前
Vue3 + Vite 打包后打开空白?
前端
张龙6872 小时前
终端效率翻倍实战:fzf + zoxide + ripgrep + bat 组合拳,告别重复敲命令
前端
宿6742 小时前
vue3-env环境
前端·vue.js
蔬菜_2 小时前
前端转全栈-day5(数组、list、set)
java·前端·数据结构·list