使用React或JavaScript按需加载本地json文件

Question

如果我有一个如下所示的json文件，我正在使用React (或者甚至JavaScript也可以)，有没有人可以根据我设置的环境来帮助我读取这个文件，比如如果我将它设置为本地，我所需要的就是加载本地的设置，如果我将它设置为Prod，所有prod的设置都必须使用React脚本或JavaScript加载，任何想法极客？-提前谢谢。

[
    {
        "Environment": "local",
        "local": {
            "url-1": "https://www.google.com",
            "url-2": "https://www.msn.com"
        },
        "Development": {
           "url-1": "https://www.google.co.in",
           "url-2": "https://www.msn.co.in"
        },
        "Test": {
           "url-1": "https://www.somedifferenturl.co.in",
           "url-2": "https://www.somedifferenturl.co.in"
        },
        "Prod": {
           "url-1": "https://www.somedifferenturl2.co.in",
           "url-2": "https://www.somedifferenturl2.co.in"
        }
    }
]

Answer 1

您可以导入json文件并将其设置为on状态。

import envConfig from './envConfig.json'

state = { envConfig }

并且有一个助手函数来读取Environment值，然后更新状态以使其具有这些值。

这将是envConfig.json：

[{
    "Environment": "local",
    "local": {
        "url-1": "https://www.google.com",
        "url-2": "https://www.msn.com"
    },
    "Development": {
       "url-1": "https://www.google.co.in",
       "url-2": "https://www.msn.co.in"
    },
    "Test": {
       "url-1": "https://www.somedifferenturl.co.in",
       "url-2": "https://www.somedifferenturl.co.in"
    },
    "Prod": {
       "url-1": "https://www.somedifferenturl2.co.in",
       "url-2": "https://www.somedifferenturl2.co.in"
    }
}]

Answer 2

我会使用case方法，结合const localCall = require("http://localhost/pathtoyourscript.js or URL here")进行本地调用、const dev = require("URL")等。

示例：

switch(envSet) {
  case 'local':  // if (envSet === 'local')
    const localCall = require("http://localhost/pathtoyourscript.js or URL here");
    [break]

  case 'dev':  // if (envSet === 'dev')
    ...
    [break]
//add as many cases as needed
  default:
    ...
    [break]
}

等。

Answer 3

如果您使用的是webpack，可以使用DefinePlugin。

https://webpack.js.org/plugins/define-plugin/#usage

在您的webpack配置中，您可以在插件部分添加DefinePlugin。

plugins: [
    // Some other plugins already defined.
    new webpack.DefinePlugin({"process.env.MY_ENV": JSON.stringify(process.env.MY_ENV)})
         ]

当您通过webpack运行代码时，这将使用实际的环境变量MY_ENV重写JS文件中出现的所有process.env.MY_ENV。

并给出如下所示的config.json

{
    "local": {
        "url-1": "https://www.google.com",
        "url-2": "https://www.msn.com"
    },
    "Development": {
        "url-1": "https://www.google.co.in",
        "url-2": "https://www.msn.co.in"
    },
    "Test": {
        "url-1": "https://www.somedifferenturl.co.in",
        "url-2": "https://www.somedifferenturl.co.in"
    },
    "Prod": {
        "url-1": "https://www.somedifferenturl2.co.in",
        "url-2": "https://www.somedifferenturl2.co.in"
    }
}

它可以在React组件中使用，如下所示。

import React from "react";
import config from "./config.json";

function App() {
  const environment = process.env.MY_ENV;
  const envConfig = config[environment];
  // Do anything with the envConfig
  console.log(envConfig);

  return <h1>Hello</h1>;
}

export default App;

使用命令MY_ENV=VirtualEnv yarn start启动您的服务器，webpack将代码转换为

function App() {
  const environment = "VirtualEnv";
  const envConfig = _config_json__WEBPACK_IMPORTED_MODULE_1__[environment]; // Do anything with the envConfig

  console.log(envConfig);
  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 10
    },
    __self: this
  }, "Hello");
}