发布一个简单的npm包简单流程(图文并茂,你必懂)

news2025/4/18 15:18:50

目录

前言:

1.发布前的代码基本配置

A.创建文件夹

B.npm init/npm init -y初始化项目

C.配置package.json文件

D.创建index.js文件

E.创建README.md文件

F.最基本的目录结构

2.账号注册

3.登录npm账号

A.使用cmd进行登录

B.使用nrm工具

C.成功登录

4.发布包

A.登录成功之后即可执行发布命令:npm publish

 B.名字相似发布失败

5.如何删除npm 包


前言:

聪明的你做了几个项目之后,有没有发现发现某些工具方法或者组件的使用频率很高,好多项目都在用。如何做到这些工具方法或者组件的更优雅地复用而不是用到了就复制粘贴呢?封装为一个npm包是一个不错的选择。本文以图文结合的方式介绍了如何从0到1发布一个npm包,文中的一些关键点的说明将帮你避坑提效。欢迎阅读学习~

1.发布前的代码基本配置

npm官方建议规范的包至少包含:

package.json(包的基本信息)
README.md(文档)
index.js (入口文件)

A.创建文件夹

mkdir my_firs_npm
cd my_first_npm

B.npm init/npm init -y初始化项目

npm init/npm init -y

C.配置package.json文件

{
  "name": "my_first_npm",
  "version": "1.0.0",    //标明发布时的版本
  "description": "my first npm package",
  "main": "index.js",    //写清楚入口文件
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  }, 
  "keywords": [     //标明关键字,方便其他人检索我们所创建的包
    "npm",
    "packge"
  ],
  "author": "wlaozhichi",
  "license": "ISC"   //使用ISC作为许可证
}

D.创建index.js文件

例如在这里我配置了一个转化时间的npm包

function dateFormat(str){
    const dt=new Date(str)
    const y=dt.getFullYear()
    const m=change(dt.getMonth()+1)
    const d=change(dt.getDate())
    const hh=change(dt.getHours())
    const mm=change(dt.getMinutes())
    const ss=change(dt.getSeconds())
    return `${y}-${m}-${d} ${hh}:${mm}-${ss}`
}
function change(n){
    return n>9?n:'0'+n
}
module.exports={
    dateFormat
}

E.创建README.md文件

F.最基本的目录结构

└── my_first_npm
    ├── README.md
    ├── index.js
    └── package.json

2.账号注册

打开注册页面www.npmjs.com/signup

开始输入自己的个人信息以及账号进行注册 

3.登录npm账号

A.使用cmd进行登录

执行npm login 命令登录npm :

npm login

有些同学可能会在登录的时候出现以下报错

原因是我们一般都是使用taobao的镜像源进行下载,这时候我们必须要转化为原来的npmjs的镜像源,这时候我们需要使用nrm的工具进行更改镜像源

B.使用nrm工具

nrm 用于管理镜像,是一个可以切换npm镜像的管理工具。如下是安装和查看是否安装成功的命令:

npm i -g nrm
nrm -V

常用nrm命令如下:

 下图是使用nrm ls命令查看镜像:

 下图是将镜像切换为npm

 

C.成功登录

切换镜像之后再登录:

 

4.发布包

A.登录成功之后即可执行发布命令:npm publish

 B.名字相似发布失败

但是感觉名字'mxdevutil'可读性不咋好啊,所以改了一下名字,新名字为'mx-dev-util'重新发布,但却报错,如下图所示:

 

5.如何删除npm 包

npm unpublish <报名> -force

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/92730.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1、浮动(float)

提示&#xff1a;我们一般网页上下用标准流&#xff0c;左右用浮动来写 1.1传统网页布局三种方式 网页布局本质——用css来摆放盒子&#xff0c;把盒子摆放到相应位置。css提供了三种传统布局简单方式&#xff0c;说就是盒子如何进行排列顺序&#xff1a; 普通流&#xff08;或…

面试蚂蚁(P7)竟被MySQL难倒,奋发图强后二次面试入职蚂蚁金服

爱因斯坦说过“耐心和恒心总会得到报酬的”&#xff0c;我也一直把这句话当做自己的座右铭&#xff0c;这句箴言在今年也彻底在“我”身上实现了。 每一个程序员都拥有一座大厂梦&#xff0c;我也不例外&#xff0c;去年面试蚂蚁金服&#xff0c;竟然被MySQL问倒了&#xff0c…

【Flask框架】——16 Jinja2模板

文章目录Jinja2模板一、Jinja2模板介绍1.模板传参2.语法二、表达式三、控制语句1.条件判断语句2.for循环语句&#xff1a;四、过滤器1.什么是过滤器2.字符串的过滤器3.数值过滤器4.列表相关过滤器5.字典相关过滤器6.自定义过滤器五、测试器1.Jinja2中内置的测试器2.自定义测试器…

配置NTP时间同步之Linux

一&#xff1a;NTP是网络时间同步协议&#xff0c;就是用来同步网络中各个计算机的时间的协议。 二&#xff1a;NTP服务端配置 1.检查系统是否安装了NTP包&#xff08;Linux一般自带NTP4.2&#xff09;&#xff0c;没有安装我们直接使用yum命令在线安装&#xff1a; yum inst…

Spring Boot整合Swagger3.0及Knife4j

一、什么是 Swagger Swagger是一组围绕 OpenAPI 规范构建的开源工具&#xff0c;可帮助您设计、构建、记录和使用 REST API。主要的 Swagger 工具包括&#xff1a; Swagger Editor – 基于浏览器的编辑器&#xff0c;您可以在其中编写 OpenAPI 规范。 Swagger UI – 将 OpenA…

非零基础自学Golang 第7章 函数 7.8 知识拓展

非零基础自学Golang 文章目录非零基础自学Golang第7章 函数7.8 知识拓展7.8.1 函数参数传递的本质7.8.2 Go内置函数第7章 函数 7.8 知识拓展 7.8.1 函数参数传递的本质 在讲述参数传递前&#xff0c;我们首先要了解两个基本概念&#xff1a;值传递和引用传递。 值传递&…

API接口DTO测试数据构造的一个方式

自动化测试中&#xff0c;经常需要构造请求参数&#xff0c;例如JSON格式的参数&#xff0c;简单的好说&#xff0c;可以手工修改或是用 Postman、Jmeter 等工具结合简单的代码进行处理&#xff0c; 但当数据传输对象&#xff08;DTO&#xff09;很复杂&#xff0c;部分字段依赖…

同样是项目经理,为啥就干不过他?

早上好&#xff0c;我是老原。 很多人和我抱怨说&#xff0c;做工作太难了&#xff0c;领导针对我&#xff0c;同样都是项目经理&#xff0c;就老是挑我的刺&#xff0c;找我的麻烦。 其实在我看来&#xff0c;工作其实没有那么难&#xff0c;80%的工作问题&#xff0c;都是沟…

C#语言实例源码系列-虚拟键盘

专栏分享点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册 &#x1f449;关于作者 众所周知&#xff0c;人生是一个漫长的流程&#xff0c;不断克服困难&#xff0c;不断反思前进的过程。在这个过程中…

guitar pro8吉他谱软件好用吗?2023GTP全新功能解析

我们常见的GTP格式吉他谱就是用这款软件制作出来的曲谱&#xff0c;也只能用这款软件打开查看。看介绍感觉还不错&#xff0c;原生支持Apple的芯片了。这也是一款能陪着我们一起进步&#xff0c;提升自己的软件。我们在练习吉他等乐器的过程中&#xff0c;音阶与和弦的熟练掌握…

ffmpeg-AVBuffer、AVBufferRef、引用计数机制

目录 引用计数 定义 优点 AVBuffer AVBufferRef av_buffer_create av_buffer_ref av_buffer_unref 参考&#xff1a; 引用计数 定义 引用计数是一种内存管理的方式&#xff0c;当一份内存可能被多个对象使用&#xff0c;可以通过引用计数的方式实现内存复用。 优点 …

深入理解Maven的各项配置

深入理解Maven的各项配置1. Introduction1.1 Big Data -- Postgres2. Install2.1 Maven Install2.2 Config Setting.xml2.3 Local Package Install Maven3. Project4.AwakeningMaven Document: https://maven.apache.org/. Maven Download: https://maven.apache.org/download.…

基于微信小程序的好物分享系统ssm框架-计算机毕业设计

项目介绍 我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;好物分享系统小程序被用户普遍使用&#xff0c;为方便用户…

【技术应用】mybatis数据库操作(insert、update、delete)返回值为0的场景

【技术应用】mybatis数据库操作insert、update、delete返回值为0的场景一、前言二、数据库异常处理三、insert操作返回值为: 0四、update操作返回值为: 0五、delete操作返回值为: 0六、总结一、前言 最近在review项目组成员代码时&#xff0c;发现代码中有很多mybatis执行数据…

涉及准考证相关需要关注的一系列问题,涉及防疫、考点信息、计算器等内容

12月14日起可以打印准考证&#xff01;这是一件操作并不复杂的工作&#xff0c;但打印下来以后可能会遇到一些细节问题&#xff0c;对此我们梳理出来供大家参考&#xff0c;有则改之&#xff0c;无则更好&#xff01; 1.有关省份个人健康申报表等如何填写&#xff1f;如您报考点…

web网页设计期末课程大作业:美食餐饮文化主题网站设计——美食汇5页HTML+CSS+JavaScript

&#x1f380; 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

事业编招聘:南方科技大学附属实验学校2022年·面向应届毕业生招聘在编教师公告

南方科技大学是在中国高等教育改革发展背景下创建的一所高起点公办创新型大学&#xff0c;2022年2月14日&#xff0c;教育部等三部委公布第二轮“双一流”建设高校及建设学科名单&#xff0c;南方科技大学入选“双一流”建设高校名单。 南方科技大学附属实验学校&#xff0c;地…

部署了一个个人博客(好歹服务器不是闲着了)

界面前台界面展示&#xff08;给到浏览用户&#xff09;后台界面展示&#xff08;简单介绍&#xff09;技术说明前台界面展示&#xff08;给到浏览用户&#xff09; 肯定首先将界面展示一下。声明一下这个不是我原创的界面&#xff0c;当然这个是可以改造的。这个在安全上还有…

血氧仪的分类与价格区别

有没有发现最近血氧仪、额温枪、壁挂式测温仪又开始火了&#xff1f;并且市场活跃度越来越高。而作为我们血氧仪方案提供商或者生产企业来说&#xff0c;您是不是和优优一样会时常听到客户发出如下反馈&#xff1a; “我刚问了另外一家&#xff0c;和你这个样子差不多的&#…

VC++2010中使用MSDN library 200X版本

前言 以前一直用VS2005 ,帮助文档调用很方便&#xff0c;现在要使用VS2010版本来写程序&#xff0c;这个帮助文档真是不方…… 自己写了一个F1的按键助手&#xff0c;这下我可 以使用VS2008中的帮助文档了&#xff0c;虽然帮助低一个版本&#xff0c;但是写C程序&#xff0c;…