如何在开发模式而不是生产模式下部署 create-react-app 网站

Posted 2023-02-21

【中文标题】如何在开发模式而不是生产模式下部署 create-react-app 网站

【英文标题】：How can I deploy a create-react-app website in development mode instead of production

【发布时间】：2021-02-04 23:58:08

【问题描述】：

我正在为我和我的团队创建的 chrome 开发工具制作登录页面。我们的登陆页面包含一个沙箱，旨在让访问者测试我们的开发工具。部署后，我们意识到开发工具无法与沙箱一起使用，因为沙箱是在生产模式下部署的（缩小/丑化了组件名称，无法访问纤维树渲染属性）。 我看到其他帖子谈到了在开发模式下部署所带来的性能问题，我并不关心，这向我表明这是可能的。 我们的应用程序使用 Webpack 构建捆绑包，并使用 Netlify 进行部署。网站本身是用 React/Recoil 构建的。

为了以防万一，这里有一个链接到我们的仓库：

https://github.com/open-source-labs/Recoilize

【参考方案1】：

为任意构建环境自定义环境变量 您可以通过创建自定义 .env 文件并使用 env-cmd 加载它来创建任意构建环境。

例如，为暂存环境创建构建环境：

创建一个名为 .env.staging 的文件

像设置任何其他 .env 文件一样设置环境变量（例如 REACT_APP_API_URL=http://api-staging.example.com）

安装 env-cmd

npm install env-cmd --save

或

纱线添加 env-cmd

在你的 package.json 中添加一个新脚本，使用你的新环境构建：

  "scripts": 
    "build:staging": "env-cmd -f .env.staging npm run build"
  

现在您可以运行 npm run build:staging 以使用暂存环境配置进行构建。您可以以相同的方式指定其他环境。

.env.production 中的变量将用作后备，因为 NODE_ENV 将始终设置为用于构建的生产环境。