假设我有 5 个 jsx 文件，每个文件都使用一些配置参数。我的 index.js 文件导入了所有这 5 个 jsx 文件。
不是让我的配置数据分布在 5 个文件中，有没有办法让我的 jsx 文件从全局 JS 对象中获取数据，该对象已从配置文件加载数据？
我看过一些例子，但我无法让它们工作。
JS6 导入函数| 使用 webpack 的示例
如何在 React 中使用配置文件？
IT技术
javascript
reactjs
webpack
2021-05-26 15:22:51
2个回答
假设 ES6：
config.js
export const myConfig = { importantData: '', apiUrl: '', ... };
然后：
jsxFileOne.js, jsxFileTwo.js, ...
import { myConfig } from 'config.js';
还有其他方法可以利用 webpack 全局导入和导出内容，但这应该可以帮助您入门。
如果您的项目是使用 Webpack 构建的，请考虑使用node-env-file。
示例配置文件片段：
开发环境
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包更受欢迎，你也可以试试这个。