Javascript 将JSON文件包含到React构建中

我知道这个问题可能存在于堆栈溢出中，但我没有得到任何好的答案，我希望在2020年有更好的解决方案

在我的react应用程序中，我有一个配置JSON文件，它包含标题、网站语言等信息。。 该文件位于“src”目录中

 {
  "headers":{
    "title":"chat ",
    "keys":"chat,asd  ,
    "description":" website"
  },
  "languages":{
    "ru":"russian",
    "ar":"arabic",
    "en":"English"
  },
  "defaultLanguage":"ru",
  "colors":{
    "mainColor":"red",
    "primary":"green",
    "chatBackGround":"white"
  }
}

我想让我的网站在发布后易于编辑，但在构建我的应用程序后，在构建目录中找不到settings.json文件

我发现公共目录中的文件实际上包含在构建文件夹中，我尝试将我的settings.JSON公开， 但是react不允许我导入src目录之外的任何内容

我找到了其他类似的解决方案，但没有成功

此外，我还尝试在index.html中创建一个全局变量（window.JSON_DATA={}），并将一个JS对象附加到它并将其导入App.JS，但仍然没有成功

---

如何创建一个设置JSON文件，并在发布应用程序后对其进行编辑？

最简单的方法是在服务器端呈现html页面期间，在服务器上创建文件

require（）

，然后将JSON内联到html负载的全局变量中，如您所述

window.JSON_DATA={}

。然后，在js代码中，您可以引用该全局变量，而不是尝试使用

import

---

当然，这种方法需要您在每次更改json文件时重新启动服务器，以便获取它。如果这不是一个选项，那么您将需要在服务器上进行api调用，而不是使用

require（）

您可能需要考虑使用npm react脚本（）来生成react应用程序和构建。该软件包将创建一个模板，您可以将现有代码放入其中，然后为您提供一个预配置构建选项，您可以根据需要修改该选项。预配置的构建选项也将打包.json文件。查看他们的入门部分（）

如果你不想走这条路，只是在寻找快速修复方法，那么我建议你把json文件改成JS文件，导出JS对象并导入到你需要的文件中，因为你似乎可以做到这一点

//src/sampledata.js
module.exports = {
  sample: 'data'
}

---

将您的

settings.json

添加到

public

文件夹。React将文件复制到生成的根目录。然后在需要使用的地方加载

fetch

。例如，如果需要将

setting.json

加载到

App.js

中，则执行下一步操作：

function App() {

    const [state, setState] = useState({settings: null});

    useEffect(()=>{
        fetch('settings.json').then(response => {
            response.json().then(settings => {
                // instead of setting state you can use it any other way
                setState({settings: settings});
            })
        })
    })
}

如果使用类组件，请在

componentDidMount

中执行相同操作：

class CustomComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {settings: null};
    }

    componentDidMount() {
        fetch('settings.json').then(response => {
            response.json().then(settings => {
                this.setState({settings: settings});
            })
        })            
    }
}

然后可以在渲染（或组件的任何其他位置）中使用它：

---

您可能可以在运行时使用fs加载文件，而不是将其包含在内。就像提示一样，将值存储到窗口中是一个巨大的XSS漏洞。只有当内容来自用户输入，并且您没有正确清理它时，才可以。在本例中，他是唯一一个设置json的人，因此没有风险。您还没有看到代码库的其余部分，所以是的，存在风险。但总的来说，这是一种不好的做法。如果内容来自可靠的来源或经过适当的消毒，这绝对没有问题。很多流行的框架都建议使用这种方法谢谢，我会尝试第一种方法，但是使用JS而不是JSON有什么好处呢？因为我在build文件夹中找不到JSON，这是我的主要问题，我在build中找不到我的settings.JSON或JS文件。这没有好处，我认为您仍然可以在build文件夹中看到JS文件（即使您没有看到JSON文件）。利用react脚本可能是最好的途径。尽管有npm包的登录页，但实际上有很多关于该包的文档。谢谢，我还有一个问题，把这个获取代码放在组件之外是否不好？我现在正在这样做（async（）=>{try{settings=await axios.get（“config.json”）；settings=settings.data；socket=openSocket（settings.url）；}catch（e）{settings=fallBackSettings；alert（e）}}（））const-App=（）=>....@Mohamad Alasly将获取代码放在组件内部，确保组件准备就绪后加载json。但是如果你不小心的话，你可以把代码放在任何你需要的地方。这取决于你的要求。

class CustomComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {settings: null};
    }

    componentDidMount() {
        fetch('settings.json').then(response => {
            response.json().then(settings => {
                this.setState({settings: settings});
            })
        })            
    }
}

function App() {

    ...

    return (
        {this.state.settings && this.state.settings.value}
    ) 
}