如何发布自己的npm包

250 阅读3分钟

为什么要把自己的代码上传到npm上?

  • 优秀的代码供所有人复用
  • 提升职场竞争力 ----- 在团队其它同事没有做,你做了!
  • 有了这个目标,我们写项目(写代码)时,就会更加考虑代码的通用性。

初始化npm包

要先创建一个空目录,然后给文件夹取一个名字,注意名字取好后要先检查一下这个项目名是否已经被占用,如果被占用了你是发布不了的。

文件名检查方式

npm view 包名
# 这个命令用来查看 某个包的信息
# 如果返回404,说明这个项目名在npm官网上找不到,此时你就可以使用。
# 否则,说明不可用。

创建一个package.json文件

 npm init --yes
 使用这个命令创建一个package.json文件里面可以修改项目信息

package.json文件中的内容

  • name:包的名字,后续在npm搜索时用的这个名字。
  • version:版本号,每发布一次包的版本号都要大于之前,可以在里面手动调整版本号。
  • description:描述
  • main:本包向外暴露的文件,很重要,一定要和你打包出来的文件名一模一样,我的叫做"index.js"
  • keywords:关键字
  • author:作者名
  • license:版权声明

完成功能开发

snipaste20220428_205028.jpg 正常开发,完成你的代码。在默认情况下,index.js是这个项目的入口文件。
下面是index.js里的代码示例

const formatDate = (dateTime) => {
  const date = new Date(dateTime) // 转换成Data();
  const y = date.getFullYear()
  let m = date.getMonth() + 1
  m = m < 10 ? '0' + m : m
  let d = date.getDate()
  d = d < 10 ? ('0' + d) : d
  return [y, m, d].join('-')
}

//导出
module.exports = {
  formatDate
}

检查npm源

由于我们需要把包上传到npm上,所以要先确保当前的npm源是npmjs.org。与之相关的命令有如下两条。

npm config get registry 
# 查看当前的npm的registry配置,确保是https://registry.npmjs.org

# 如果不是,可以通过如下命令来设置
npm config set registry https://registry.npmjs.org 
# 手动设置registry

确保当前的npm源是npmjs.org后就可以链接npm了

#输入命令
npm adduser

这个命令需要输入四个信息以供连接上npmjs:

  • 用户名
  • 密码
  • 邮箱(是你在npmjs官网上注册时使用的信息)
  • 校验密码。它会向你的邮箱发邮件

只有第一次连接时需要用到,如果你已经不是第一次连接了,这一步是可以省略的。

你也可以通过如下命令检查自己是否连接成功了

 npm who am i

如果成功会显示你的用户名,接着就可以进行最后一步了:publish

如果想退出输入命令

npm logout

把包上传到npm

命令:npm publish

如果上传成功会显示下面的效果:

npm notice
npm notice package: ched@1.0.0
npm notice === Tarball Contents ===
npm notice 312B index.js
npm notice 218B package.json
npm notice === Tarball Details ===
npm notice name:          ched
npm notice version:       1.0.0
npm notice filename:      ched-1.0.0.tgz
npm notice package size:  468 B
npm notice unpacked size: 530 B
npm notice shasum:        60bea29bc06575fa7fa5641c63842cfd1c6f2c67
npm notice integrity:     sha512-qFOeF2Ppsbb3v[...]skJpjuNXMGijg==
npm notice total files:   2
npm notice
npm notice Publishing to https://registry.npmjs.org/

出错的可能是:

  • 这个包名被别人先用了。
  • 包的版本号不对:每次publish时,包的版本号都应该要大于之前的版本号。

image.png

  • 文件过大。你可能需要创建.npmignore文件来设置在打包时要忽略哪些文件。如下是一个demo.
# .npmignore
/node_modules
npm-debug.log
/src
/examples
/build

如果没有报错,则表示一切ok,你可以用你的帐号密码登陆npm,去查看你名下的package是否有了这个包。

下载使用

通过npm install 包名即可来安装包,拿来使用。

删除包

npm unpublish --force //强制删除

如果你的包没有什么用处,建议删除掉,以节约公共资源。

更新包

  1. 修改代码,保存。
  2. 更新版本号。可直接在package.json中修改注意:只能改大,不能改小。
  3. 重新publish