佛山网站哪家最专业,服装企业网站内容规划,百度wordpress插件,产品推广渠道有哪些方式前言
简单说下 npm 是什么#xff1a; npm 是一个 node 模块管理工具#xff0c;也是全球最大的共享源。 npm 工具与 nodejs 配套发布#xff0c;便利开发人员共享代码。npm 主要包括 npm 官方网站、CLI#xff08;控制台命令行工具#xff09;、和 registry#xff08;…前言
简单说下 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 -y2. 安装开发依赖
本文使用了如下依赖
npm install vite --save-dev
npm install glob node-html-parser url-regex3. 编写主要内容
在 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 reldns-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 vitelatest
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 buildindex.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
