0

我有兴趣在不涉及 Node.Js 的情况下在浏览器中使用 react-refresh。我当前的开发服务器提供静态文件（本机 es 模块），并且可以检测文件何时更改。此更改检测通过 SSE 传达给浏览器。

我想使用像 Skypack 这样的 CDN 来加载 react-refresh 并启用运行时。

import RefreshRuntime from 'https://cdn.skypack.dev/react-refresh/cjs/react-refresh-runtime.development.js';

我在https://github.com/facebook/react/issues/16604#issuecomment-528663101阅读了 Dan 的初始指南，但我不确定如何将所有内容拼凑在一起。

我需要做什么才能为已安装的组件启用 react-refresh？如何让浏览器知道导入的模块/组件应该重新导入？

我需要用任何东西将我的组件包装在我的模块中吗？这部分最让我困惑。想象一下我有一个像这样的组件：

import React from 'https://cdn.skypack.dev/react';

function App() {
    return React.createElement('div', null, `App component`);
}

export default App;

为了让它与react-refresh一起玩，需要发生什么？

我的主要入口点 index.js 模块看起来像

import App from './app.js';

ReactDOM.render(
    React.createElement(App, {}, null),
    document.getElementById('root')
  );

以最简单的形式，我想在加载组件的地方进行概念验证。在本地更改它并在某处按下按钮以模仿文件更改的 SSE。然后单击按钮应调用 react-refresh 并且已安装的 App 组件应反映更改。

4

0 回答 0