如何上传一个自己的 npm 包

介绍

本篇文章主要为面向还没有上传过自己的 npm 包,或者时间久想要回忆下的同学。

学习本篇文章你需要做以下准备工作:

  1. 对 npm 有简单了解
  2. 知晓镜像,及对应管理镜像的 nrm 依赖
  3. 需要有 npm 账号,没有的话需要去注册一个
  4. 准备上传到 npm 的项目一个,最好文件夹名与上传的包名统一
  5. 了解 npm 包的命名规则
  6. 确保自己命名的 npm 包的名称在 npm 官网搜索不到,或没有相近名称的包

以上都准备好的话,就可以按照步骤一步一步实现上传自己的包了。

本篇以一个简单的‘时间转周几’的包来实现,过程不大严谨,也未考虑过多的复杂场景,适合新手拿教程使用。

1. 注册 npm 账号

步骤:

  1. 打开 npm 官网
  2. 点击 sign in
    sign in
  3. 依据提示注册,注意邮箱一定要写一个自己使用的,因为 npm 会做邮箱认证,这将影响到接下来的 npm 包上传
  4. 注册完成后会自动登录,这个时候 npm 官方会发送验证邮件,需要登录邮箱 > 点击链接 > 点击 continue,邮箱验证完毕

2. 准备上传的 npm 包文件

  1. 首先进入文件夹,执行 npm init,初始化自己的 package.json 文件,下图是我的要上传的 npm 包文件夹
    npm 包目录

  2. 注意 npm init 中,name 就是自己要上传的包的名称,version 就是版本名称,git repository 是仓库链接,可不写,author 是作者名,description 是对包的一个功能描述,main 是指向入口文件,一般默认 index.js 就好。这里面 name 和 version 是一定要填写的,其他可根据需要填写

  3. npm init 执行完毕并生成 package.json 文件

  4. 准备入口文件 index.js

  5. 准备要实现的功能文件,我是放在了 src 文件夹下

  6. 入口文件引入放在 src 文件夹下的功能文件

3. 本地测试

以上都准备完毕了,就可以先本地测试一版了,本地测试通过后就可以上传了。另:本地测试推荐使用全局测试,这样就可以在任意文件目录使用了,测试命令 npm link
这里的根目录统一为 zxn-date-formater 文件夹根目录

  1. 在要上传的 npm 文件根目录下执行 npm link,生成全局的 npm 包
  2. 再去需要验证的某个项目根目录下执行 npm link [包名],这时就会发现在 node_module 文件夹下找到这个文件
  3. 引入依赖并测试

4. 上传 npm 包

在要上传的 npm 包根目录下执行以下步骤,并确保此时的镜像是指向了 npm 的,如果不是可通过 nrm ls 查看当前有哪些镜像,并 nrm use [镜像名] 切换镜像

  1. 执行 npm adduser,输入自己的账号、密码、邮箱
  2. 执行 npm whoami,查看是否是自己账号,如果显示出自己账号则代表成功
  3. 执行 npm publish,如果一切顺利则会推送成功,如果报错则问题一般是镜像不是 npm,或者包名在 npm 中已存在,或存在相近的

5. 验证上传的 npm 包

方式一:登录自己的 npm 账号,可看到自己的仓库里已经有相应的包,可点击名称进入查看
仓库包
方式二:npm i [包名],下载下来自己的 npm 包,并验证执行,如:

npm i zxn-date-formater -D

可在 package.json 文件中看到已引入了该依赖,然后可正常在文件中引入,如:

import getWeekDay from 'zxn-date-formater'

console.log(getWeekDay('2021-12-15'))

最后

感谢这几篇文章的作者
本地调试 npm 模块 —— npm link
如何发布个人npm包

posted @ 2021-12-15 20:06  土地情缘  阅读(776)  评论(0编辑  收藏  举报