我正在为我和我的团队创建的 chrome 开发工具制作登录页面。我们的登陆页面包含一个沙箱，旨在让访问者测试我们的开发工具。部署后，我们意识到开发工具无法与沙箱一起使用，因为沙箱是在生产模式下部署的（缩小/丑化了组件名称，无法访问纤维树渲染属性）。 我看到其他帖子谈到了在开发模式下部署所带来的性能问题，我并不关心，这向我表明这是可能的。 我们的应用程序使用 Webpack 构建捆绑包，并使用 Netlify 进行部署。网站本身是用 React/Recoil 构建的。
为了以防万一，这里有一个链接到我们的仓库：
【问题讨论】：
标签： reactjs iphone webpack deployment
为任意构建环境自定义环境变量 您可以通过创建自定义 .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 将始终设置为用于构建的生产环境。
【讨论】：