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

【问题标题】：How can I use a config file in React?如何在 React 中使用配置文件？
【发布时间】：2016-09-01 04:41:14
【问题描述】：

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

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

我见过一些例子，但我无法让它们发挥作用。
JS6 import function | Example using webpack

【问题讨论】：

【解决方案1】：

假设 ES6：

config.js

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

然后：

jsxFileOne.js, jsxFileTwo.js, ...

import { myConfig } from 'config.js';

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

【讨论】：

静态设置可以，但是当加载配置很昂贵并且您不希望它在每次引用该文件时执行该逻辑。寻找一种在启动时加载它并重新使用的方法
@SonicSoul 导入被缓存，所以只要你使用 import 语句，配置对象本身就不会被计算多次。
@Thava 哦，有趣！我会测试这个！

【解决方案2】：

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

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这个包比较流行，你也可以试试这个。

【讨论】：

我以前必须使用它，但是随着您的 api 端点的增长，您的 webpack 文件变得一团糟，到目前为止我发现的最佳解决方案是使用单例模式实现的 ServiceConfig.js 文件您的 webApp 的所有 fetch 操作...