如何自己创建一个工具项目并上传到npm上使用

news2024/10/1 15:12:08

第一步:npm官网注册一个自己的账号

第二步:在cmd窗口创建一个项目(这里我以vue3为例子)

npm create vite 项目名

选择框架: 

 选择语言:

在项目中使用命令安装项目依赖:

npm i

  运行项目:

npm run dev

 运行成功界面:

注意:

  • version:当前发布的版本号,项目每次改动后需要修改版本后再发布,  默认要0.0.1开始才能上传,相同版本是传不上去的,一定要记得每次更改了代码都改下版本号。

  • name: 包名只能小写, 不能和npm所有的的包名重复,我一开始用tool-cli,发现上传失败,名字被占用了就不行了。

package.json代码如下:

{
  "name": "tt-tool",
  "private": false, // 默认是true,要改成false,不然后期没法成功上传
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.3.9"
  }
}

 第三步:添加npm用户信息

npm adduser    //1. 根据提示输入你的 username、password、email

如果发现输入了以上命令没有让你接着输入账号密码,那看一下你的npm配置,修改下:

npm config list    //可查看你当前的 npm 配置
 
npm config set registry https://registry.npmjs.org/    //npm 源更换为 npm 官方源

再执行npm adduser就好了 

注意:输入密码时是不会显示的,你照常输就行

 发布项目:

npm publish    //发布

注意:如果发布报错“This package has been marked as private”,那更改package.json 配置,修改 private 属性值为 false 就好了。

 成功的界面如下:

 第四步:测试自己上传的项目是否正常

另外找一个项目输入命令安装自己上传到npm上面的项目(我的叫tt-tool)

npm install tt-tool

看到以下提示就代表成功了:

第五步:如何在工具类项目中抛出一些方法供引入其它项目使用

这里我把它分为两种:

第一种:项目只抛出一些纯方法,而不是组件的形式。

1、"npm create vite demo"创建项目,框架选others 

2、模板选library , 回车之后选语言就创建成功了

3、项目的代码结构大致如下:

 vite.config.js代码:

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    //构建的库
    //通过build.lib把代码打包成一个第3方库,这个库可以直接在浏览器和node.js环境中使用
    lib: {
      entry: './lib/main.js', // 入口文件目录(相对于根目录来说)
      name: 'TtUtils', // 导出的全局变量名称
      fileName: 'ttUtils', // 构建后的代码文件名
      minify:true, // 是否对代码进行压缩
    }
  }
})

将要抛出的方法统一写在lib文件夹中

 通过build命令构建项目生成目标文件(截图中是ttUtils.js),再通过npm publish命令将项目发布到npm上,外部项目通过npm install xxx的方式安装,使用前先在main.js或组件中引入。

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

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

相关文章

华为mpls vpn跨域C-1方案配置案例

R1: dis current-configuration [V200R003C00] snmp-agent local-engineid 800007DB03000000000000 snmp-agent clock timezone China-Standard-Time minus 08:00:00 ip vpn-instance vpn1 //添加vpn实例vpn1 ipv4-family route-distinguisher 1:1 //RD标签 vpn-target 100:1 …

如何用javascript 实现条形码和二维码

条形码和二维码 条形码和二维码都是一种用于存储信息的编码系统,它们可以被扫描设备或图像识别设备读取。 1. 条形码: 由一组垂直线条组成,线条的粗细和间距不同可以表示不同的数字或字符。通常用于商品标识和销售管理,以便在商…

Zigbee MAC地址通信中发送模块指定了接收模块MAC地址却发送不了数据包的解决办法

Zigbee MAC地址通信中发送模块指定了接收模块MAC地址却发送不了数据包的解决办法 事情缘由 在做MAC地址通信的实验中,我将程序分别下载进模块,组网成功后,发送模块终端按下按键,接收模块协调器什么反应也没有,上位机…

(模拟) 657. 机器人能否返回原点 ——【Leetcode每日一题】

❓ 657. 机器人能否返回原点 难度:简单 在二维平面上,有一个机器人从原点 (0, 0) 开始。给出它的移动顺序,判断这个机器人在完成移动后是否在 (0, 0) 处结束。 移动顺序由字符串 moves 表示。字符 move[i] 表示其第 i 次移动。机器人的有效…

STM32F4使用18B20温度传感器【串口显示、18B20传感器】

在物联网和嵌入式系统中,温度传感器是常用的传感器之一。18B20温度传感器是一种数字温度传感器,非常适合用于测量环境温度。 本篇博客将介绍如何使用正点原子团队的官方驱动代码读取18B20温度,并通过串口显示。 编写代码 首先,…

mac m1通过qemu和grub制作操作系统引导盘

文章目录 前言grub安装引导盘FAQ参考附录qemu安装ubuntuGRUB安装到回环设备吧啦吧啦... 前言 我电脑是mac m1芯片的,做了如下尝试,最终在第4种方式下成功: 开始用了parallels desktop安装了ubuntu 22版本的,因为本机是arm64芯片…

Linux学习-基础篇

Linux学习 学自尚硅谷武晟然老师,结合老师课堂内容和自己笔记所写博文。 文章目录 Linux学习基础篇桌面与终端文件系统一、文件系统和挂载点二、目录结构bin、sbinlib、lib64usrbootdevetchome、rootoptmedia、mntprocrunsrvsystmpvar Vim编辑器一、整体介绍和模式转…

GridView编辑更新时数据没有改变,总是原来的值

GridView编辑更新时数据没有改变,总是原来的值 猜测原因是:我在点击更新时又执行了page_load方法,又将数据库的值绑定到了gridview上,所以永远都是数据库的值 解决办法:判断页面是不是第一次加载。在page_load方法…

【论文笔记】FASTER SEGMENT ANYTHING:TOWARDS LIGHTWEIGHT SAM FOR MOBILE APPLICATIONS

前脚fast SAM刚发完,后脚mobile SAM就发了 ,之前的论文笔记中我一直就认为fast SAM其实应该算是yolo的扩展工作,和原生的SAM架构相去甚远,而且在简介上直接就对(gong)比(ji)了FastSA…

VS2022运行一闪而过的解决方案

1.问题情景 编写完程序后,尝试在VS中编译链接运行(使用快捷键F5或者fnF5或者ctrlfnF5,不同的电脑可能不太一样)发现控制台一闪而过。 2.解决方案 解决方案:右击“项目”->“链接器”->“子系统”->修改为“…

云原生——什么是云原生?

❄️作者介绍:奇妙的大歪❄️ 🎀个人名言:但行前路,不负韶华!🎀 🐽个人简介:云计算网络运维专业人员🐽 前言 伴随云计算的滚滚浪潮,云原生(CloudNative…

Matlab中统计矩阵中元素个数的方法

1、 tabulate函数 a [1,2,1,3,1,4,1,5,2,3,1,4,2,5,4,2];tabulate(a)第一列代表了元素,第二类代表该元素出现的个数,第三列代表该元素的占比。 2、find函数和length函数 判断矩阵a中元素2出现的次数 a [1,2,1,3,1,4,1,5,2,3,1,4,2,5,4,2]; length(…

Cadence 生成智能 PDF 的方法

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 提示:这里可以添加技术概要 项目设计完成后,原理图文件需要导出 PDF 文档进行归档,过去导出的 PDF 文 件不带属性,网络标识不可选择,查找元器件和网络标识不…

自定义类创建数组的赋值;并回复:窗体图片时间

缘由https://bbs.csdn.net/topics/392551630 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;…

Nacos 配置更新的工作流程

首先,Nacos 是采用长轮训的方式向 Nacos Server 端发起配置更新查询的功能。所谓长轮训,(如图)就是客户端发起一次轮训请求到服务端,当服务端配置没有任何变更的时候,这个连接一直打开。 直到服务端有配置或…

微分方程应用——笔记整理

首先,根据正常思路走,化简得到式子: 不难发现,设 后面得出该方程的通解: 这里要注意什么等于这个通解 --- z 又因为该曲线过点 所以可以求出c为3 该题虽然简单,但是要注意几个问题,该定…

轻松生成高质量用例的API接口工具

1、前言 随着自动化测试技术的普及,已经有很多公司或项目,多多少少都会进行自动化测试。 目前本部门的自动化测试以接口自动化为主,接口用例采用 Excel 进行维护,按照既定的接口用例编写规则,对于功能测试人员来说只…

vue使用img标签:src属性动态引入资源路径的方法

vue版本号&#xff1a;3.2.13 vue中<img src"" />标签静态引入图片资源 <template><!-- <router-view/> --><!-- 静态引入图片资源 --><img src"./assets/logo.png" alt""> </template><style la…

微软MFC技术中消息的定义

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天来聊聊MFC技术中消息的定义。 本贴子首先介绍MFC消息的基本概念&#xff0c;理解消息的定义是学习使用MFC的基础。了解消息的驱动机制后&#xff0c;才能彻底明白MFC的运行机制。 首先来看什么是消息。…

VS code搭建JavaScript环境调用XHR实现post和get简单流程

一、下载NodeJS 下载node&#xff0c;最好到node官 https://nodejs.org/en/ 下载一个LTS&#xff08;Long Term Surport&#xff09;长期支持版本。 输入命令node -v 就可以看到node的版本了如果node安装包集成了npm(node package manage)&#xff0c;那我们输入命令npm -v 也…