创建一个javascript公共方法的npm包,js-tool-big-box,发布到npm上,一劳永逸

news2024/10/6 0:27:08

前端javascript的公共方法太多了,时间日期的,数值的,字符串的,搞复制的,搞网络请求的,搞数据转换的,几乎就是每个新项目,有的拷一拷,没有的继续写,放个utils目录里,自我还感觉良好,但其实有点不合适,但不复用了。我准备搞一个javascript的公共方法包,里面以后多放一些公共方法。 

 我给他起了个名字叫 js-tool-big-box,意思就是js工具的一个大盒子,魔盒魔盒,啥都能装,也可以叫他 js魔盒。不错不错,npm上还没有这么响亮的包呢!!!

目录

1 目录初始化

2 入口文件

 3 登录账户,准备上传

4 往上推代码 

5 看看传上去了没

6 安装一下 

 7 尝鲜使用 


1 目录初始化

本地新建一个文件夹,用于存放我们的目录,新建后打开cmd窗口,进行npm初始化,也就是新建那个package.json

通过输入package name  version description author等选项,就创建成功了 ,新建后的package.json代码如下:

{
  "name": "js-tool-big-box",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xingyu_qie",
  "license": "ISC"
}

2 入口文件

我们看到上面代码中有main入口属性,指向的是index.js,所以我们在项目中新建一个index.js文件,随便写两个最常用的公共方法吧,要写就得写大家都用得到的,比如我们算个加法减法吧,代码如下:

export function add(x, y) {
    return x + y;
}
export function sub(x, y) {
    return x - y;
}

 3 登录账户,准备上传

既然已经开发完成了,那就往npm库里传吧,以后大家也能用上我的公共方法了,第一步就是登录npm,执行命令:npm login

刚开始我还想着,我直接在vsCode里执行一下npm login登录一下得了,没想到他让我往浏览器跳,这上面就是登录地址,如上图,打开npm登录链接如下图所示,他提示我去邮箱拿验证码

 登录我心爱的QQ邮箱,拿到验证码,输入后,他告诉我,很成功,很安全

 然后本地的vsCode这里,貌似他也收到了信息,知道我登录成功,验证通过了,他就自动走下去了。

4 往上推代码 

代码写完了,也验证成功了,然后就是往npm库里推代码了,此刻心情好激动,执行命令:

npm publish推动效果如下图:

但需要注意,我们这个伟大的  js-tool-big-box 可是一个要让大家使用的npm公共包,公共库,所以设置一下权限,要不别人以为你这是私包呢,执行命令:npm publish --access public

但这个时候会有报错信息,如下图:

这是因为执行这个命令的时候,也是一次推项目,毕竟也是执行npm publish嘛,npm规范规定两次推代码的版本号不能相同,所以要修改一下版本号至少,不管你有没有修改业务逻辑代码。所以手动修改一下package.json中的version属性值,或者执行一下命令:npm version patch

这样version版本号就自动提升了一下了,你可以执行命令后,查看一下version的属性值,从1.0.0变成了1.0.1啦。

5 看看传上去了没

折腾这么半天,不得看看传上去了没,要是弄半天,结果没传上去,岂不是很糟糕,来打开npm网站,输入我们伟大的新项目 js-tool-big-box ,怎么验证,输入,查询呗,有就是上去了,没有就是坏了,哪里出问题了,我们验证一下看看

应该不会有哪个人,在和我们同一时间,想到了同一个名字,然后传上去吧,看一看 右下角的那个头像,Collaborators 这里,再看看代码code那里,不错,不错,就是我们的项目,稳了。

6 安装一下 

最激动人心的时刻到了,npm包也开发完了,推也推上去了,权限也设置了,我们本地项目安装一下,导入一下,使用一下不就行啦,来吧,老规矩,执行命令 npm install js-tool-big-box

然后使用一下这两个方法。太神奇了,竟然安装成功了

 7 尝鲜使用 

在业务组件内,先导入我们的npm包,使用一下里面的add和sub方法,看看效果如何,代码如下

import { add, sub } from 'js-tool-big-box';  // 导入

let testAdd = add(3333, 3333);
let textSub = sub(999, 333);
console.log('testAdd::', testAdd);
console.log('textSub::', textSub);

console.log的效果如下图,你别说,你还真别说,算的还挺准

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

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

相关文章

【汇智知了堂新课上线】——AI互联网营销师培训,开启你的智能营销之旅!

亲爱的朋友们,汇智知了堂又为大家带来了一个重磅新品——AI互联网营销师培训课程!在这个信息化、智能化的时代,掌握AI营销技能已经成为职场必备,而我们正是你实现这一目标的不二之选! 我们的AI互联网营销师培训服务&a…

Latent Guard、Tokenization in LLM、​3D Human Scan、FusionPortableV2

本文首发于公众号:机器感知 https://mp.weixin.qq.com/s/HlVV3VnqocBI4XBOT6RFHg A Multi-Level Framework for Accelerating Training Transformer Models The fast growing capabilities of large-scale deep learning models, such as Bert, GPT and ViT, are r…

WIN7用上最新版Chrome

1.下载WIN10最新版Chrome的离线安装包 谷歌浏览器 Chrome 最新版离线安装包下载地址 v123.0.6312.123 - 每日自动更新 | 异次元软件 文件名称:123.0.6312.123_chrome_installer.exe。 123.0.6312.123_chrome_installer.exe 文件右键解压缩得到 chrome.7z&#x…

为什么用云渲染农场?3D云渲染农场助力影视动画行业发展

​计算机图形技术的进步使得3D渲染成为多个产业发展的重要推动力。设计师和艺术家利用这项技术将创意实现,创造出震撼的视觉作品。但是,高质量的渲染需要大量的计算资源。云渲染农场通过提供这些资源,有效提高了渲染的速度和效率,…

【数据挖掘】实验8:分类与预测建模

实验8:分类与预测建模 一:实验目的与要求 1:学习和掌握回归分析、决策树、人工神经网络、KNN算法、朴素贝叶斯分类等机器学习算法在R语言中的应用。 2:了解其他分类与预测算法函数。 3:学习和掌握分类与预测算法的评…

【VTKExamples::Meshes】第十二期 QuadricDecimation

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK样例QuadricDecimation,并解析接口vtkQuadricDecimation,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(…

服务器raid卡,守护数据安全,赋能新质生产力

RAID卡,全称为独立冗余磁盘阵列卡,在数据中心、服务器、网络存储等领域得到广泛应用,RAID卡通过不同的RAID级别实现数据容错和冗余。例如,RAID 0主要适用于需要高速数据传输但对数据安全要求不高的场景,如数据的缓存&a…

C++ 一些编程问题解决 (C++ some programming error solutions)

电脑配置:window10, 64位操作系统,基于x64的处理器,Microsoft Visual Studio Community 2019 Version 16.4.5 问题1:Unhandled exception at 0x00007FFDB39AA839 in TesseractLACadd1.exe: Microsoft C exception: boost::filesy…

Oracle执行计划优化SPM案例

1.现象 执行下面这段代码,发现子库存表走了全表扫描 SELECT msi.secondary_inventory_name, --子库存msi.description --库存说明FROM inv.mtl_secondary_inventories msi,csi_item_instances ciiWHERE msi.secondary_inventory_name cii.inv_subinve…

【Linux--多线程】

1 . Linux线程概念 1.1 什么是线程 在一个程序里的一个执行路线就叫做线程(thread)。更准确的定义是:线程是“一个进程内部的控制序列” 一切进程至少都有一个执行线程 线程在进程内部执行,本质是在进程地址空间内运行 Linux系…

P1157 组合的输出 (dfs深搜)

题目连接&#xff1a;P1157 组合的输出 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路&#xff1a; AC代码&#xff1a; #include<iostream> #include<cstring>using namespace std;const int N 30; int st[N];//用来存这个数用没用过&#xff08;1~n个…

第十五届蓝桥杯复盘python大学A组——试题B 召唤数学精灵

按照正常思路解决&#xff0c;由于累乘消耗大量时间&#xff0c;因此这不是一个明智的解决方案。 这段代码执行速度非常慢的原因在于它试图计算非常大的数的阶乘&#xff08;累乘&#xff09;&#xff0c;并且对于每一个i的值都执行这个计算。阶乘的增长是极其迅速的&#xff…

graylog使用Sidecars方式收集springboot程序的日志

1、部署graylog后台服务 使用docker-compose启动三个服务程序&#xff0c;包括graylog、mongodb、opensearch。 docker-compose.yml内容如下 version: 3 services: # MongoDB: https://hub.docker.com/_/mongo/ mongodb: image: mongo:6.0.14 privileged: true …

Mybatis-plus动态数据源

由于服务没有做微服务部署&#xff0c;需要在后台管理系统访问其他服务的库&#xff0c;所以需要用到动态数据源切换 引入依赖 mybatis-plus动态数据源依赖 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot…

掼蛋小技巧(下篇)

一、记断张和单牌 如果我们手上有断张&#xff0c;那么外面有九成概率成炸&#xff1b;我们的单张外面有七张&#xff0c;有七成概率成炸&#xff0c;实战中两家同时断同一张牌的概率很低&#xff0c;所以要时刻关注自己的断张和单张。 二、情况不明&#xff0c;对子先行 对子可…

【进程地址空间】进程的独立性 | 虚拟地址物理地址 | 页表 | 写时拷贝

目录 前言 基本概念 进程的独立性 虚拟地址&物理地址 进程地址空间 页表&#xff08;虚拟地址☞物理地址&#xff09; 写时拷贝 基本理解 地址空间 写时拷贝&#xff08;浅拷贝&#xff09; 数据独立性的保证☞写时拷贝 写时拷贝的优点 图解分析 前言 我们…

MySQL-多表查询:多表查询分类、SQL99语法实现多表查询、UNION的使用、7种SQL JOINS的实现、SQL99语法新特性、多表查询SQL练习

多表查询 1. 一个案例引发的多表连接1.1 案例说明1.2 笛卡尔积&#xff08;或交叉连接&#xff09;的理解1.3 案例分析与问题解决 2. 多表查询分类讲解分类1&#xff1a;等值连接 vs 非等值连接等值连接非等值连接 分类2&#xff1a;自连接 vs 非自连接分类3&#xff1a;内连接…

JavaSE图书管理系统实战

代码仓库地址&#xff1a;Java图书管理系统 1.前言 该项目将JavaSE的封装继承多态三大特性&#xff0c;使用了大量面向对象的操作&#xff0c;有利于巩固理解 &#xff08;1&#xff09;实现效果 2.实现步骤 第一步先把框架搭建起来&#xff0c;即创建出人&#xff1a;管理员和…

九、OOP面向对象程序设计(四)

1、this、super、static和final关键字的使用 (1)this关键字的使用 当成员变量和局部变量重名时,在方法中使用this时,表示的是该方法所在类中的成员变量。 把当前对象当作参数传递时,可以用this。 有时候,我们会用到一些内部类和匿名类,如事件处理。当在匿名类中用thi…

第20天:信息打点-红蓝队自动化项目资产侦察企查产权武器库部署网络空间

第二十天 一、工具项目-红蓝队&自动化部署 自动化-武器库部署-F8x 项目地址&#xff1a;https://github.com/ffffffff0x/f8x 介绍&#xff1a;一款红/蓝队环境自动化部署工具,支持多种场景,渗透,开发,代理环境,服务可选项等.下载&#xff1a;wget -O f8x https://f8x.io…