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

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 [];}}}

文章插图

如此简单的HMR就实现了，画面不会重新加载了。

5. 写在最后HMR最好还是精确到元素，所以最好给parser提供一个能够精确定位到元素的id，以便模块更新的时候，能够精确定位到对于的元素以更新，而不是把所有的资源重新加载一遍。
6. 拓展阅读强烈建议去阅读vite官方文档，写的真的很详细。
另外，vite的模块解析，有一部分是通过rollup来实现的，所以可以去学学rollup的解析，加深理解。
7. 代码Mushrr/vite-hmr-plugin-test (github.com)