如何使用 VS Code devcontainers 在 react.js 中设置热重载答案

【问题标题】：How to setup hot-reload in react.js using VS Code devcontainers如何使用 VS Code devcontainers 在 react.js 中设置热重载
【发布时间】：2021-08-23 16:50:54
【问题描述】：

我开始学习反应。我通常的设置是带有基于 Docker 的开发容器的 VS Code。我使用 create-react-app 创建了一个我可以玩的非常简单的应用程序。但不知何故，热重载不起作用。任何想法可能是什么问题？

现在，我使用一个非常基本的 Dockerfile

FROM node:14.17.0

我的 .devcontainer 也很简单

{
"name": "Try React",
"dockerFile": "Dockerfile",
"runArgs": ["-u", "node"],
}

我的浏览器控制台显示

[HMR] Waiting for update signal from WDS..

正如预期的那样。但是当我保存文件时，什么也没有发生。

【问题讨论】：

我不会在这里使用 Docker。直接在主机上安装Node即可。
@DavidMaze 好的，很有趣。你能再解释一下吗。您会根据哪些因素决定在项目中使用或不使用 Docker？

标签： reactjs typescript docker visual-studio-code vscode-devcontainer

【解决方案1】：

添加标志 CHOKIDAR_USEPOLLING=true 以便在容器内检测到文件更改。

你可以；

CHOKIDAR_USEPOLLING=true npm run start 来自命令行
将CHOKIDAR_USEPOLLING=true 添加到项目根文件夹中的 .env 文件中
export CHOKIDAR_USEPOLLING=true 作为环境变量
"start": "CHOKIDAR_USEPOLLING=true react-scripts start" 到你的 package.json 中

这适用于我在使用靶心和 React 17 的 vscode 开发容器中

【讨论】：