如何使用 Vite HMR API 和 Pixi.js

Question

我正在尝试使用 Vite HMR API to create a Pixi.js 应用程序，该应用程序可以在不重置其状态的情况下进行热重载。高级理念：

main.js 初始化 Pixi.js 因此导入的函数 update() 是运行每个 tick。
导入的 update() 传递了一个具有状态的对象，因此可以在 main.js 上下文中进行更改。

我已经update.js热更新了，但是应用没有反映修改后的功能：

// update.js
if (import.meta.hot) {
    import.meta.hot.accept()
}
export default function update(delta, state) {
    state.bunny.rotation += 0.1 * delta;
}

我觉得是因为Pixi还在用老的update():

// main.js
app.ticker.add((delta) => { update(delta, state) });

所以我试着accept updates in main.js when update.js was updated:

// main.js
import update from './update.js';

if (import.meta.hot) {
    import.meta.hot.accept('./update.js', (newUpdate) => {
    console.log('Update ticker here.');
  })
}

但是update.js热更新时不会调用此回调。为什么回调没有被调用？

我尝试了一些其他的东西，比如将这个 Snowpack HMR example 移植到 Vite。我曾 problems/errors 设置模块状态 (module.setState(import.meta.hot.data))，但我认为我不需要这样做。

Answer 1

I think it's because Pixi is still using the old update():

你的假设是正确的。 Vite 的工作在导入新模块时结束，您会通过 accept 回调收到通知。您需要确保您没有保留对原始模块的内部引用，因为 Vite 无法拦截和替换这些引用。

import { update } from './update';

// create your PIXI app

let updateFunction = update;
    
app.ticker.add((delta) => {
  updateFunction(delta, state);
});

if (import.meta.hot) {
   import.meta.hot.accept('./update', (newModule) => {
     updateFunction = newModule.update;
   });
}

如何使用 Vite HMR API 和 Pixi.js

How to use Vite HMR API with Pixi.js

javascript

pixi.js

vite

hot-module-replacement