javascript - Gatsby 热重载不会在 Hello World 入门项目中重载

Question

描述

我按照这里的说明进行操作:https://www.gatsbyjs.org/tutorial/part-one/
当我启动开发服务器并对 src/pages/index.js 进行更改时，它不会在我的浏览器中热重新加载。

重现步骤

使用 gatsby-cli:

Gatsby 新的 Hello World https://github.com/gatsbyjs/gatsby-starter-hello-world

cd Hello World

Gatsby 开发

更改 src/pages/index.js

中 div 内的文本


预期结果

页面将自动重新加载新文本。

实际结果

除非在浏览器中应用手动刷新，否则页面不会更改。

眼镜

操作系统 :在 Windows 10 Pro 上的 WSL 中运行的 Ubuntu 18.04.3 LTS

节点 : 12.12.0

新品管理 : 6.11.3

Gatsby CLI : 2.8.8

Gatsby : 2.17.6

浏览器 :Chrome 77.0.3865.120、IE 11.1006.17134.0、Firefox 70.0

我已经尝试了多个具有相同结果的浏览器，所以我在 firefox 中运行了 devtools，并在我进行更改时检查了控制台输出，我看到了这个错误:

The connection to http://localhost:8000/__webpack_hmr was interrupted while the page was loading. client.js:88
[HMR] Update check failed: hotDownloadManifest/</request.onreadystatechange@http://localhost:8000/commons.js:42:16
process-update.js:147
Error: Manifest request to /d528b21bff3fd2caa92d.hot-update.json timed out. bootstrap:41
Firefox can’t establish a connection to the server at http://localhost:8000/__webpack_hmr. client.js:88

我也在 github 和 here 上环顾四周，并没有找到解决我的问题的方法。任何关于解决方法、解决方案或洞察为什么这可能对我不起作用的想法将不胜感激!

Answer 1

我遇到了同样的问题。每当我对文件进行更改时，Gatsby Develop 热重载都无法正常工作，此外，Gatsby Develop 编译代码和启动并运行开发服务器的速度非常慢。我发现，如果我在 Linux 目录结构而不是 Windows 中创建我的 Gatsby 项目，一切都会运行良好并且速度非常快。所以我的解决方案如下。

在 /home/<your_username> 中创建您的项目WSL 中的目录。只需转到 /home/<your_username>并在那里创建一个文件夹 mkdir ;转到该文件夹​​，然后运行 ​​Gatsby create my_project该文件夹中的命令。

这样，您的项目将驻留在 Linux 目录结构中，从而使一切顺利运行。