浙江龙网

  1. 首页 > 生活百科 > >

从0开始写一个简单的vite hmr 插件

生活百科

从0开始写一个简单的vite hmr 插件0. 写在前面唠叨半天，赶紧开始吧

从0开始写一个简单的vite hmr 插件

文章插图
1. 初始化项目由于是真从0开始，我们这里不选择vite官方提供的create-vite ， 而是通过依赖安装的方式一步步搭建起来一个vite-plugin
按照你习惯的方式初始化项目
mkdir vite-plugin-todo// pnpmpnpm init// yarnyarn init// npmnpm initcd vite-plugin-todo安装vite
// pnpmpnpm add vite// yarnyarn add vite// npmnpm add vite初始化项目目录
// 用来作为vite的入口 ， 以及页面展示touch index.html // src文件夹以及main入口mkdir srctouch src/main.ts// plugins文件夹，存放我们的vite插件mkdir plugins// 创建vite配置文件, 以及vite环境配置文件touch vite.config.tstouch src/vite-env.d.ts在index.html 中添加main.ts 入口
【从0开始写一个简单的vite hmr 插件】// index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vite-hmr-plugin-test</title></head><body><!--这里添加main.ts 入口--><script src="https://www.huyubaike.com/src/main.ts" type="module"></script></body></html>修改package.json 的命令
{"name": "vite-plugin-todo","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "vite dev"},"keywords": [],"author": "","license": "ISC","dependencies": {"@types/node": "^18.8.5","vite": "^3.1.8"}}为了使得typescript能够解析nodejs模块
pnpm add @types/nodejsyarn add @types/nodejsnpm install @types/nodejs尝试一下pnpm dev 没报错的话就OK了
项目的结构如下
从0开始写一个简单的vite hmr 插件

文章插图
2. 初识vite plugin2.1 vite 插件是什么2.2 vite 插件的生命周期在说vite插件生命周期之前，我们还是先完善一下vite.config.ts
import { defineConfig } from "vite";export default defineConfig({plugins: [// Plugins],assetsInclude: ["src/**/*.todo"]})
  • 定义并导出一个配置
  • plugins 是用来存放vite插件实例的
  • assetsInclude 是用来指明需要解析的资源路径的，我们这里以.todo 为资源后缀

从0开始写一个简单的vite hmr 插件

文章插图
插件生命分为3个阶段，启动时，模块传入时，服务器关闭时
关于这几个模块的具体说明见vite官方文档 。
这里只说我们用到的transform
从名字可以看出是有关变化的函数，它的作用正是在我们执行导入的时候，提供检测的函数 。
从0开始写一个简单的vite hmr 插件

文章插图
每当执行写一个import，vite就会把这个信息传递到每一个插件的transform中
插件根据所需转化自己需要的.
transform接收两个参数,src为导入的文本内容 ， 另外一个id则是此模块的绝对路径（可以通过绝对路径进行文件类型判断）
transform(src, id) {return {code: "",// ...}}2.3 vite 插件是怎么提供其他资源导入的功能的？前面提到的transform函数是一个解析函数，当通过import导入的时候，就会触发，然后经过一定处理之后返回 。
所以你应该想到了 ， 其他的资源应该是以某种符合js语法的方法导入了 ， 而这个处理过程transform实现了这个过程，让一个原本不符合js语法的资源，变的合法了 。
从0开始写一个简单的vite hmr 插件

文章插图
那么说到底是怎么实现的呢？
答：通过注入的方法 。
从0开始写一个简单的vite hmr 插件

文章插图
在浏览器加载之前，vite先帮你把各种import模块全部转换好，转换为如上的形式，那你说这都定义成变量了，浏览器肯定认啊，对吧！
那你可能会问我还是不明白，到底怎么转换的，其实就是通过transform的返回值来解析转换的 。
transform(src, id) {// 解析这个文件，是不是你要的type// 执行转换// 把转换的结果可以通过 `` 插值到code里面return {code: "", // 转换后的代码// ...}}2.4 vite插件长什么样？export default function todoParser() {// 插件创建之初的代码，可以在这里配置插件所需的资源return {name: "todo-parser", // 插件名// 生命周期函数transform(src, id) {// 解析这个文件，是不是你要的type// 执行转换// 把转换的结果可以通过 `` 插值到code里面return {code: "", // 转换后的代码// ...}}}}

推荐阅读


上一篇：基于tauri打造的HTTP API客户端工具-CyberAPI

下一篇：【翻译】Raft 共识算法：集群成员变更