如何开发由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 设定将所有的请求 ...
随机推荐
- robotframework的学习笔记(十三)------Robot Framework常用库简介
标准库 Robot Framework可以直接导入使用的库,包括: Builtin:包含经常需要的关键字.自动导入无需import,因此总是可用的 Dialogs:提供了暂停测试执行和从用户的输入方式 ...
- Robot Framework学习笔记(八)------ride标签使用
一.edit标签使用 1.导入库 点击 Edit 标签页右侧的"Library"按钮,来添加库.在添加库之前,首先库已经在 Python 下进行了安装.如,添加"Sele ...
- vexx 邀请码 送3个比特龙
错过了比特币的行情,注册获取3个原始比特币分叉币,比特龙. 目前10元一个,送3个币.类似于股票IPO,第一天一般会冲高十几倍,建议第一天就卖. 如果看好就继续持有吧. 放心是送的不用钱的. 注册网址 ...
- cobbler自动安装系统(Centos7.X)
环境: [root@kickstart ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@kickstart ~]# unam ...
- p2p 打洞技术
根据通信双方所处网络环境不同,点对点通信可以划分成以下三类:i> 公网:公网ii>公网:内网iii>内网:内网前两种容易实现,我们这里主要讨论第三种.这其中会涉及到NAT和NAPT的 ...
- python函数,模块及eclipse使用
一.eclipse的使用 1.作用 (1)最好用的IDE (2)可调式debug (3)查看可执行过程 (4)可查看源代码 2.安装eclipse及配置 目录安装Pythonpython for ec ...
- [译]what is bootstrap
Question:Bootstrap的定义?有什么用?如何助力前端开发? Answers: 它是一个在用HTML,CSS和javascript创建网站和网页应用的时候可以用到的基础内容. More ...
- IDEA新建spring boot项目没有Spring Initializr选项
在settings -> Plugins 里面搜索spring boot,勾选上,然后再重启下idea,就可以了.如果Plugins里面没有spring boot的话,先安装下,再勾选. 参考( ...
- VFS四大对象之二 struct inode
继上一篇文章:http://www.cnblogs.com/linhaostudy/p/7427027.html 二.inode结构体:(转自http://blog.csdn.net/shanshan ...
- org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression
前言 本文中提到的解决方案,源码地址在:springboot-thymeleaf,希望可以帮你解决问题. 本文中涉及的两个异常为我开发时遇到的,可能和你目前所要处理的bug不同,如果不是同一个问题,希 ...