Mithril js 框架，启用热重载吗？

Question

我正在使用 Mithril javascript 框架和 Vite 捆绑器。应用程序非常复杂，在调试过程中，对于每次更改（即使是小的 HTML 编辑），我都需要 10-20 秒才能到达屏幕并声明我需要调试新代码，因为任何小的更改（例如添加HTML p 标签的一个字母）刷新了我的整个应用程序。

这是我的 vite 配置：

import { defineConfig } from 'vite';
import basicSsl from '@vitejs/plugin-basic-ssl';
import { VitePWA } from 'vite-plugin-pwa';
import eslint from 'vite-plugin-eslint';

export default defineConfig({
  define: {
    global: {},
  },
  esbuild: {
    jsx: 'transform',
    jsxFactory: 'm',
    jsxInject: `import m from 'mithril'`,
    jsxFragment: "'['",
  },
  server: {
    host: '0.0.0.0',
    port: '5173',
    https: true,
  },
  plugins: [
    basicSsl(),
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true,
      },
      manifest: {
        name: '...',
        short_name: '...',
        description: '...',
        theme_color: '#9977BB',
        icons: [],
      },
    }),
    eslint(),
  ],
});

以及package.json的相关部分：

{
    "scripts": {
        "start": "npm run dev",
        "dev": "npx vite --host 0.0.0.0",
        "build": "npx vite build",
        "preview": "npx vite preview",
        "check": "npx prettier --check src/**/*.js"
    },
    "devDependencies": {
        "@vitejs/plugin-basic-ssl": "^1.0.1",
        "eslint": "^8.32.0",
        "eslint-plugin-mithril": "^0.2.0",
        "prettier": "^2.8.1",
        "sass": "^1.57.1",
        "vite": "^4.0.3",
        "vite-plugin-eslint": "^1.8.1",
        "vite-plugin-pwa": "^0.14.1"
    },
    "dependencies": {
        "mithril": "^2.2.2",
    }
}

这里有办法启用热重载吗？另外，一个可能值得注意的有趣行为是 SASS 编辑不会刷新整个页面。我尝试更改当前未在应用程序中打开的屏幕，但我仍然遇到整个页面重新加载（实时重新加载）。

另外，这是我的index.jsx 文件：

import Authentication from './screens/Authentication';
import Drive from './screens/Drive';
import BrowserIncompatible from './screens/BrowserIncompatible';
import Loading from './screens/Loading';

import '@primer/css/index.scss';

import * as packageJson from '../package.json';

// log version for bug reporting
console.info(`version: ${packageJson.version}`);

const isBrowserCompatible = () =>
  navigator &&
  getComputedStyle &&
  setTimeout &&
  Uint8Array &&
  console &&
  Promise &&
  TextDecoder &&
  TextEncoder &&
  prompt &&
  alert &&
  clearTimeout &&
  crypto &&
  CryptoKey &&
  AbortController &&
  Blob &&
  URL;

m.route(document.body, '/loading', {
  '/authentication': Authentication,
  '/': Drive,
  '/incompatible': BrowserIncompatible,
  '/loading': Loading,
});

// redrect to BrowserIncompatible page if browser is incompatible
isBrowserCompatible() || m.route.set('/incompatible');

它作为模块加载到index.html中，如下所示：

<script src="src/index.jsx" type="module"></script>

附注需要明确的是，我正在寻找类似 React 的行为，在这种行为中我会更改某些内容，而不会遇到进入默认路由器页面并丢失整个状态的情况。

Answer 1

检查这个示例，看看它是否是您想要的。

https://github.com/nandodsb/mithriljs-bun-esbuild