如何为不同阶段的应用程序构建？

Question

我有一个单页应用程序，它是一个反应应用程序。我正在使用webpack。我在为test，beta和prod等每个阶段配置服务器API URL时遇到问题。

有没有一些标准的方法呢？

Answer 1

根据NODE_ENV。

执行此操作

在您的应用程序中声明一个url文件，以获取它的基本路径。

const baseURL = (__DEV__) ? url1 : url 2;

或switch语句，确实无关紧要。

能够访问这些变量，您必须使用webpack中的DefinePlugin。

new webpack.DefinePlugin({
  envType: JSON.stringify(process.env.NODE_ENV)
})

或类似的......

Answer 2

创建.env并在其中添加变量，确保它们以REACT_APP为前缀，例如REACT_APP_SERVER_URL=https://example.com

您可以为dev，prod，test等创建多个env文件，例如.env.local，.env.prod

从npm命令注入的env文件

npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env

在代码中使用变量，如

if (process.env.NODE_ENV !== 'production') {
    analytics.disable();
 }

OR

 <b>{process.env.NODE_ENV}</b>

参考https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env