当前位置: 首页 > news >正文

【npm】如何将开发的vite插件发布到npm

前言

简单说下 npm 是什么:
npm 是一个 node 模块管理工具,也是全球最大的共享源。 npm 工具与 nodejs 配套发布,便利开发人员共享代码。npm 主要包括 npm 官方网站、CLI(控制台命令行工具)、和 registry(包/软件仓库)。

本文的插件功能为:DNS预解析
这里只用来演示如何发布到npm,该插件的功能具体是如何实现的请看本人另一篇文章:DNS解析优化。

一、创建本地项目

1. 初始化项目

生成项目目录并且初始化package.json

mkdir vite-plugin-tianbenchu-dns-prefetch
cd vite-plugin-tianbenchu-dns-prefetch
npm init -y

2. 安装开发依赖

本文使用了如下依赖

npm install vite --save-dev
npm install glob node-html-parser url-regex

3. 编写主要内容

src 目录下创建插件文件 index.js,将逻辑封装为 Vite 插件。

const fs = require("fs")
const path = require("path")
const { parse } = require("node-html-parser") // 可以脱离浏览器环境将html字符串解析成HTML节点
const { glob } = require("glob")
const urlRegex = require("url-regex") // 可以分析文件中所包含的url
const { strict } = require("assert")const urlPattern = /(https?:\/\/[^/]*)/i // 获取外部链接
const urls = new Set() // url集合// 遍历dist目录中的所有 HTML 文件
async function searchDomain() {const files = await glob("dist/**/*.{html,css,js}")for (const file of files) {const source = fs.readFileSync(file, "utf-8")const matches = source.match(urlRegex({ strict: true }))console.log(matches, "@@@@@@@@")if (matches) {matches.forEach((url) => {const match = url.match(urlPattern)if (match && match[1]) {urls.add(match[1]) // 将域名加到Set中}})}}
}// 将遍历好的所有域名生成link预解析标签并插入到index.html中
async function insertLinks() {const files = await glob("dist/**/*.html")const links = [...urls].map((url) => `<link rel="dns-prefetch" href="${url}">`).join("\n")for (const file of files) {const html = fs.readFileSync(file, "utf-8")const root = parse(html)const head = root.querySelector("head")head.insertAdjacentHTML("afterbegin", links)fs.writeFileSync(file, root.toString(), "utf-8")}
}async function main() {await searchDomain()await insertLinks()
}main()

4. 配置package.json

{"name": "vite-plugin-tianbenchu-dns-prefetch","version": "1.0.0","main": "src/index.js","scripts": {"build": "vite build"},"keywords": ["vite","plugin","dns-prefetch"],"author": "TianBenChu","license": "ISC","description": "A Vite plugin to automatically add dns-prefetch links for external resources in the bundled HTML.","devDependencies": {"vite": "^5.4.0"},"dependencies": {"glob": "^11.0.0","node-html-parser": "^6.1.13","url-regex": "^5.0.0"}
}

5. 添加README和LICENSE

书写 README.md 文件和 LICENSE 文件,以便用户了解插件的用途和使用方法。

二、本地测试

在插件项目目录外创建测试项目并安装依赖。

npm create vite@latest
npm install

插件项目中运行以下命令,将插件链接到本地 npm 包缓存中

npm link

测试项目中使用 npm link 链接本地插件,这里的链接名对应插件项目中package.json中的name。

npm link vite-plugin-tianbenchu-dns-prefetch

配置 vite.config.js,使用本地插件

import { defineConfig } from 'vite';
import dnsPrefetchPlugin from 'vite-plugin-dns-prefetch';export default defineConfig({plugins: [dnsPrefetchPlugin()]
});

本文正常测试结果如下:

1.未配置插件前执行npm run build,发现dist目录下index.html的head中并没有link标签。
在这里插入图片描述2.使用本地插件后执行npm run build,index.html的head中插入了link标签以保证dns预解析。
在这里插入图片描述

三、发布到npm

1. 登录npm账号

如何注册npm账号:npm官网链接

npm login

如果使用了淘宝镜像则会出现以下报错:
在这里插入图片描述
切换为官方注册表即可

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

2. 发布

npm publish

需要注意 package.json 中不能设置为私有,否则无法发布。

在这里插入图片描述

登录npm发现已经发布了该插件

在这里插入图片描述

3. 通过npm下载并测试插件

npm install vite-plugin-xxxxxx --save-dev

相关文章:

【npm】如何将开发的vite插件发布到npm

前言 简单说下 npm 是什么&#xff1a; npm 是一个 node 模块管理工具&#xff0c;也是全球最大的共享源。 npm 工具与 nodejs 配套发布&#xff0c;便利开发人员共享代码。npm 主要包括 npm 官方网站、CLI&#xff08;控制台命令行工具&#xff09;、和 registry&#xff08;…...

数据结构-查找

一、基本术语 二、线性结构 ASL&#xff1a;平均查找长度 1、顺序查找 1.1、代码实现 typedef struct {int* elem;int TableLen; }SSTable;int Search_Seq(SSTable ST, int key) {ST.elem[0] key; //哨兵&#xff0c;使得循环不用判断数组是否会越界int i;for (i ST…...

Ubuntu环境下 pip安装应用时报错

pip安装应用时&#xff0c;报SSL错 WARNING: pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available. 可能原因是python没有ssl&#xff0c;则在python安装时应该添加ssl ./configure --with-openssl/usr/local/ssl …...

打包时未添加camera模块,请参考https://ask.dcloud.net.cn/arss/1ooticle/283

今天在app打包使用的时候突然发现app在拍照上传照片的时候遇到这个问题 遇到这种情况通常是因为app打包的时候manifestjson文件中App模块配置中的Camera&Gallery配置没有打开&#xff0c;点击相应选项勾选即可 然后再上传打包就好了! 哈哈哈好久没写博客了最近太忙了&…...

Vue3+Setup使用websocket

创建src/util/socket.ts let websock: any null; let global_callback: any null; const serverPort "8080"; // webSocket连接端口 const wsuri "ws://" window.location.hostname ":" serverPort "/wsdemo"; function crea…...

tcpdump快速入门及实践手册

tcpdump快速入门及实践手册 1. 快速入门 [1]. 基本用法 基本用法&#xff1a; tcpdump [选项 参数] [过滤器 参数] [rootkysrv1 pwe]# tcpdump -h tcpdump version 4.9.3 libpcap version 1.9.1 (with TPACKET_V3) OpenSSL 1.1.1f 31 Mar 2020 Usage: tcpdump [-aAbdDefhH…...

javascript双判断语句

JavaScript的if双判断语句和java相似 if&#xff08;条件表达式&#xff09; { 执行语句 } else { 执行语句 } 比如说要判断一个年份是否是闰年&#xff0c;代码如下 html><head><meta charset"UTF-8"><title></title></hea…...

C# 中的多态

多态的定义&#xff1a; 通过指向派生类的基类引用&#xff0c;调用虚函数&#xff0c;会根据引用所指向派生类的实际类型&#xff0c;调用派生类中的同名重写函数&#xff0c;便是多态。 C#中的多态可以分为两种类型&#xff1a; 编译时多态&#xff08;静态多态&#xff09;&…...

高性能内存对象缓存Memcached原理与部署

目录 一&#xff1a;Memcached 1&#xff1a;Memcached的概述 2&#xff1a;数据存储方式与数据过期方式 &#xff08;1&#xff09;数据存储方式&#xff1a;Slab Allocation (2)数据过期方式:LRU、Laxzy Expiration 3.Memcached 缓存机制 4.Memcached 分布式 5.Memcac…...

【C++进阶】map与set的封装实践

文章目录 map和setmapmap的框架迭代器operator()operator--()operator()和operator!()operator*()operator->() insertbegin()end()operator[] ()map的所有代码&#xff1a; set的封装迭代器的封装总结 map和set 通过观察stl的底层我们可以看见&#xff0c;map和set是通过红…...

可视化编程-七巧低代码入门02

1.1.什么是可视化编程 非可视化编程是一种直接在集成开发环境中&#xff08;IDE&#xff09;编写代码的编程方式&#xff0c;这种编程方式要求开发人员具备深入的编程知识&#xff0c;开发效率相对较低&#xff0c;代码维护难度较大&#xff0c;容易出现错误&#xff0c;也需要…...

算法:魔法字典

1️⃣要求&#xff1a; 设计一个使用单词列表进行初始化的数据结构&#xff0c;单词列表中的单词 互不相同 。 如果给出一个单词&#xff0c;请判定能否只将这个单词中一个字母换成另一个字母&#xff0c;使得所形成的新单词存在于你构建的字典中。 实现 MagicDictionary 类…...

html+css 实现hover 翻转按钮

前言:哈喽,大家好,今天给大家分享html+css 绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 一、效果二、原理解析1.这是一个,hover翻转按钮的效果。这其实是用==一个元素==实现的。…...

ETL程序员如何平衡日常编码工作与提升式学习

在快速发展的科技行业中&#xff0c;程序员面临着不断更新的技术和工具&#xff0c;尤其是数据领域的从业者&#xff0c;如ETL&#xff08;抽取、转换、加载&#xff09;工程师。如何在日常繁重的编码工作中找到时间进行提升式学习&#xff0c;成为了许多ETL工程师的共同挑战。…...

被嫌弃的35岁程序员,竟找到了职业的新出路:PMP项目管理

35岁&#xff0c;本应是事业发展的高峰期。更多听到的却是35岁职场天花板&#xff0c;特别是IT从业者&#xff0c;35岁就好像是一道迈不过的坎&#xff1a;多年的工作经验&#xff0c;在35岁的生理年龄面前&#xff0c;一文不值。 IT从业者若想安然度过“35岁危机”&#xff0…...

跟李沐学AI:目标检测、锚框

边缘框 用于表示物体的位置&#xff0c;一个边缘框通过四个数字定义&#xff1a;(坐上x, 左上y, 右下x, 右下y)或&#xff08;左上x, 左上y, 宽, 高&#xff09; 通常物体检测或目标检测的数据集比图片分类的数据集小很多&#xff0c;因为物体检测数据集标注成本高很多。 目…...

【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面(一)

学完时间&#xff1a;2024年8月14日 一、前言叨叨 学习HarmonyOS的第六课&#xff0c;人数又成功的降了500名左右&#xff0c;到了3575人了。 二、ArkWeb 1、概念介绍 ArkWeb是用于应用程序中显示Web页面内容的Web组件&#xff0c;为开发者提供页面加载、页面交互、页面调…...

机器学习深度学习中的Warmup技术是什么?

机器学习&深度学习中的Warmup技术是什么&#xff1f; 在机器学习&深度学习模型的训练过程中&#xff0c;优化器的学习率调整策略对模型的性能和收敛性至关重要。Warmup是优化器学习率调整的一种技术&#xff0c;旨在改善训练的稳定性&#xff0c;特别是在训练的初期阶…...

ECMAScript6中的模块:export导出、import导入

1、模块概述 早期的 JavaScript 程序很小&#xff0c;通常被用来执行独立的脚本任务&#xff0c;在 Web 页面中需要的地方提供一定的交互。随着 Web 应用程序变得越来越复杂&#xff0c;有必要考虑提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制&#xff0c;这就…...

mysql写个分区表

因为表量已经达到1个亿了。现在想做个优化&#xff0c;先按照 create_time 时间进行分区吧。 create_time 是varchar类型。 CREATE TABLE orders (id varchar(40) NOT NULL ,order_no VARCHAR(20) NOT NULL,create_time VARCHAR(20) NOT NULL,amount DECIMAL(10,2) NOT NULL,…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...