Skip to main content

高级配置

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

¥You can adjust various development and production settings by setting environment variables in your shell or with .env.

注意：你不需要像使用自定义环境变量那样在以下变量之前声明 REACT_APP_。

¥Note: You do not need to declare REACT_APP_ before the below variables as you would with custom environment variables.

多变的开发生产用法
BROWSER✅ 用过的🚫 忽略默认情况下，Create React App 将打开默认系统浏览器，支持 macOS 上的 Chrome。指定 browser 以覆盖此行为，或将其设置为 none 以完全禁用它。如果你需要自定义浏览器的启动方式，你可以指定一个节点脚本。传递给 npm start 的任何参数也将传递给此脚本，并且提供你的应用的 url 将是最后一个参数。你的脚本文件名必须具有 .js 扩展名。
BROWSER_ARGS✅ 用过的🚫 忽略当指定 BROWSER 环境变量时，你为此环境变量设置的任何参数都将传递给浏览器实例。支持多个参数作为空格分隔的列表。默认情况下，没有参数传递给浏览器。
HOST✅ 用过的🚫 忽略默认情况下，开发 Web 服务器绑定到设备上的所有主机名（localhost、LAN 网络地址等）。你可以使用此变量来指定不同的主机。
PORT✅ 用过的🚫 忽略默认情况下，开发 Web 服务器将尝试监听端口 3000 或提示你尝试下一个可用端口。你可以使用此变量指定不同的端口。
HTTPS✅ 用过的🚫 忽略当设置为 true 时，Create React App 将以 https 模式运行开发服务器。
WDS_SOCKET_HOST✅ 用过的🚫 忽略设置后，Create React App 将使用自定义 websocket 主机名运行开发服务器以进行热模块重新加载。通常，webpack-dev-server 默认为 window.location.hostname 作为 SockJS 主机名。你可以使用此变量一次在多个 Create React App 项目上启动本地开发。有关详细信息，请参阅 webpack-dev-server 文档。
WDS_SOCKET_PATH✅ 用过的🚫 忽略设置后，Create React App 将使用自定义 websocket 路径运行开发服务器以进行热模块重新加载。通常，webpack-dev-server 默认为 /ws 作为 SockJS 路径名。你可以使用此变量一次在多个 Create React App 项目上启动本地开发。有关详细信息，请参阅 webpack-dev-server 文档。
WDS_SOCKET_PORT✅ 用过的🚫 忽略设置后，Create React App 将使用自定义 websocket 端口运行开发服务器以进行热模块重新加载。通常，对于 SockJS 端口，webpack-dev-server 默认为 window.location.port。你可以使用此变量一次在多个 Create React App 项目上启动本地开发。有关详细信息，请参阅 webpack-dev-server 文档。
PUBLIC_URL✅ 用过的✅ 用过的Create React App 假定你的应用托管在服务 Web 服务器的根目录或 package.json (homepage) 中指定的子路径中。通常，Create React App 会忽略主机名。你可以使用此变量强制将资源逐字引用到你提供的 url（包括主机名）。这在使用 CDN 托管你的应用时可能特别有用。
BUILD_PATH🚫 忽略✅ 用过的默认情况下，Create React App 会将编译后的资源输出到与你的 /src 相邻的 /build 目录。你可以使用此变量为 Create React App 指定输出资源的新路径。BUILD_PATH 应指定为相对于项目根目录的路径。
CI✅ 用过的✅ 用过的当设置为 true 时，Create React App 将警告视为构建失败。它还使测试运行器不监视。大多数 CI 默认设置此标志。
REACT_EDITOR✅ 用过的🚫 忽略当应用在开发过程中崩溃时，你会看到带有可点击堆栈跟踪的错误叠加层。当你点击它时，Create React App 会尝试根据当前运行的进程来判断你使用的编辑器，并打开相关的源文件。你可以 发送拉取请求以检测你选择的编辑器。设置此环境变量会覆盖自动检测。如果你这样做，请确保你的系统 PATH 环境变量指向编辑器的 bin 文件夹。你也可以将其设置为 none 以完全禁用它。
CHOKIDAR_USEPOLLING✅ 用过的🚫 忽略当设置为 true 时，监视程序在 VM 内根据需要以轮询模式运行。如果 npm start 未检测到更改，请使用此选项。
GENERATE_SOURCEMAP🚫 忽略✅ 用过的设置为 false 时，不会为生产构建生成源映射。这解决了一些较小机器上的内存不足 (OOM) 问题。
INLINE_RUNTIME_CHUNK🚫 忽略✅ 用过的默认情况下，Create React App 会在生产构建期间将运行时脚本嵌入到 index.html 中。当设置为 false 时，脚本将不会被嵌入，将照常导入。这在处理 CSP 时通常是必需的。
IMAGE_INLINE_SIZE_LIMIT✅ 用过的✅ 用过的默认情况下，小于 10,000 字节的图片被编码为 base64 中的数据 URI，并内联到 CSS 或 JS 构建工件中。设置此项以控制以字节为单位的大小限制。将其设置为 0 将禁用图片内联。
FAST_REFRESH✅ 用过的🚫 忽略当设置为 false 时，禁用对快速刷新的实验性支持，以允许你实时调整组件而无需重新加载页面。
TSC_COMPILE_ON_ERROR✅ 用过的✅ 用过的当设置为 true 时，即使出现 TypeScript 类型检查错误，你也可以运行并正确构建 TypeScript 项目。这些错误在终端和/或浏览器控制台中打印为警告。
ESLINT_NO_DEV_ERRORS✅ 用过的🚫 忽略当设置为 true 时，ESLint 错误会在开发过程中转换为警告。因此，ESLint 输出将不再出现在错误叠加层中。
DISABLE_ESLINT_PLUGIN✅ 用过的✅ 用过的当设置为 true 时，eslint-webpack-plugin 将被完全禁用。
DISABLE_NEW_JSX_TRANSFORM✅ 用过的✅ 用过的当设置为 true 时，禁用 React 17 中引入的 新的 JSX 转换 并反向移植到 React 16.14.0、15.7.0 和 0.14.10。新项目将使用默认支持此功能的 React 版本，但如果你无法升级 React，则可能需要在现有项目中禁用它。