如何在一些简单的 JS 函数（不是 React / Vue）上启用热重载

Question

我有一个使用 Vue/cli 作为前端的经典演示项目。

Runnin npm run serve 运行良好，对组件的任何更改确实是热重载。

现在，如果我还希望 mylib.js 中的代码在更改时重新加载。

假设mylib.js 是以下代码。

const XXX = window.XXX || { 
  foo: () => { alert("BAR TEST 1")},
}

window.XXX = XXX;

我调用XXX.foo()，它显示BAR TEST 1，然后如果我将BAR TEST 1 编辑为BAR TEST 2，我看到更改被npm run serve 拾取，但XXX.foo() 没有重新加载。

在 webpack 中挖掘了一下，我看到一些关于 hot() API 的提及。我需要用不同的方式写mylib.js吗？ （模块）。

vue.config.js

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
    publicPath: "http://0.0.0.0:8080/",
    outputDir: './dist/',
    pages: {
      main: {
        entry: 'src/main.js',
      },
      mylib: {
        entry: 'src/mylib.js',
      }
    },
    chainWebpack: config => {

        config.optimization
            .splitChunks(false)

        config
            .plugin('BundleTracker')
            .use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])

        config.resolve.alias
            .set('__STATIC__', 'static')

        config.devServer
            .public('http://0.0.0.0:8080')
            .host('0.0.0.0')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({"Access-Control-Allow-Origin": ["\*"]})
    }
};

Answer 1

这很简单：

if (module.hot) {
    module.hot.accept();
    // call your js update code here
}