Question

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

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

我见过一些例子，但是我无法让他们工作 JS6 import function | Example using webpack

Answer 1

假设ES6：

config.js

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

然后：

jsxFileOne.js, jsxFileTwo.js, ...

import { myConfig } from 'config.js';

还有其他方法可以导入＆amp;在全球范围内利用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包更受欢迎，你也可以尝试一下。

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

2 个答案: