将 JSON 文件包含到 React 构建中

Question

我知道这个问题可能存在于堆栈溢出中，但我没有得到任何好的答案，我希望在 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 目录之外导入任何东西

我找到了其他类似的解决方案，但没有奏效 https://github.com/facebook/create-react-app/issues/5378

我还尝试在 index.html 中创建一个像 (window.JSON_DATA={}) 这样的全局变量，并将一个 JS 对象附加到它并将其导入 App.js，但仍然没有工作。

如何制作设置 JSON 文件，并能够在发布应用后对其进行编辑？

Answer 1

将您的 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});
            })
        })            
    }
}

然后你可以在渲染中使用它（或者你的组件的任何其他地方）：

function App() {

    ...

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

Answer 2

最简单的方法是在服务器端呈现 html 页面期间将文件放在服务器上的require()，然后将 json 内联到全局变量中的 html 有效负载中，就像您提到的 window.JSON_DATA={} 一样。然后在您的 js 代码中，您可以只引用该全局变量，而不是尝试使用 import。

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

Answer 3

你可能想看看使用 npm react-scripts (https://www.npmjs.com/package/react-scripts) 来生成你的 react 应用程序和构建。这将打包将创建一个模板，您可以将现有代码放入其中，然后为您提供一个预配置构建选项，您可以根据需要进行修改。预配置的构建选项也会打包您的 .json 文件。查看他们的入门部分 (https://create-react-app.dev/docs/getting-started/)

如果您不想走那条路，而只是在寻找快速修复，那么我建议将您的 json 文件更改为 JS 文件，导出 JS 对象并将其导入到您需要的文件中，因为您似乎可以做到。

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

//src/example.jsx (this can also be .js)
const sampledata = require('./sampledata');
console.log(sampledata.sample); // 'data'

Answer 4

您可以使用“从 JSON 文件中获取数据” 根据链接 https://www.pluralsight.com/guides/fetch-data-from-a-json-file-in-a-react-app 例子