Блог

Я разрабатываю node.js приложение, использующее Sveltekit vite.

У меня есть файл, куда я прикрепляю слушателей событий.

Когда я изменяю конкретный файл, прикрепляется новый прослушиватель, но старый все еще активен.

Можно ли как-то подключиться к жизненному циклу перезагрузки страницы Vite?

В настоящее время я пытался прислушаться proceess.on('SIGINT|'SIGTERM'|'SIGHUP') , но это не помогло.

Для этого вы можете написать плагин для подключения handleHotUpdate .

Посмотрите на следующий небольшой пример плагина :

custom-hot.ts :

 /**
 * Custom Hot Reloading Plugin
 */

const data = 1337

export default function CustomHot() {
    return {
        name: 'custom-hot',
        enforce: 'post',
        handleHotUpdate({ file, server }) {

            console.log('> custom hot update', 'HotUpdate Hook')
            
            server.ws.send({
                type: 'custom',
                event: 'custom-hot',
                data: {"dummyData": data}
            })

            console.log('> Look at websockets messages for the event then look at your developer console to see the message from `hmr.ts`...', 'HotUpdate Hook')
        }
    

 

vite.config.ts :

 [...]

plugins: [
  customHot()
],

[...]
 

hmr.ts

 /**
 * Customized HMR module
 * eg: could be used to keep safe stores values with svelte/store
 */ 
 
if (import.meta amp;amp; import.meta.hot) {
  import.meta.hot.accept()
  import.meta.hot.on('custom-hot', (data) => {
      console.log('received event with data: ' , data)
  })  
} 
 

Теперь, чтобы увидеть результат, сохраните файл модуля hmr.ts , а затем :

• a custom event с custom data выстреливается насквозь websockets :

• после получения вы можете просмотреть журнал сообщений в инструменте разработчика:

Для получения дополнительной информации посетите официальный документ по адресу

• https://vitejs.dev/guide/api-hmr.html#hot-accept-cb
• https://vitejs.dev/guide/api-plugin.html#handlehotupdate