作为前端,我们经常在npm上面下载各种各样各路大神的插件,安装至我们的项目中,方便又快捷。下面就简单介绍一下如何将我们自己写的小插件上传至npm,供自己和大家下载使用。
前提需要在自己的电脑下载node.js ,下载完自动会有npm.( 自行下载 )
首先需要在npm官网注册一个账号。(https://www.npmjs.com/signup,自行注册,不多介绍)。
注册完后,使用cmd终端的方式登录 npm login ,如图
依次输入用户名,密码,邮箱
输入成功后如出现以上报错信息:大概意思是我们吧npm仓库指向成了淘宝镜像库了,这可能是因为我们以前安装了cnpm,我们需要吧设置成npm仓库,解决如下:
cmd执行: npm config set registry=http://registry.npmjs.org 如图:
设置完成后,使用命令 npm config get registry 查看,成功指向了npm。
以上终端登录完成 接下来开始编码我们需要上传的插件吧!
首先新建一个空文件夹,我这里是myTestPlugin,终端进入当前文件夹,初始化项目 npm init
需要填写的信息依次是:
package name: 包的名称
version: 版本号
description: 包的描述
entry point: 入口文件,默认是index.js
test command: 测试命令,可以不填直接回车
git repository: 提供git个人仓库,可以不填,直接回车
keywords: testplugin (项目的关键词,npm搜索关键词)
author: 作者名称
license: (ISC) 包遵循的开源协议,默认是ISC
以上填写完毕后会出现刚才填写的项目结构,is this ok ? 是否确定,直接回车即可.
回到自己的文件夹,会多出现一个package.json文件,就是我们刚才填的项目信息,如图:
此时我们在当前文件夹下面新建一个index.js的入口文件,写上一个简单的方法,如图:
此时打开我们的终端,进入当前文件夹,输入命令 npm publish 发布至npm : 成功后如图:
然后我们进入npm 官网(https://www.npmjs.com),搜索我们刚刚发布的插件。如图
接下来就是在我们自己的项目里面安装我们的插件:
新建项目,进入该项目cmd,执行 npm install test-plugin-xyp 安装我们的插件,然后引入调用。(我这里是使用node命令执行)如图:
我们的插件也被安装在node_modules文件夹下面了。
如上图,调用成功,出现几个warning警告,是因为项目没有执行 npm init 初始化生成package.json 项目配置文件。因为我是使用node启动程序的。需要的同学可以 npm init。
如果今后我们在插件源码上面新增了功能,发布前需要在源码文件夹的package.json文件下修改下 version 属性值(版本号),然后在重新执行命令 npm publish ,发布成功后,则可以在npm官网搜到我们的更新版本号相关信息。 然后在我们自己的项目中重新npm install 插件名 ,就可以使用我们新添加的功能啦。
至此,演示完毕。
当然啦,也有发布失败的情况下,下面贴几种常见的失败场景:
1:未登录npm情况下报错,解决方法:先登录。(上文可查看登录方法)
2:因为仓库指向了淘宝镜像库,需要设置成npm,执行图中绿色线,然后重新登录即可
3:大概意思就是你的插件名在npm上已经被占用啦,进入文件目录下package.json 里面修改 name 属性值
4:此报错信息是因为新注册的账号,还未经过验证,需要注册时的邮箱验证,复制链接,并登录后,才算验证完毕,验证后,重新npm publish