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

前言

简单说下 npm 是什么:

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

本文的插件功能为:DNS预解析

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

一、创建本地项目

1. 初始化项目

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

bash 复制代码
mkdir vite-plugin-tianbenchu-dns-prefetch
cd vite-plugin-tianbenchu-dns-prefetch
npm init -y

2. 安装开发依赖

本文使用了如下依赖

bash 复制代码
npm install vite --save-dev
npm install glob node-html-parser url-regex

3. 编写主要内容

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

javascript 复制代码
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

javascript 复制代码
{
  "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 文件,以便用户了解插件的用途和使用方法。

二、本地测试

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

bash 复制代码
npm create vite@latest
npm install

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

bash 复制代码
npm link

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

bash 复制代码
npm link vite-plugin-tianbenchu-dns-prefetch

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

javascript 复制代码
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官网链接

bash 复制代码
npm login

如果使用了淘宝镜像则会出现以下报错:

切换为官方注册表即可

bash 复制代码
npm config set registry https://registry.npmjs.org/

2. 发布

bash 复制代码
npm publish

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

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

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

bash 复制代码
npm install vite-plugin-xxxxxx --save-dev
相关推荐
zhanshuo5 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang6 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil8 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录15 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672215 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少20 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
ncj3934379061 小时前
vscode中对node项目进行断点调试
vscode·node.js
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome