此文章是翻译How to develop apps bootstrapped with Create React App 官方文档

系列文章

  1. 如何开发由Create-React-App 引导的应用
  2. 如何开发由Create-React-App 引导的应用(一)
  3. 如何开发由Create-React-App 引导的应用(二)
  4. 如何开发由Create-React-App 引导的应用(三)

Advanced Configuration

你可以通过在shell中设置环境变量或.env来调整各种开发和生产设置。

Variable Development Production Usage
BROWSER 默认情况下,Create React App 将打开默认系统浏览器,在Mac OS上支持Chrome。 指定浏览器来覆盖此行为,或将其设置为none以完全禁用它。
HOST 默认情况下,开发Web服务器绑定到localhost。 你可以使用此变量来指定不同的主机。
PORT 默认情况下,开发Web服务器将尝试在端口3000上侦听或提示你尝试下一个可用端口。 你可以使用此变量来指定不同的端口。
HTTPS 当设置为 true 时, Create React App 将以https 模式运行开发Web服务器。
PUBLIC_URL Create React App 假定你的应用程序托管在Web服务器的根目录或在package.jsonhomepage中指定的子路径。 通常,Create React App 忽略hostname。 你可以使用此变量强制将资源逐字引用到你提供的URL(包含hostname)。 当使用CDN托管你的应用程序时,这可能特别有用。
CI 当设置为true 时, Create React App 将警告视为构建中的失败。 它也使test runner 处于非观察者模式. 大多数CI 默认设置此标志。

Troubleshooting

npm start doesn't detect changes

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

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

  • 如果你的项目在Dropbox文件夹中,请尝试将其移出。
  • 如果观察者看不到名为index.js的文件,并且你通过文件夹名称引用它,则需要重新启动观察者,这是Webpack错误导致的。
  • 一些像Vim和IntelliJ这样的编辑器有一个“安全写入”功能,目前会打断观察者。你需要禁用它。按照“使用支持安全写入的编辑器”中的说明进行操作。
  • 如果你的项目路径包含括号,请尝试将项目移动到没有它们的路径。这是由Webpack观察者错误引起的。
  • 在Linux和macOS上,你可能需要调整系统设置以允许更多观察者。
  • 如果项目在虚拟机中运行,如虚拟机(Virtual Vagrant),则在项目目录中创建一个.env文件,如果它不存在,并向其添加CHOKIDAR_USEPOLLING=true。这样可以确保下次运行npm start时,观察者会根据需要在VM中使用轮询模式。

如果这些解决方案没有帮助,请在此主题中留下评论。

npm test hangs on macOS Sierra

如果你运行npm test,并且控制台在打印react-scripts test --env=jsdom之后卡住,则可能是你的Watchman安装问题,如facebookincubator/create-react-app#713https://github.com/facebookincubator/create-react-app/issues/713中所述。

我们建议你先删除项目中的node_modules并运行npm install(或者yarn如果你使用的话)。 如果没有帮助,你可以尝试以下问题中提到的许多解决方法之一:

据悉,安装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 silently fails

据报道,在没有swap space的机器上,npm run build 可能会失败,这在云环境中很常见。 如果症状匹配,请考虑为构建的机器添加一些swap space,或在本地构建项目。

npm run build fails on Heroku

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

Someting Missing?

如果你在这个页面上有更多的"How To" 的想法,请让我们知道贡献一些!

如何开发由Create-React-App 引导的应用(四)的更多相关文章

  1. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  2. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  3. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  4. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  5. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

  9. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  10. create react app遇到的问题

    我现在想的是吧 static 资源和动态 api 来分开处理, static 资源开启 nginx 服务器,api 请求由 express 完成, 现在的问题是开发的时候 proxy 设定将所有的请求 ...

随机推荐

  1. 析构函数(C#)

    析构函数又称终结器,用于析构类的实例. 定义 析构函数(destructor) 与构造函数相反,当对象结束其生命周期时(例如对象所在的函数已调用完毕),系统自动执行析构函数.析构函数往往用来做&quo ...

  2. [Spark性能调优] 第一章:性能调优的本质、Spark资源使用原理和调优要点分析

    本課主題 大数据性能调优的本质 Spark 性能调优要点分析 Spark 资源使用原理流程 Spark 资源调优最佳实战 Spark 更高性能的算子 引言 我们谈大数据性能调优,到底在谈什么,它的本质 ...

  3. BCB F12切换界面 显示异常

      亲们,我偶遇了一个小怪兽F12切换界面,效果如下:       还没有解决办法:

  4. C#中的异步学习

    C#中的异步 C#5.0版本发布有一个"主题那就是异步编程. 我们先创建一个windowForm窗体,实现下面效果,然后我们通过简单的案例对比同步和异步: 首先我们编写一个耗时方法: /// ...

  5. 在eclipse上安装Scala插件

    1.官网下载地址 http://scala-ide.org/download/current.html 目前最新的版本 http://download.scala-ide.org/sdk/lithiu ...

  6. ghost.py在代用JavaScript时的超时问题

    在写爬虫的时候,关于JavaScript的解析问题,我在网上找到的一个解决方案是使用ghost.py这个模块,他是一个基于webkit封装的一个客户端,可以用来解析动态页面.它的使用非常简单,它从2. ...

  7. redux入门指南

    前言:大概一个月没有写博客了,这两天正好是周末,就写点东西来梳理下之前几个月的所写与所得; 大概两个月前,学习了一下 redux ,还是一点难度的,花了我一天的时间来搞明白他, 但是都没怎么记录,今天 ...

  8. CSS列表及导航条

    大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条.   垂直导航条 注意要点: 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0. 以em设置 ...

  9. 基于 HTML5 的电力接线图 SCADA 应用

    在电力.油田燃气.供水管网等工业自动化领域 Web SCADA 的概念已经提出了多年,早些年的 Web SCADA 前端技术大部分还是基于 Flex.Silverlight 甚至 Applet 这样的 ...

  10. MATLAB数字图像处理学习笔记

    我们都知道一幅图片就相当于一个二维数组,可以用一个矩阵来表示,而MATLAB可以说就是为矩阵运算而生的,所以学习图像处理,学习MATLAB势在必行! 一. MATLAB基础知识 1. 读取图像 %im ...