如何使用vite框架封装一个js库,并发布npm包

目录

前言介绍

一、创建一个vite项目

1、使用创建命令:

 2、选择others

3、 模板选择library

4、选择开发语言

​编辑 二、安装依赖

三、目录介绍

1、vite.config.ts打包文件

2、package.json命令配置文件

三、发布npm

1、注册npm账号

2、设置npm源

3、登录到npm

4、推送到npm仓库

5、查看npm包


前言介绍

最近,公司项目上需要把很多公用函数封装起来,作为一个公共的库使用。以前的做法是使用webpack或者Rollup。Rollup和Webpack都是常用的JavaScript模块打包工具,用于构建现代化的Web应用程序。但是,不管是webpack或者Rollup配置起来都很复杂,使用起来不是顺手。

经过一番折腾,发现vite也可以。大多数同学可能使用vite作为脚手架去构建vue、react开发应用。其实,vite也可以作为JavaScript模块打包工具,构建一个JavaScript库,并且使用起来容易上手,配置也简单,打包速度很快,并发布到npm上。

Vite是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

  • 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。

  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

Vite 是一种具有明确建议的工具,具备合理的默认设置。您可以在 功能指南 中了解 Vite 的各种可能性。通过 插件,Vite 支持与其他框架或工具的集成。如有需要,您可以通过 配置部分 自定义适应你的项目。

Vite 还提供了强大的扩展性,可通过其 插件 API 和 JavaScript API 进行扩展,并提供完整的类型支持。其他的关于vite的介绍欢迎同学上官网去学习。下面咱们直接上手。

一、创建一个vite项目

1、使用创建命令:

pnpm create vite

这里不要选择开发框架而是选择Others 。如下图所示:

 2、选择others

3、 模板选择library

这library的意思是软件库,正好我们开发的就是一个软件库。

4、选择开发语言

 开发语言这里选择Typescript.

 二、安装依赖

pnpm  install

 依赖安装完毕后,一个js库开发环境就搭建起来了。

三、目录介绍

1、vite.config.ts打包文件

import { defineConfig } from 'vite'export default defineConfig({build: {lib: {entry: './lib/main.ts',name: 'Counter',fileName: 'counter'}}
})

2、package.json命令配置文件

{"name": "vite-roll","private": true,"version": "0.0.0","type": "module","files": ["dist","index.d.ts"],"main": "./dist/counter.umd.cjs","module": "./dist/counter.js","types": "./index.d.ts","exports": {"types": "./index.d.ts","import": "./dist/counter.js","require": "./dist/counter.umd.cjs"},"scripts": {"dev": "vite","build": "tsc && vite build"},"devDependencies": {"typescript": "^5.3.3","vite": "^5.0.10"}
}

从以上两个文件中可以看出,vite简直就是为了开发一个js库,并且发布到npm上而准备的。

三、发布npm

1、注册npm账号

想要发布到npm仓库,就必须要有一个账号,先去npm官网注册一个账号,注意记住用户名、密码和邮箱,发布的时候可能会用到。

2、设置npm源

在国内很多小伙伴喜欢把本地的npm镜像源采用的是淘宝镜像源或者其它的,如果想要发布npm包,我们得吧我们得npm源切换为官方得源,命令如下:

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

3、登录到npm

在打包后的文件根目录打开终端,输入npm login登录到官网

完成如下图步骤就成功登陆了

4、推送到npm仓库

输入npm publish就可以正式发布到npm仓库了

注意:发布前要保证没有相同的包名,否则无法发布,每次发布的版本号必须不同

5、查看npm包

上传成功后可以在npm官网上通过自己设置的keywords关键字查到自己上传的组件

发布成功后就可以使用npm命令行下载使用了。

最后附上发布npm安装包,package.json文件完整配置:

{"name": "array-device","version": "1.1.2","description": "Handle your array objects with ease","type": "module","files": ["dist","index.d.ts"],"main": "./dist/array-device.umd.js","module": "./dist/array-device.es.js","types": "./index.d.ts","exports": {"types": "./index.d.ts","import": "./dist/array-device.es.js","require": "./dist/array-device.umd.js"},"scripts": {"dev": "vite","build": "vue-tsc && vite build"},"keywords": ["array","reduce","intersection","select"],"author": "patton","license": "ISC","repository": {"type": "git","url": "https://github.com/renleiabc/array-device.git"},"bugs": {"url": "https://github.com/renleiabc/array-device/issues"},"devDependencies": {"@types/node": "^20.10.8","@typescript-eslint/parser": "^6.18.1","@vitejs/plugin-vue": "^5.0.3","eslint": "^8.56.0","eslint-config-airbnb-base": "^15.0.0","eslint-config-prettier": "^9.1.0","eslint-plugin-import": "^2.29.1","eslint-plugin-prettier": "^5.1.3","eslint-plugin-vue": "^9.20.0","prettier": "^3.1.1","typescript": "^5.3.3","vite": "^5.0.10","vue": "^3.4.8","vue-tsc": "^1.8.27"}
}

接下来,开发属于你自己的js库吧

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

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

相关文章

Echarts 折线图圆点属性【圆点大小】【鼠标悬停时放大圆点】

调整 ECharts 折线图上的圆点大小 可以通过设置相应的系列属性实现。具体来说,可以通过设置 symbolSize 属性来控制圆点的大小option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [820, 932, 901, …

让代码比你来时更干净

** 代码设计原则 ** 一、 函数设计 每个函数和每个模块都全神贯注于一件事明确的定义API尽量少的方法和函数减少依赖关系,便于维护 二、 逻辑原则 代码的逻辑直截了当,让缺陷难以隐藏构建简单的抽象没有重复的代码 三、 增益设计 性能调到最优&a…

【模型评估 05】Holdout、交叉检验、自助法

机器学习中,我们通常把样本分为训练集和测试集,训练集用于训练模型,测试集用于评估模型。在样本划分和模型验证的过程中,存在着不同的抽样方法和验证方法。 1. 在模型评估过程中,有哪些主要的验证方法,它们…

Debian(Linux)局域网共享文件-NFS

NFS (Network File system) 是一种客户端-服务器文件系统协议,允许多个系统或用户访问相同的共享文件夹或文件。最新版本是 NFS-V4,共享文件就像存储在本地一样。它提供了中央管理,可以使用防火墙和 Kerberos 身份验证进行保护。 本文将指导…

经典蓝牙连接过程

目录 1. Inquiry过程 2. 连接过程 2.1 create connection(必选) 2.

系列四、Spring Security中的认证 授权(前后端不分离)

一、Spring Security中的认证 & 授权(前后端不分离) 1.1、MyWebSecurityConfigurerAdapter /*** Author : 一叶浮萍归大海* Date: 2024/1/11 21:50* Description:*/ Configuration public class MyWebSecurityConfigurerAdapter extends WebSecuri…

安卓应用无法拉起部分机型微信支付

错误提示: 2024-01-11 09:01:01.878 11754-11754 MicroMsg.S...ApiImplV10 com.bm.read E register app failed for wechat app signature check failed 2024-01-11 09:01:01.879 11754-11754 MicroMsg.S...ApiImplV10 com.bm.read E s…

建站为什么需要服务器?(Web服务器与计算机对比)

​  在部署网站时,底层基础设施在确保最佳性能、可靠性和可扩展性方面发挥着至关重要的作用。虽然大多数人都熟悉个人计算机 (PC) 作为日常工作和个人任务的设备,但 PC 和 Web 服务器之间存在显著差异。在这篇文章中,我们将讨论这些差异是什…

CentOS:docker容器日志清理

1.先查看磁盘空间 df -h 2.找到容器的containerId-json.log文件,并清理 find /var/lib/docker/containers/ -name *-json.log |xargs du -sh 3、可以根据需求清理对应日志也可以清理数据大的日志 $ cat /dev/null > /var/lib/docker/containers/dbaee0746cc6adad3768b4ef…

java基础知识点系列——数据输入(五)

java基础知识点系列——数据输入(五) 数据输入概述 Scanner使用步骤 (1)导包 import java.util.Scanner(2)创建对象 Scanner sc new Scanner(System.in)(3)接收数据 int i sc…

【数据库集群】之一主一从

目录 一、mysql集群概念二、mysql集群环境配置实验1、全新的服务器安装全新的数据库(可以在vm中克隆比较快,克隆的服务器要没有安装好数据库,实验环境:mysql80)2、配置域名解析3、一主一从服务器的配置:一、…

算法训练营Day39

#Java #动态规划 Feeling and experiences&#xff1a; 爬楼梯&#xff08;进阶版&#xff09;&#xff1a;卡码网题目链接 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬至多m (1 < m < n)个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; …

Innosetup 读写注册表,读写INI文件

一.innosetup读写注册表 1.注册表读写字符串 (RegQueryStringValue&#xff0c;RegWriteStringValue) RegQueryStringValue(HKEY_CURRENT_USER, SOFTWARE\SODA, appversion, appversion) RegWriteStringValue(HKEY_CURRENT_USER, SOFTWARE\SODA, appversion, s…

MySQL之多表连接查询、AS别名、扩展内容(information_schema的基本应用)

文章目录 前言一、引入多表连接查询二、多表连接查询案例1.准备对应的库表2.案例 三、AS别名用法示例 四、扩展内容1、information_schema的基本应用2、创建视图示例3、information_schema.tables视图的应用3.1、示例 五、show命令总结总结 前言 第三章内容主要描述了mysql使用…

InternLM第4次课笔记

XTuner 大模型单卡低成本微调实战 1 Finetune介绍 2 XTuner介绍 XTuner中微调的技术&#xff1a; 3 8GB显卡玩转LLM 4 动手实战环节 https://github.com/InternLM/tutorial/tree/main/xtuner

@RequestBody 注解内置的 HttpMessageConverter 实现类来解析请求体

在 Spring MVC 中&#xff0c;RequestBody 注解默认使用内置的 HttpMessageConverter 实现类来解析请求体&#xff0c;并尝试将其转换为方法参数所需的对象类型。如果需要指定解析的数据类型&#xff0c;可以通过在方法参数上添加更具体的注解来实现。 以下是一些常见的用于指…

第九部分 使用函数 (一)

目录 一、简介 二、函数的调用语法 一、简介 在 Makefile 中可以使用函数来处理变量&#xff0c;从而让我们的命令或是规则更为的灵活和具 有智能。make 所支持的函数也不算很多&#xff0c;不过已经足够我们的操作了。函数调用后&#xff0c;函数 的返回值可以当做变量来使用…

YOLOv8 Ultralytics:使用Ultralytics框架进行FastSAM图像分割

YOLOv8 Ultralytics&#xff1a;使用Ultralytics框架进行FastSAM图像分割 前言相关介绍前提条件实验环境安装环境项目地址LinuxWindows 使用Ultralytics框架进行FastSAM图像分割参考文献 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff0c;敬请批评改正。更多精彩内容…

力扣(leetcode)第696题计数二进制字串(Python)

696.计数二进制字串 题目链接&#xff1a;696.计数二进制字串 给定一个字符串 s&#xff0c;统计并返回具有相同数量 0 和 1 的非空&#xff08;连续&#xff09;子字符串的数量&#xff0c;并且这些子字符串中的所有 0 和所有 1 都是成组连续的。 重复出现&#xff08;不同…