介绍
本篇文章主要为面向还没有上传过自己的 npm 包,或者时间久想要回忆下的同学。
学习本篇文章你需要做以下准备工作:
- 对 npm 有简单了解
- 知晓镜像,及对应管理镜像的 nrm 依赖
- 需要有 npm 账号,没有的话需要去注册一个
- 准备上传到 npm 的项目一个,最好文件夹名与上传的包名统一
- 了解 npm 包的命名规则
- 确保自己命名的 npm 包的名称在 npm 官网搜索不到,或没有相近名称的包
以上都准备好的话,就可以按照步骤一步一步实现上传自己的包了。
本篇以一个简单的‘时间转周几’的包来实现,过程不大严谨,也未考虑过多的复杂场景,适合新手拿教程使用。
1. 注册 npm 账号
步骤:
- 打开 npm 官网
- 点击
sign in
- 依据提示注册,注意邮箱一定要写一个自己使用的,因为 npm 会做邮箱认证,这将影响到接下来的 npm 包上传
- 注册完成后会自动登录,这个时候 npm 官方会发送验证邮件,需要登录邮箱 > 点击链接 > 点击 continue,邮箱验证完毕
2. 准备上传的 npm 包文件
-
首先进入文件夹,执行 npm init,初始化自己的 package.json 文件,下图是我的要上传的 npm 包文件夹
-
注意 npm init 中,name 就是自己要上传的包的名称,version 就是版本名称,git repository 是仓库链接,可不写,author 是作者名,description 是对包的一个功能描述,main 是指向入口文件,一般默认 index.js 就好。这里面 name 和 version 是一定要填写的,其他可根据需要填写
-
npm init 执行完毕并生成 package.json 文件
-
准备入口文件 index.js
-
准备要实现的功能文件,我是放在了 src 文件夹下
-
入口文件引入放在 src 文件夹下的功能文件
3. 本地测试
以上都准备完毕了,就可以先本地测试一版了,本地测试通过后就可以上传了。另:本地测试推荐使用全局测试,这样就可以在任意文件目录使用了,测试命令 npm link
这里的根目录统一为 zxn-date-formater 文件夹根目录
- 在要上传的 npm 文件根目录下执行 npm link,生成全局的 npm 包
- 再去需要验证的某个项目根目录下执行 npm link [包名],这时就会发现在 node_module 文件夹下找到这个文件
- 引入依赖并测试
4. 上传 npm 包
在要上传的 npm 包根目录下执行以下步骤,并确保此时的镜像是指向了 npm 的,如果不是可通过 nrm ls 查看当前有哪些镜像,并 nrm use [镜像名] 切换镜像
- 执行 npm adduser,输入自己的账号、密码、邮箱
- 执行 npm whoami,查看是否是自己账号,如果显示出自己账号则代表成功
- 执行 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包