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

Question

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

有没有办法让我的 jsx 文件从已从配置文件加载数据的全局 JS object 获取数据，而不是让我的配置数据分布在 5 个文件中？

我看过一些例子，但我无法让它们工作。
JS6 导入 function | 使用 webpack 的示例

Answer 1

假设ES6：

config.js

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

然后：

jsxFileOne.js, jsxFileTwo.js, ...

import { myConfig } from 'config.js';

还有其他方法可以在全球范围内利用webpack导入和导出东西，但这应该可以帮助您入门。

Answer 2

如果您的项目是使用Webpack构建的，请考虑使用node-env-file 。
示例配置文件片段：

development.env
API_SERVER_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_SERVER_URL变量。

看来dotenv包更受欢迎，你也可以尝试一下。

Answer 3

非常老的问题，没有人花时间解决，直到现在。 我把它留给未来的读者，因为这是 React 中配置的热门搜索结果。

我创建了wj-config来解决这个问题。 请务必密切注意 React 注释，因为您需要通过弹出或使用@craco/craco NPM ZEFE90A8E604A7C840E88D03A67F6B7D8 在 webpack 中启用顶级等待。

您还可以阅读这篇解释其用途的博文。