如何开发由Create-React-App 引导的应用(四)
此文章是翻译How to develop apps bootstrapped with Create React App 官方文档
系列文章
- 如何开发由Create-React-App 引导的应用
- 如何开发由Create-React-App 引导的应用(一)
- 如何开发由Create-React-App 引导的应用(二)
- 如何开发由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.json (homepage )中指定的子路径。 通常,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 引导的应用(四)的更多相关文章
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- [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 ...
- [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 ...
- create react app遇到的问题
我现在想的是吧 static 资源和动态 api 来分开处理, static 资源开启 nginx 服务器,api 请求由 express 完成, 现在的问题是开发的时候 proxy 设定将所有的请求 ...
随机推荐
- php 常量const
常量使用关键词const修饰,一经定义,不能改变 常量的使用规则 定义后,应该马上赋初始值 不能用public.private.protected修饰 在本类,可用self::name 类名::na ...
- GPS校时器,GPS时钟装置,NTP网络时间服务器
GPS校时器,GPS时钟装置,NTP网络时间服务器 GPS校时器,GPS时钟装置,NTP网络时间服务器 GPS校时器,GPS时钟装置,NTP网络时间服务器 GPS校时器,GPS时钟装置,NTP网络时间 ...
- Mac下安装ant(利用brew)
安装ant最简单的方法就是通过brew.步骤如下:1. 安装brew(如果已经安装可以跳过这步). ruby -e "$(curl -fsSL https://raw.github.com/ ...
- 安装adb之后出现 找不到设备的情况
adb 地址 https://pan.baidu.com/s/1sln2IZF 安装adb之后出现 找不到设备的情况 1.配置adb的环境变量 2.修改android_winusb.inf ...
- Cortex-M3启动深度解析
Cortex-Mx启动,备忘,以免将来忘记.中断向量表不用说,从重置中断开始吧 LDR R0, =SystemInit BLX R0 LDR R0, =__main BX R0 这里一共就执行了两个函 ...
- 9、ABPZero系列教程之拼多多卖家工具 拼团提醒类库封装
本篇开始正式做功能,我在开发拼团提醒之前,拼多多并没有放出拼团人数不足就提醒卖家的功能. 有这个想法主要来源于朋友的抱怨,我想这应该是大部分卖家的心声吧. 经过分析,拿到了几个api,不要问我api怎 ...
- 使用 GStreamer appsrc 等插件实现视频音频混流,录制和推流
目前在做的在线直播教室,需要将老师分享的屏幕和老师的声音.学生的声音录制为一个视频文件,以便学生上课后还可以再看回放. 直播服务我们采用的是腾讯的视频服务,有现成的 SDK 可以用.但 SDK 自带的 ...
- (亲测)1分钟破解IDM权限,傻瓜都能学会的破解方法(番外篇:利用破解工具直接破解IDM)
Internet Download Manager (IDM)是比较好用的一款下载工具~ 上一节我讲到一种利用修改防火墙来进行阻止访问服务器,请参看这篇文章(亲测)躺着破解IDM下载权限,治疗不用破解 ...
- 2017 Multi-University Training Contest - Team 9 1002&&HDU 6162 Ch’s gift【树链部分+线段树】
Ch’s gift Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- Bellman-Ford 求含负权最短路
该算法详解请看 https://www.cnblogs.com/tanky_woo/archive/2011/01/17/1937728.html 单源最短路 当图中存在负权边时 迪杰斯特拉就 ...