如何发布到NPM上(转)

简要:这篇文章介绍了如何讲自己的包发布到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镜像:

npm config set registry http://registry.npmjs.org

然后在终端执行npm login命令:

 

 

看到最后一行Logged in as ……就说明登录成功了。

登录成功后,运行npm publish命令将npm包发布到npm上。

 

 

这样就发布成功了。我们去npm官网查一下我们的包:

 

 

 

 如果发布成功后没有搜到,就稍微等几分钟。

击进去看下,一切正常。以后就直接可以通过npm i vpay将插件撞到我们的项目中了。

到这,我们基本已经完成了插件从开发、到写说明文档、再到发布github、最后发布npm包,一切已经可以正常使用了。插件的个别地方的样式有些略显粗糙,但是本文的主要目的在于演示插件的开发过程。希望能对有需要的小伙伴起到帮助。

posted @ 2018-10-08 14:58  hh9515  阅读(290)  评论(0编辑  收藏  举报