根据环境导入不同的文件

Question

我正在使用 Create-React-App。我有 2 个静态 JSON 文件，其中的数据根据它们运行所在的环境而不同。

根据应用程序运行所在的环境导入文件的最佳方法是什么？

我有这个，但它看起来不对，还有其他建议吗？

    if (process.env.NODE_ENV !== 'production') {
        import data from './data/devData';
    }
    if (process.env.NODE_ENV === 'production') {
        import data from './data/prodData';
    }

Answer 1

您可以使用 "default" 和 "production" 等键创建一个文件配置。使用文件导入后，检查 process.env 和 return 实际配置对象。

const config = require('./data/config.json');

function getConfig() {
   let customConfig = config['default'];

    if (process.env.NODE_ENV === 'production') {
        customConfig = config['production'];
    }  

    return customConfig;  
}

Answer 2

另一个想法 - 添加到您的 wabpack alias

 resolve: {
     alias: {
       'config/data': path.resolve(__dirname, `./data/${process.env.NODE_ENV}`)
     }
 }

并以这种方式从组件中调用它：

import { data } from 'config/data';

根据环境导入不同的文件

Import different file depending on environment

import

reactjs

create-react-app