阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      create-react-app 故障排除

      npm start 不会检测更改

      在保存文件时运行 npm start ,浏览器应刷新更新的代码。

      如果没有发生这种情况,请尝试以下解决方法之一:

      • 如果你的项目位于 Dropbox 文件夹中,请尝试将其移出。
      • 如果 watcher 没有发现名为 index.js 的文件,并且你通过文件夹名称引用它,则 需要重新启动 watcher 程序,因为 Webpack 存在错误。
      • 像 Vim 和 IntelliJ 这样的编辑器有一个 “安全写入” 功能,所以会经常自动保存,中断 watcher 。你需要禁用它。按照 “调整文本编辑器” 中的说明进行操作。
      • 如果项目路径包含括号,请尝试将项目移动到不带括号的路径。这是由 Webpack watcher 错误 引起的。
      • 在 Linux 和 macOS 上,你可能需要 调整系统设置 以允许 watchers 更多权限。
      • 如果项目在虚拟机(如 Vagrant provisioned)VirtualBox 内运行,则在项目目录中创建一个 .env 文件(如果该文件不存在),并为其添加 CHOKIDAR_USEPOLLING=true 。这确保了下次运行 npm start 时,观察程序会在 VM 内部根据需要使用轮询模式。
      • 如果这些解决方案都没有帮助,请 在此主题 中留言。

      npm test 在 macOS Sierra 上挂起 或 崩溃

      如果你运行 npm test 并且在打开 react-scripts test 到控制台后控制台卡住了,那么你的 Watchman 安装可能会出现问题,如 facebook/create-react-app#713 所述。

      我们建议首先删除项目中的 node_modules 并运行 npm install(如果你安装了 Yarn 也可以运行 yarn )。如果它没有帮助,你可以尝试以下众多变通的方法来解决:

      facebook/jest#1767 facebook/watchman#358 ember-cli/ember-cli#6259 据报道,安装 Watchman 4.7.0 或更新版本修复了这个问题。如果你使用 Homebrew ,则可以运行以下命令来更新它:

      watchman shutdown-server
      brew update
      brew reinstall watchman
      

      你可以在 Watchman 文档页面上找到 其他安装方法 。

      如果仍然没有帮助,请尝试运行 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.

      如果你完全确定没有终止该过程,请考虑向你正在构建的计算机 增加一些交换空间,或在本地构建项目。

      在 Heroku 上 npm run build 失败

      这可能是区分大小写的文件名的问题。 请参阅 本节。

      缺少 Moment.js 语言环境

      如果你使用 Moment.js ,你可能会注意到默认情况下只有英语区域设置可用。 这是因为语言环境文件很大,你可能只需要 Moment.js 提供的所有语言环境 的子集。

      要向 bundle 包添加特定的 Moment.js 区域设置,你需要显式导入它。 例如:

      import moment from 'moment';
      import 'moment/locale/fr';
      

      如果以这种方式导入多个语言环境,稍后可以通过使用语言环境名称(例如 ‘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 并遵循更改日志中的迁移说明来修复它。

      目录
      目录