位置:首页 > web前端 > javascript

将包发布到NPM上的流程及问题解决方案

dearweb 发布:2021-10-20 14:16:12阅读:

作为一个前端开发工程师,想必对npm并不陌生,但是你有想过自己封装一个包上传到npm上面供大家使用吗?本文主要介绍如何将自己的包上传到npm以及上传过程中会遇到的问题及解决方案,希望能够帮助到你。

首先注册NPM 账号

注册地址:https://www.npmjs.com/。

初始化自己要发布的项目

搭建本地环境:安装node.js,包含了npm命令。

新建目录,在该目录下,初始化项目:npm init

按照提示填写初始化信息,我的模块名称为:mypro9999999,初始版本号:v1.0.0。

模块名称需遵循相关政策要求:https://www.npmjs.com/policies,不能够与已有NPM模块名冲突等等。

模块代码 index.js:

function npmDemo(argument) 
{ 
var name = 'finit';     
var f1 =function f(arg){console.log(arg)}   
  return {      
     name:name,    
     f1:f1   
  }  
}
module.exports=npmDemo();

创建好之后的文件夹目录如下图

image.png

登录npm,发布自己的npm包

npm login

根据提示输入之前注册的账号、密码。

发布npm包:

npm publish

此时在自己个人的npm账号主页可以看到该包(如下图)。

image.png

使用自己发布的包(模块)的示例代码

安装之前发布的npm包:

npm install mypro9999999

image.png

可以看到我已经安装成功了。

下面我们进入项目中使用一下,小编是直接新建一个vue的文件,然后直接引用包。

image.png

其实在node_modules里面也可以看到我们安装的依赖

image.png

最后看下页面反馈的效果。

image.png

最终我们包里面的数据全部打印出来了,说明整个流程没有任何问题。

发包过程中遇到的问题

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "package-demo". Are you logged in as the correct user? : package-demo

这是提示没有权限,其实就是你的module名在npm上已经被占用啦,这时候你就去需要去npm搜索你的模块名称,如果搜索不到,就可以用,并且把package.json里的name修改过来,重新npm publish,看到如下信息就表示安装完成了。

image.png

npm中的邮箱没有验证

E403 npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/npmceshi-zhanglanlan - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit

解决方案:(说明npm中的邮箱没有验证)这个时候你找到自己注册的邮箱,点进去验证一下 命令执行后无响应或者很长时间后才响应 可能跟网络环境有关。看看是否设置了VPN,或者更换网络(试试手机热点、其他网络)尝试

错误信息

1:npm ERR! no_perms Private mode enable, only admin can publish this module

解决方案:执行以下命令查看是否使用了淘宝的镜像地址,如果是,就改为原来的地址

npm config get registry
npm config set registry=http://registry.npmjs.org
改回淘宝的地址
npm config set registry=https://registry.npm.taobao.org

上文所讲的就是将包发布到NPM上的流程及问题解决方案,希望能过帮助你提升开发效率。

24人点赞 返回栏目 提问 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言(问题紧急可添加微信 xxl18963067593) 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

本刊热文
网友在读
手机扫码查看 手机扫码查看