从0开始写一个简单的vite hmr 插件( 三 ) _生活百科

回到vite.config.ts中，在plugins数组内部直接执行todoParser()，实现插件的装载
在main.ts 中接收这个导入的资源，并且赋值到document中
import { data } from './assets/journey.todo'import './style.css'; // 样式，这里消除了li的一般样式 list-style: noneconsole.log(data);document.body.innerHTML = data;

文章插图

上面的预览图可以发现我们实现了功能，但是每次一写完，整个页面就会全部刷新，这可不太好，所以还需要HMR

4. HMR 实现

文章插图
注意，vite中server和client是可以相互通信！这里只需要server向client发送消息
4.1 server 发送vite服务器实例的获取有很多种方法：

直接通过vite钩子 configureServer(server) {}获取
一般用来给vite服务器添加中间件
通过处理更新的钩子获取 handleHotUpdate({file, server, modules}){}

这里我们要实现的是热更新，所以采用handleHotUpdate就可以了，在模块更新的时候，就会触发这个函数，通过server向client发送更新的消息，以及更新的数据，然后让浏览器在未刷新的情况下直接更新

async handleHotUpdate({ server, file, modules }) {let fileData = https://www.huyubaike.com/biancheng/await fs.readFile(modules[0].id as string);server.ws.send({type:'custom',event: 'special-update', // 事件名data: {msg: "Update from server",updateVal: fileData.toString()}})console.log(`${file} should be updated`);return [];}

通过node的fs模块读取到了文本的数据
随后通过server.ws.send()向client发送的数据，其中更新之后的数据存放在data.updateVal中
4.2 client 获取在vite中，模块热更新以事件的形式抛出，具体来说是
import.meta.hot.on('xxx事件', () => {} /*事件回调*/)我们这里编写如下代码

if (import.meta.hot) {import.meta.hot.on('special-update', (data) => {data = https://www.huyubaike.com/biancheng/parser(data.updateVal);document.body.innerHTML = data;})}

如果更新了，那么就执行parser，解析数据，最后把数据赋值到document.body.innerHtml上。
那这个代码应该写在哪儿呢？
答应该写在，模块导入的未知，也就是transform函数的返回值中
这样才能保证每一个.todo模块都能够热更新！

// 完整的parserexport default function todoParser(): Plugin {let todoFileRegex = /\.(todo)$/;// local variablefunction log(msg) {console.log(msg);}return {name: "todo-parser",transformIndexHtml(html) {return html.replace(/<title>(.*?)<\/title>/, '<title>TODO Parser</title>');},transform(src, id) {// module injectconsole.log(id);if (todoFileRegex.test(id)) {return {code: `export let data = "https://www.huyubaike.com/biancheng/${parser(src)}"export ${parser}if (import.meta.hot) {import.meta.hot.on('special-update', (data) => {data = parser(data.updateVal);document.body.innerHTML = data;})}`,};}},async handleHotUpdate({ server, file, modules }) {let fileData = https://www.huyubaike.com/biancheng/await fs.readFile(modules[0].id as string);server.ws.send({type:'custom',event: 'special-update',data: {msg: "Update from server",updateVal: fileData.toString()}})console.log(`${file} should be updated`);return [];}}}