在npm上发布一个自己的包

前端开发将自己编写的常用组件、工具模块、指令，常用api库、框架等代码，为了能够更好、更灵活的管理这些代码，上传到npm库是一个非常好的选择方式。

一、官网注册

首先要在npm官网官网注册自己的npm账户（国外的网站，特别慢）

二、切换npm源

npm config get registry （查看当前源）
npm config set registry https://registry.npmjs.org（切换为npm源）
npm config set registry=https://registry.npm.taobao.org（切换为淘宝镜像）

注意：发布包时要使用 https://registry.npmjs.org（npm源）
注意：淘宝镜像会报错

三、控制台注册npm账号

1、在控制台注册帐号：

npm adduser

• 依次填写用户名、密码、邮箱等

2、在控制台登录帐号：

npm who am i（查看登陆状态）
npm login （按照提示输入用户名,密码（不显示的）,邮箱，邮箱验证码即可）

• 在命令行中运行 npm login 来登录到你的 npm 账号。输入正确的用户名、密码和电子邮件地址。
• Username:输入用户名
• Password:输入密码，这里是不显示的，不用担心，正常输入
• Email:输入邮箱
• Enter one-time password:输入发到邮箱的验证码
• 出现自己的账号即表示成功。
  

四、准备好自己的npm包

1、首先确保已经在本地开发好了需要发布的 npm 包。包括编写源代码、测试并修复 bug，然后将其打包成一个可供安装使用的文件（js,ts等）。

2、接下来，在项目根目录下运行 npm init 命令来生成一个新的 package.json 文件。该文件会记录你的 npm 包的相关信息，比如版本号、作者等。

• 指令：npm view （npm官网中查看mpn包名是否已经存在）
• 注：包名上传时会自动转小写，所以你还是用小写的名称

3、完成 package.json 配置后，可以选择性地添加一些其他必要的字段，比如 main 指定主模块的路径，scripts 设置构建和测试脚本等。

{
  "name": "ywl-watermark-vue", // 包的名称
  "version": "1.1.1", // 包的版本号
  "description": "vue指令，生成页面水印，vue2/3",
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
  "scripts": { },
  "keywords": [
    "vue2",
    "vue3",
    "directive",
    "js",
    "水印"
  ],
  "author": "yuwenlin",
  "license": "MIT",
  "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.com"
  }
}

4、最后，运行 npm publish 命令来发布你的 npm 包。注意，此时应当确认你的包符合 npm 官方的发布标准，否则可能无法被发布。

npm publish

发布成功（如图所示：）

目录结构

5、在npm库中查看（也可以登陆自己的账号在packages中查看）

五、npm包的更新、修改版本、删除npm包等

1、更新版本

npm version patch
或者
npm version minor
或者
npm version ajor

• patch：小变动，比如修复bug等，版本号变动 v1.0.0->v1.0.1
• minor：增加新功能，不影响现有功能,版本号变动 v1.0.0->v1.1.0
• ajor：破坏模块对向后的兼容性，版本号变动 v1.0.0->v2.0.0

2、重新发包（上传）

npm publish

3、删除指定包版本

npm unpublish <package-name@version>   // 包名@版本号 
如
npm unpublish ywl-watermark-vue@1.1.1   // 包名@版本号

3、删除整个包

npm unpublish <package-name> --force   // 包名
如
npm unpublish ywl-watermark-vue  --force  // 包名

关于如何上传自己的npm包的文章就介绍到这了，希望大家以后多多支持。