如果您有.properties文件或.ini文件

Question

我是react.js的新手我实现了一个组件，我从服务器获取数据并使用它，如

CallEnterprise:function(TenantId){


    fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) 
    {
        EnterprisePerspectiveActions.getEnterprise(enterprises);
    }).catch(function()
    {
        alert("There was some issue in API Call please contact Admin");
        //ComponentAppDispatcher.handleViewAction({
        //    actionType: MetaItemConstants.RECEIVE_ERROR,
        //    error: 'There was a problem getting the enterprises'
        //});
    });
},

我想将Url存储在配置文件中，所以当我在测试服务器或生产中部署它时，我只需更改配置文件中的URL而不是js文件但我不知道如何使用配置文件react.js

任何人都可以指导我如何实现这一目标？

Answer 1

使用webpack，您可以将特定于env的配置放入externals

中的webpack.config.js字段

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

如果您想将配置存储在单独的JSON文件中，也可以这样做，您可以要求该文件并分配给Config：

externals: {
  'Config': JSON.stringify(production ? require('./config.prod.json') : require('./config.dev.json'))
}

然后在您的模块中，您可以使用配置：

var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')

不确定它是否涵盖了您的使用案例，但它对我们来说效果很好。

Answer 2

如果您使用Create React App，则可以使用.env文件设置环境变量。文档在这里：

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

基本上在项目根目录的.env文件中执行类似的操作。

REACT_APP_SECRET_CODE=abcdef

您可以使用

从组件中访问它

process.env.REACT_APP_SECRET_CODE

Answer 3

无论您使用何种设置，都可以使用dotenv软件包。它允许您在项目根目录中创建.env并指定您的密钥

SERVER_PORT=8000

在您的应用程序条目文件中，您只需调用dotenv（）;在访问这样的键之前

process.env.SERVER_PORT

Answer 4

如果您有.properties文件或.ini文件

实际上，如果您有任何文件具有这样的键值对：

someKey=someValue
someOtherKey=someOtherValue

您可以通过名为properties-reader的npm模块将其导入到webpack中。

我发现这非常有用，因为我正在与Java Spring框架集成反应，在Java Spring框架中已经有一个application.properties文件。这可以帮助我将所有配置放在一个地方。

从package.json的“依赖项”部分导入

"properties-reader": "0.0.16"

将此模块导入顶部的webpack.config.js

const PropertiesReader = require('properties-reader');

读取属性文件

const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;

将此常量作为配置导入

externals: { 'Config': JSON.stringify(appProperties) }

使用与接受的答案相同的方式

var Config = require('Config') fetchData(Config.serverUrl + '/Enterprises/...')

Answer 5

我发现这很难解决，并且解决方案非常简单。我是ReactJS的新手，只是通过在Django后端上构建ReactJS前端来学习。我想在部署时使用本地Django服务器（http://localhost:8000）和网站。

我认为我可能已经有了React的最新版本，这可能就是为什么我需要做的这么少，因为最后要做的就是在项目根目录中创建一个.env文件，其中{ {1}}和带有REACT_APP_serverURL = "https://example.com"的{{1}}文件

然后我可以从.env.development中获取正在使用的值

当我想在本地运行时，我运行REACT_APP_serverURL = "http://localhost:8000"；如果要运行在实际运行的后端，我可以使用process.env.REACT_APP_serverURL。

如何存储配置文件并使用React读取它

5 个答案:

如果您有.properties文件或.ini文件