前言
简单说下 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
