疑难解答
npm start
没有检测到变化
当你在使用 npm start
时保存文件时,浏览器应该使用更新后的代码进行刷新。
如果浏览器没有刷新,请尝试以下解决方法:
- 检查你的入口是否已引入文件。TypeScript 将在你的任何源文件上显示错误,但是 webpack 只有在文件被某个入口直接或间接引入时才会重新加载文件。
- 如果你的项目在 Dropbox 文件夹中,请尝试将其移出。
- 如果你通过文件夹名称进行引用,但 watcher 没有在文件夹内找到名为
index.js
的文件,那么由于 Webpack 的 bug,你可能需要重启 watcher。 - 像 Vim 和 IntelliJ 这样的一些编辑器有一个“安全写入”的特性,这个特性目前会破坏 watcher。你需要禁用它,并按照 “调整文本编辑器”中的说明操作。
- 如果项目路径包含圆括号,请尝试将项目移动到没有圆括号的路径。这是 Webpack watcher bug 导致的。
- 在 Linux 和 macOS 上,你可能需要 调整系统设置 来允许更多 watcher。
- 如果项目在虚拟机(例如,配置了 Vagrant 的 VirtualBox )中运行,请在项目目录中创建一个
.env
文件,如果该文件不存在,需要向其添加CHOKIDAR_USEPOLLING=true
。 这样可以确保下次运行npm start
时,watcher 根据需要在 VM 内部使用轮询模式。
如果这些解决方案均无帮助,请在 此 issues 中留言
npm test
在 macOS Sierra 上无效果
如果你运行 npm test
,并且在运行 react-scripts test
无反应,则你的 Watchman 安装可能存在问题,参见 facebook/create-react-app#713。
我们建议首先删除项目中的 node_modules
并运行 npm install
(或者运行 yarn
)。 如果没有帮助,你可以尝试以下解决方法:
安装 Watchman 4.7.0 或更高版本可解决此问题。 如果使用 Homebrew,则可以运行以下命令对其进行更新:
watchman shutdown-server
brew update
brew reinstall watchman
你可以在 other installation methods 文档页面找到其他安装方法。
如果仍然不能解决问题,请尝试运行 launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist
也有说卸载 Watchman 可以解决这个问题。因此,如果没有其他解决方式,请将其从系统中删除,然后重试。
npm run build
过早结束
在内存有限且没有交换空间的计算机上,npm run build
可能会失败,这在云环境中很常见。 即使在小型项目中,此命令也可以使系统中的 RAM 使用量增加数百兆,因此,如果可用内存少于 1 GB,则构建可能会失败,并显示以下消息:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9
on the process.
如果你确定没有终止该进程,请考虑在要构建的计算机上 添加一些交换空间,或在本地构建项目。
npm run build
在 Heroku 下执行失败
这可能是大小写敏感的文件名的问题,请参阅 本节。
Moment.js 语言环境缺失
如果使用 Moment.js,则可能会注意到默认情况下仅英语语言环境可用。这是因为语言环境文件很大,你可能只需要 Moment.js 提供的所有语言环境 的子集。
要将特定的 Moment.js 语言环境添加到包中,你需要显式引入它。
例如:
import moment from 'moment';
import 'moment/locale/fr';
如果你是通过这种方式引入多个语言环境,则可以稍后通过调用具有语言环境名称的 moment.locale()
在它们之间进行切换
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/es';
// ...
moment.locale('fr');
这仅适用于之前已明确引入的语言环境。
npm run build
压缩失败
在 react-scripts@2.0.0
之前,此问题是由使用现代 JavaScript 功能的第三方 node_modules
引起的,因为 minifier 无法在构建过程中处理它们。通过在react-scripts@2.0.0
及更高版本中的 node_modules
中编译标准的现代 JavaScript 功能,可以解决此问题。
如果遇到这个错误,有可能是使用了旧版本的 react-scripts
,你可以通过避免使用现代语法的依赖关系或通过升级到 react-scripts@>=2.0.0
并遵循更改日志中的迁移说明来修复此问题。