前端技术

记录:npm如何上传自己写的功能库

2018-02-10  本文已影响76人  力丸x

首先的拥有自己的npm账户,没有则注册后登陆...

这里用终端的方式登录cmd:

npm login  登录

用户名,密码,邮箱

输入成功后会出现登录成功的提示,如上图。

如果忘记了自己的用户名,则可以输入命令 npm whoami   

如图:

以上,终端的登录方式完成!接下来写我们需要上传的功能模块

首先新建一个空文件夹,我这里是npmUpload,终端进入当前文件夹

npm init    (初始化当前项目信息,后面有一些需要你填写的项目信息,如图)

需要填写的信息依次是:

package name:   包的名称

version:          版本号

description:     包的描述

entry point:      入口文件,默认是index.js

test command:   测试命令,可以不填直接回车

git repository:    提供git个人仓库,可以不填,直接回车

keywords:     项目的关键词,供人家搜索

author:            作者名称

license: (ISC)     包遵循的开源协议,默认是ISC

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

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

此时我们在当前文件夹下面新建一个index.js的入口文件,写上我们的一个函数,如图

此时打开我们的终端,进入当前文件夹,输入命令 npm publish  (如果网络慢,使用cnpm,cnpm自行百度),回车可以看到:

此错误的意思是刚刚在npm注册的账号还没有经过验证,需要登录注册时的邮箱,点击链接,并登录后,才算验证完毕,验证后,重新npm publish,成功上传后如下:

为什么我这里是xyp233,而不是之前的testxyp呢?因为我把package.json的name值改成这个了,这个就是项目名称

此时我们进入npm官网搜索刚才上传的xyp233,结果如下:

至此恭喜你上传成功!

接下来我们该如何使用我们上传的包呢?

新建一个文件夹,打开终端,进入当前目录下安装我们的包: npm install xyp233   

安装成功后我们的文件夹会多出文件夹node_modules(npm包管理)和xyp233(我们刚刚上传的),如图:

至此安装完后,在当前文件夹下新建一个.js文件,测试是否包能使用成功,

先引入模块,然后使用,如图:

能成功打印我们的参数和!

如果我们在想在之前的包里面在添加一个功能呢?此时我们需要修改之前package.json里面的version版本:

此时终端进入我们之前的包的目录下: npm publish

上传成功如图,并且npm搜索此时的包,版本已经变成了刚刚更新的版本了:

然后回到我们测试的文件夹下面:

不知道为啥,我在测试的文件夹下面用更新包命令 npm updata xyp233  没反应,多次试验过后还是没反应,没办法,我就先删除包  cnpm uninstall xyp233  ,删除成功后重新安装cnpm install xyp233,然后就ok了,效果图如下:

至此介绍完毕!

说明:新上路的菜鸟,如表达有误,请轻喷,这只是个人一个小小的学习记录

上一篇 下一篇

猜你喜欢

热点阅读