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

最后

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

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

相关推荐
Leyla4 分钟前
【代码重构】好的重构与坏的重构
前端
影子落人间7 分钟前
已解决npm ERR! request to https://registry.npm.taobao.org/@vant%2farea-data failed
前端·npm·node.js
世俗ˊ32 分钟前
CSS入门笔记
前端·css·笔记
子非鱼92132 分钟前
【前端】ES6:Set与Map
前端·javascript·es6
6230_36 分钟前
git使用“保姆级”教程1——简介及配置项设置
前端·git·学习·html·web3·学习方法·改行学it
想退休的搬砖人1 小时前
vue选项式写法项目案例(购物车)
前端·javascript·vue.js
加勒比海涛1 小时前
HTML 揭秘:HTML 编码快速入门
前端·html
啥子花道1 小时前
Vue3.4 中 v-model 双向数据绑定新玩法详解
前端·javascript·vue.js
麒麟而非淇淋1 小时前
AJAX 入门 day3
前端·javascript·ajax
茶茶只知道学习1 小时前
通过鼠标移动来调整两个盒子的宽度(响应式)
前端·javascript·css