一文教会你如何在npm上传自己的包

 更新时间:2023年03月17日 14:24:26   作者:蛋蛋的老公  
作为一个前端开发者,我们要学会自己编写一些开发工具模块,也可以自己编写一些组件,甚至可以通过自己的能力编写一个框架出来,这都需要我们能够灵活的管理我们的包,下面这篇文章主要给大家介绍了关于如何通过一文教会你在npm上传自己的包的相关资料,需要的朋友可以参考下

1、官网注册

首先要在npm官网注册自己的npm账户,链接:https://www.npmjs.com/

注:由于是国外的网站,特别特别慢。不要灰心

2、查询是否存在包名

要查看npm官网中是否已有自己准备上传的包名,打开cmd。执行命令

指令:npm view 【你的npm包名】

注:包名上传时会自动转小写,所以你还是用小写的名称吧

如果出现如下图。则表示包名已存在,建议换个其他包名

如果出现以下界面,则表示输入的包名可用。

3、初始化项目

指令: npm init -y

注:文件夹名称一定不能有中文,否则报错。

将自己写好的文件放入文件夹

4、切换自己的npm源

指令:

(1)查看当前源:npm config get registry

(2)切换为npm源:npm config set registry https://registry.npmjs.org

(3)切换为淘宝镜像:npm config set registry=https://registry.npm.taobao.org/

切记:一定要切换为npmjs.org源。

5、添加用户

指令:npm adduser

注:一定要在第一步中注册了账号才行。否则会报错无法继续。

cmd会弹出以下:

  • Username:输入用户名
  • Password:输入密码,这里是不显示的,不用担心,正常输入
  • Email:输入邮箱
  • Enter one-time password:输入发到邮箱的验证码

6、查看是否成功

指令:npm who am i

出现自己添加的账号即表示成功。

7、上传自己的包

因为第三步添加了index.js文件,所以执行命令

指令:npm publish

添加到了自己的包中,版本是1.0.1

注:后续如果要修改后重新添加。需要修改package.json中的版本号version。

查看自己的包

在npm官网中点击Packages可以查看自己上传的包,点击包名,可以看到npm下载包的命令

8、下载自己的包

建立一个空文件夹,执行指令:npm init -y,建立package.json文件

然后下载自己的包

指令:npm i 【包名】

由于我这里报了个高风险的问题,所以执行命令强制处理了。

处理完了之后继续执行npm i 【包名】

这样就有了你刚才上传的包了。

9、补充

命令行修改版本

npm version patch

它会将package.json中的version版本加0.0.1

重新发包

npm publish

删除指定包版本

npm unpublish 【包名@版本号】

删除整个包

npm unpublish 【包名】 --force

总结

到此这篇关于你如何在npm上传自己的包的文章就介绍到这了,更多相关npm上传自己的包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 利用Vue-cli搭建Vue项目框架的教程详解

    利用Vue-cli搭建Vue项目框架的教程详解

    这篇文章主要为大家详细介绍了利用Vue-cli搭建Vue项目框架的相关资料,对大家深入了解Vue有一定的帮助,感兴趣的小伙伴可以了解一下
    2023-02-02
  • Vue项目引入translate.js国际化自动翻译组件的方法

    Vue项目引入translate.js国际化自动翻译组件的方法

    这篇文章主要给大家介绍了关于Vue项目引入translate.js国际化自动翻译组件的相关资料,除了基本的文本翻译功能之外,jstranslate还提供了一些高级功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • vue动态生成dom并且自动绑定事件

    vue动态生成dom并且自动绑定事件

    本篇文章主要介绍了vue动态生成dom并且自动绑定事件,具有一定的参考价值,有兴趣的可以了解一下。
    2017-04-04
  • vue利用sync语法糖实现modal弹框的项目实践

    vue利用sync语法糖实现modal弹框的项目实践

    本文主要介绍了vue利用sync语法糖实现modal弹框的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue响应式Object代理对象的修改和删除属性

    vue响应式Object代理对象的修改和删除属性

    这篇文章主要为大家介绍了vue响应式Object代理对象的修改和删除属性示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue中实现在线画流程图的方法

    Vue中实现在线画流程图的方法

    最近在调研一些在线文档的实现,包括文档编辑器、在线思维导图、在线流程图等,本文分享在Vue框架下基于metaeditor-mxgraph实现在线流程图,感兴趣的朋友一起看看吧
    2024-07-07
  • 解决vue项目中某一页面不想引用公共组件app.vue的问题

    解决vue项目中某一页面不想引用公共组件app.vue的问题

    这篇文章主要介绍了解决vue项目中某一页面不想引用公共组件app.vue的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue+Openlayers自定义轨迹动画

    Vue+Openlayers自定义轨迹动画

    这篇文章主要为大家详细介绍了Vue+Openlayers自定义轨迹动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • vue渲染时闪烁{{}}的问题及解决方法

    vue渲染时闪烁{{}}的问题及解决方法

    v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的。接下来通过本文给大家分享vue渲染时闪烁{{}}的问题及解决方法,感兴趣的朋友一起看看吧
    2018-03-03
  • vue引入外部的js文件的10种方法总结

    vue引入外部的js文件的10种方法总结

    这篇文章主要为大家详细介绍了vue项目中引入外部的js文件的10种方法,文中的示例代码讲解详细,具有一定的借鉴价值,需要的小伙伴可以参考下
    2023-08-08

最新评论