Javascript 如何在React中使用配置文件？

假设我有5个jsx文件，每个文件使用一些配置参数。 我的index.js文件导入所有这5个jsx文件

我的配置数据不是分散在5个文件中，我的jsx文件有没有办法从全局JS对象获取数据，而全局JS对象已经从配置文件中加载了数据

我见过一些例子，但我没能让它们发挥作用。
|假设ES6：

config.js

export const myConfig = { importantData: '', apiUrl: '', ... };

然后：

---

<> P>有其他方式来导入和导出全局性的工具来利用WebPACK，但这应该让您开始。

< P>如果您的项目是使用WebPACK构建的，请考虑使用.BR> 配置文件片段示例：

development.env

API\u服务器\u URL=https://www.your-server.com

webpack.config.js

const envFile = require('node-env-file');
...
const appSettingsFile = isDevBuild ? '/settings/development.env' : '/settings/production.env';

try {
    envFile(path.join(__dirname + appSettingsFile));
} catch (error) { 
    console.log("Failed to read env file!: " + __dirname + appSettingsFile);
}
...
plugins: [
    new webpack.DefinePlugin({
        "process.env": {
            API_SERVER_URL: JSON.stringify(process.env.API_SERVER_URL)
        }
    })
    ...
]

在js/jsx代码中，您现在可以访问

process.env.API\u SERVER\u URL

变量，该变量将包含所需的值

---

这个包似乎更受欢迎，你也可以尝试一下。

我以前不得不使用它，但随着api端点的增长，你的网页包文件变得一团糟，到目前为止，我找到的最好的解决方案是一个

ServiceConfig.js

文件，它使用单例模式来实现你的webApp的所有抓取操作…对于静态设置，可以，但当加载配置很昂贵，并且您不希望每次引用该文件时它都执行该逻辑时。正在寻找一种在启动时加载并重新启动的方法-use@SonicSoul导入是缓存的，所以只要使用import语句，就不会多次计算config对象本身。@Thava哦，真有趣！我会测试这个！

const envFile = require('node-env-file');
...
const appSettingsFile = isDevBuild ? '/settings/development.env' : '/settings/production.env';

try {
    envFile(path.join(__dirname + appSettingsFile));
} catch (error) { 
    console.log("Failed to read env file!: " + __dirname + appSettingsFile);
}
...
plugins: [
    new webpack.DefinePlugin({
        "process.env": {
            API_SERVER_URL: JSON.stringify(process.env.API_SERVER_URL)
        }
    })
    ...
]