在npm发布自己的组件包

目录

前言

正文

npm和git的对比

Node环境的配置

具体发布步骤

※※需要注意的是

尾声


 

  • 🔭 Hi,I’m Pleasure1234
  • 🌱 I’m currently learning Vue.js,SpringBoot,Computer Security and so on.
  • 👯 I’m studying in University of Nottingham Ningbo China
  • 📫 You can reach me by url below:
  • My Blog Website: https://blog.yiming1234.cn 
  • My CSDN Blog: https://yiming1234.blog.csdn.net
  • My Email:Pleasure@yiming1234.cn
  • My Github:Pleasurecruise (自由的世界人) · GitHub
  • It's my pleasure to see you follow me!

原文地址:在npm发布自己的组件包 - Pleasure的博客

下面是正文内容:


前言

在学习前端的时候遇到的一个有趣的点,就稍微总结了一下

一个小的技巧,值得被记录

正文

npm和git的对比

NPMGIT
主要用途npm是用于管理JavaScript和Node.js项目依赖包的工具。
它允许开发者下载、安装、更新和删除项目所需的各种库和模块。
Git是一个分布式版本控制系统,用于跟踪代码变化,协作开发,以及管理代码历史。
它帮助开发者在团队中协作,管理不同版本的代码,并且可以回溯到以前的代码状态。
版本控制npm通过注册表(如官方的npm注册表或其他镜像)来存储和分发包。
开发者可以使用npm install命令来安装依赖包,并使用npm publish命令发布自己的包到npm注册表。
Git通过快照来管理代码的每一个版本,可以记录每次的改动,并可以随时恢复到任何一个历史版本。
使用命令如git commitgit pushgit pull来提交、推送和拉取代码变更。
使用特色项目中通常有一个package.json文件,用于列出项目的依赖包、脚本、版本等信息。
npm允许在package.json中定义脚本,通过npm run <script-name>来执行这些脚本,简化开发流程。
Git允许创建和管理分支,开发者可以在不同分支上并行工作,然后合并这些分支。
Git支持远程仓库(如GitHub、GitLab、Bitbucket),开发者可以将本地代码推送到远程仓库,与他人协作。

总结:这两者在前端和后端开发中都起着至关重要的作用,但它们解决的问题和用途完全不同。npm主要解决包管理问题,而Git主要解决版本控制和代码协作问题。

Node环境的配置

由于不同的node组件包支持的nodejs版本不同

所以就如同python通过pyenv来进行版本控制一样,nodejs也可以通过nvm来进行版本控制

使用的方法非常简单,先彻底的卸载电脑中之前的nodejs,包括ProgramData和注册表中的文件

然后在下面的这个网址中选择可执行文件(nvm-setup.exe)来进行安装

Releases · coreybutler/nvm-windows · GitHub

安装完成后打开命令行输入nvm -v,可以看到安装成功

接着输入nvm list available,可以显示部分支持安装的npm包

通过nvm install 22.2.0nvm use 22.2.0来使用最新的nodejs环境

原域名https://registry.npm.taobao.org/在 2022.06.30 号正式下线和停止DNS 解析

下面是一些常用的npm指令

查看镜像使用状态

npm config get registry

设置镜像源

npm config set registry https://registry.npmmirror.com

npm config set registry https://registry.npmjs.org

安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

清空npm缓存

npm cache clean --force

具体发布步骤

①首先在下面的网址注册自己的账号

npm | Home

每次在进行账户的注册和登录操作时邮箱会都收到一个8位的验证码

②注册完成后,就需要准备一个node组件包

可以参考下面的图片和代码创建,输入下面的图片创建一个空白的npm项目

mkdir yiming-test //创建空白项目目录
cd yiming-test //定位到项目目录
npm init -y //初始化,创建package.json文件
npm install //自行进行项目编写,下载需要的npm模块

③然后就是将项目文件打包并发布

npm login //登录上面注册的账户
npm pack //组件打包
npm publish //组件发布

这里你可能会遇到问题可以直接看下面的“需要注意的是”

④验证刚刚发布的组件包

npm在执行install操作的时候,会先安装package.json文件中指定的依赖项,然后运行测试

由于我上传的测试组件包中只包含一个初始的package.json文件,没有任何的依赖项,所以在npm install的时候在指定目录下没有任何文件生成

※※需要注意的是

本人尝试使用淘宝中国大陆的镜像,似乎是无法用命令行进行登录操作的

会显示如下的报错(https://registry.npm.taobao.org),或者跳转网页(https://registry.npmmirror.com),都无法进行登录

这时就需要切换到官方的npm地址来进行用户的登录操作!登录时会跳转到如下的这个界面。

尾声

指引型博文,几乎不包含任何专业知识,就挺酷的,大家可以试试看。

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

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

相关文章

轻松掌握Java循环:break、continue和return语句全解析

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

【iOS】MRC下的单例模式批量创建单例

单例模式的介绍和ARC下的单例请见这篇&#xff1a;【iOS】单例模式 目录 关闭ARC环境MRC下的单例ARC下的单例批量创建单例Demo 关闭ARC环境 首先关闭ARC环境&#xff0c;即打开MRC&#xff1a; 或是指定某特定目标文件为非ARC环境&#xff1a; 双击某个类文件&#xff0c;指定…

ERROR: cannot launch node of type [usb_cam/usb_cam_node]: usb_cam

sudo apt install ros-noetic-usb-cam 一般情况下之间下载就可以解决&#xff0c;如果显示无法定位到该文件 可以参考E: Unable to locate package ros-kinetic-usb-cam-CSDN博客 如果最后发现以下指令还是没办法运行那就是版本问题。 rqt_image_view 避雷&#xff01;&am…

「前端+鸿蒙」核心技术HTML5+CSS3(十一)

1、CSS3 简介 CSS3 是层叠样式表的最新标准,它引入了许多新特性来增强网页的表现力。CSS3 不仅增强了现有CSS属性的功能,还引入了新的布局方式、动画、渐变、阴影、边框效果等。 2、CSS3 长度单位 CSS3 引入了一些新的单位,包括但不限于: vw(视口宽度的百分比)vh(视口…

使用Colaboratory免费GPU资源微调Llama3-8b

Llama3微调过程 准备工作 Google Colaboratory Google Colaboratory&#xff0c;也称为 Colab&#xff0c;是一个基于云的平台&#xff0c;允许用户编写和执行 Python 代码。 它为机器学习和数据分析任务提供了便利的环境&#xff0c;并内置了对 TensorFlow 等流行库的支持。…

【推荐系统】CTR模型加了特征,用少量数据训test-AUC涨了,用大量数据训test-AUC跌了很多

先打印出train-AUC 加了特征 —> 如果train-AUC涨了 可以把测试集改为训练集&#xff0c;这样之后 如果test-AUC也涨了&#xff0c;说明测试代码是正常的&#xff0c;是模型过拟合 —> 减少MLP参数量 如果test-AUC还是跌了&#xff0c;说明测试代码有错&#xff0c;和…

pytorch使用DataParallel并行化保存和加载模型(单卡、多卡各种情况讲解)

话不多说&#xff0c;直接进入正题。 &#xff01;&#xff01;&#xff01;不过要注意一点&#xff0c;本文保存模型采用的都是只保存模型参数的情况&#xff0c;而不是保存整个模型的情况。一定要看清楚再用啊&#xff01; 1 单卡训练&#xff0c;单卡加载 #保存模型 torc…

!力扣70. 爬楼梯

假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 1. 递归&#xff08;超时&#xff09; class Solution { public:int climbStairs(int n) {if(n1){return 1;}if(n2){return 2;}return climbStairs…

ARCGIS 几种SHP融合、拼接等方法

常用的工具可在Geoprocessing里面找到&#xff1a; Merge 使用该工具可将多个源中的数据集合并到新的单个输出数据集。所有输入数据集的类型必须相同。例如&#xff0c;点要素类之间可以合并&#xff0c;表之间也可以合并&#xff0c;但线要素类却无法同面要素类合并。 注意&…

1.vue2.x-初识及环境搭建

目录 1.下载nodejs v16.x 2.设置淘宝镜像源 3.安装脚手架 4.创建一个项目 5.项目修改 代码地址&#xff1a;source-code: 源码笔记 1.下载nodejs v16.x 下载地址&#xff1a;Node.js — Download Node.js 2.设置淘宝镜像源 npm config set registry https://registry.…

【c语言】指针就该这么学(3)

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C语言 目录 一、函数指针 1.函数指针变量的创建 2.函数指针变量的使用 二、typedef关键字 三、函数指针数组 1.函数指针数组的概念 2.函数指针数…

$nextTick的使用场景介绍

$nextTick使用 Vue更新DOM-异步的 目标: 点击count, 马上通过"原生DOM"拿标签内容, 无法拿到新值 components/Move.vue - 继续新增第三套代码 <template><div><p>1. 获取原生DOM元素</p><h1 id"h" ref"myH">我是…

从零开始实现自己的串口调试助手(8)-循环发送

循环发送 准备 创建槽函数 设置QSpinBox的最大值 注意&#xff1a; // 我们不能在qt的ui线程中延时&#xff0c;否则将导致页面刷新问题 //QThread::msleep(ui->spinBox->text().toInt());//设置下次发送时间间隔 定时器实现 关联信号与槽: //添加自动换行定…

centos中sudo: apt: command not found

系统找不到apt这个命令。CentOS中应该使用sudo yum或sudo dnf&#xff08;CentOS 8及以后版本&#xff09;来执行包管理操作。不建议安装使用apt&#xff0c;可能会破坏系统的稳定性和兼容性。建议使用sudo yum install package_name来安装软件包。

Pycharm创建Conda虚拟环境时显示CondaHTTPErOT

原因&#xff1a;conda源出问题了&#xff0c;之前可以用&#xff0c;现在报错。 最好的解决方案&#xff1a;找到conda源&#xff0c;换源即可。 步骤&#xff1a; 1.修改 .condarc 文件&#xff08;文件的位置在&#xff1a;C:\Users\(你的用户名)\.condarc&#xff09;&a…

Python中的@staticmethod和@classmethod装饰器

名词解释 本文主要介绍静态方法staticmethod和类方法classmethod在类中的应用&#xff0c;在介绍这两个函数装饰器之前&#xff0c;先介绍类中的几个名词&#xff0c;便于后面的理解&#xff1a; 类对象&#xff1a;定义的类就是类对象 类属性&#xff1a;定义在__init__ 外…

type 相关的几个试验

1.概要 typeid是一个操作符&#xff0c;它用于在运行时获取关于数据类型的信息。 在C语言中&#xff0c;类型定义&#xff08;Type Definition&#xff09;通常是通过使用关键字如 typedef 来创建新的类型名称&#xff08;也称为类型别名&#xff09;&#xff0c;这些新的类型…

基于自动化工具autox.js的抢票(猫眼)

1.看到朋友圈抢周杰伦、林俊杰演唱会票贼难信息&#xff0c;特研究了一段时间&#xff0c;用autox.js写了自动化抢票脚本&#xff0c;购票页面自动点击下单&#xff08;仅限安卓手机&#xff09;。 2.脚本运行图 3.前期准备工作 &#xff08;1&#xff09;autox.js社区官网&am…

DNF手游攻略:主C职业推荐,云手机强力辅助!

在《地下城与勇士》手游中&#xff0c;你是否厌倦了重复刷图和无休止的手动操作&#xff1f;利用VMOS云手机&#xff0c;你可以一键解决这些烦恼&#xff0c;实现自动打怪、一机多开&#xff0c;让游戏变得更加轻松愉快。下面我们将介绍如何使用VMOS云手机&#xff0c;以及推荐…

卫生间装修10个避坑细节

雅静说卫生装修,记住这10条不后悔      卫生间装不好,漏水,臭,很麻烦      1先检查下水管,防止小黑虫和漏水      它里面必须要有皮垫密封圈,,看完以后把它拧紧      防止后期漏水还得砸瓷砖      2,改水电的时候留够插座,马桶一个      浴室柜的灯提前…