從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)