如何发布到NPM上(转)

article/2025/7/14 12:20:33

简要:这篇文章介绍了如何讲自己的包发布到NPM上，马克一下，将来有用

。。。

npm包发布

发布npm包，更方便以后下载使用。

我们已经把插件代码上传到github上面了，那么我们是否可以也做成一个npm包发布到npm上呢？答案是肯定的，如此一次，我们在需要使用到该插件的时候就可以直接npm i vpay等的实现安装到我们的项目中，岂不是很方便呢？

正如文章刚开始提到的文件目录，我们是把插件都写在了第二个lib中的。而整个vpay文件夹都是我们要作为npm包发布的。其中readme.md是说明文档，跟github上的一样，你可以简单的先拷贝根目录下的那个。

然后是vpay文件下面的index.js，里面就依据代码，即导出我们的插件：

module.exports = require('./lib')

由于我们在使用插件的时候，其实引入的就是这个index.js，所以在这个文件中，我们导出了我们的插件。

而下面重点要说的是这个package.json文件，这个一开始是没有的，这是npm包的配置文件。我们要首先进入vpay文件夹的位置，然后终端运行**npm init**命令来初始化一个npm包配置文件，此时他会问你一些列问题来完成配置文件：

name：包名，默认是文件夹名。但是这个名字是需要唯一的，如果你命的名字已经被使用过了，那就只能换个名字。至于怎么查看包名是否存在，你可以去npmjs官网搜索你的包名，如果没搜索到则可以使用。

version：包的版本，默认是1.0.0，你可以更换，例如0.1.0或2.0.1等。
description：包的描述。主要描述你的包是用来做什么的。
entry point：包入口文件，默认是Index.js，可以自定义。
test command：测试命令，这个直接回车就好了，因为目前还不需要这个。
git repository：包的git仓库地址，npm自动读取.git目录作为这一项的默认值。没使用则回车略过。
keyword：包的关键词。该项会影响到用户怎样才能搜到你的包，可以理解为搜索引擎悠哈的关键词。建议关键词要能准确描述你的包，例如："vpay vue-pay vue-password password"
author：作者。例如你的npm账号或者github账号
license：开源协议，回车就好。

到这一步，其实我们已经做好了本地包的开发，我们要测试一下包能不能使用。怎么测试呢？我们知道，平时是使用npm安装插件的时候，其实是把插件安装在了根目录下的node_modules文件中。那么，我们既然已经开发好了本地包，我们就把这个vpay文件夹直接拷贝到node_modules文件夹中。然后在main.js中像平时一样使用插件：

// 直接引入vpay,不需要写路径

import vpay from 'vpay'

Vue.use(vpay);

测试一看，一切正常，说明我们的包是没问题的。

下面就是要发布了。发布之前，我们首先要有一个npm的账号，如果你还没有账号的，自行去npmjs官网注册一个账号，这里提示一下，注册用户名的时候经常可能不通过，所以还是字母开头加一些数字方便些。这里的full name 可以理解为昵称，email邮箱，后面两个是用户名和密码。有些时候用户名总是会提示不合规范，所以还是字母加数字快些。

回归正题，先切换到我们的vpay文件目录，然后执行npm login命令登录我们的npm账号，他会提示你输入npm的用户名和密码，注意输入密码的时候不会有任何提示，这里不要以为是不是没有反应。你只管输入就好，只不过什么都看不到，输入完成回车，然后输入npm的邮箱。最后回车，这里有一点要注意的，如果你是之前安装了淘宝镜像，那是不会成功的，因为你的要把npm包发布到npm镜像上，而不是淘宝的镜像。我们平时可以通过淘宝镜像来加快下载速度，因为淘宝镜像其实就是每隔十分钟把npm的上的最新资源同步到自己身上而已。所以你要通过npm的镜像登录和发布。

如果配置了淘宝镜像，先设置回npm镜像：