如何将自己写的插件,上传至npm?

作为前端,我们经常在npm上面下载各种各样各路大神的插件,安装至我们的项目中,方便又快捷。下面就简单介绍一下如何将我们自己写的小插件上传至npm,供自己和大家下载使用。

前提需要在自己的电脑下载node.js ,下载完自动会有npm.( 自行下载 )

首先需要在npm官网注册一个账号。(https://www.npmjs.com/signup,自行注册,不多介绍)。

注册完后,使用cmd终端的方式登录 npm login ,如图

登录报错.png

依次输入用户名,密码,邮箱

输入成功后如出现以上报错信息:大概意思是我们吧npm仓库指向成了淘宝镜像库了,这可能是因为我们以前安装了cnpm,我们需要吧设置成npm仓库,解决如下:

cmd执行: npm config set registry=http://registry.npmjs.org     如图:


设置完后.png

设置完成后,使用命令   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


init.png

以上填写完毕后会出现刚才填写的项目结构,is this ok ? 是否确定,直接回车即可.

回到自己的文件夹,会多出现一个package.json文件,就是我们刚才填的项目信息,如图:


init.png

此时我们在当前文件夹下面新建一个index.js的入口文件,写上一个简单的方法,如图:


fn.png

此时打开我们的终端,进入当前文件夹,输入命令 npm publish  发布至npm : 成功后如图:


success.png

然后我们进入npm 官网(https://www.npmjs.com),搜索我们刚刚发布的插件。如图

plugin.png

接下来就是在我们自己的项目里面安装我们的插件:

新建项目,进入该项目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情况下报错,解决方法:先登录。(上文可查看登录方法)

nologin

2:因为仓库指向了淘宝镜像库,需要设置成npm,执行图中绿色线,然后重新登录即可

loginSuccess.png

3:大概意思就是你的插件名在npm上已经被占用啦,进入文件目录下package.json 里面修改 name 属性值

duplicateName.png

4:此报错信息是因为新注册的账号,还未经过验证,需要注册时的邮箱验证,复制链接,并登录后,才算验证完毕,验证后,重新npm publish


unverified.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,100评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,308评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,718评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,275评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,376评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,454评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,464评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,248评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,686评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,974评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,150评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,817评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,484评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,140评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,374评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,012评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,041评论 2 351

推荐阅读更多精彩内容