2

我正在使用框架 gatsby 开发一个小网站，但我在动态导入和 webpack 提供的热重载方面遇到了困难。

这是我的反应组件：

import React from 'react'

import styles from './_frame.module.scss'

class Frame extends React.Component {
  constructor(props) {
    super(props);
    this.frame = React.createRef();
  }

  render() {
    return (
      <div className={styles.frame}
           ref={this.frame}>
        <div className="inner wrap--redux">
          <canvas className={styles.canvas}
                  id="canvas"
                  width="800"
                  height="600">
          </canvas>
        </div>
      </div>
    );
  }

  componentDidMount() {
    import(`../../experiments/${this.props.slug}`)
      .then(res => {
        new res.default(this.frame.current);
      });
  }
};
export default Frame

我希望当我对导入的 JavaScript 进行修改时，热重载会触发并刷新我的组件。目前我必须手动刷新浏览器以观察所做的更改。

您可以在此处查看整个存储库：https ://github.com/maximeparisse/webgl-journey

以及从中提取代码的文件： https ://github.com/maximeparisse/webgl-journey/blob/master/src/components/experiments/frame.js

如果你只想复制 - git clone 存储库 - npm i - gatsby develop

谢谢你的帮助。

4

1 回答 1

0

在尝试了很多东西，包括 wsl、npm clenaup 等之后，我意识到我的杀毒软件sophos阻止了 webpack 热重载套接字__webpack_hmr。

我所要做的就是暂时禁用防病毒软件。（您可以自由卸载它或更改为另一个）。

于 2020-10-15T14:35:46.763 回答