Question

My React代码构建一个读取JSON文件的UI。但是，此文件将成为react build的一部分。如何防止这种情况缩小，并将其保存为文件夹'data/data.json'中的单独文件。现在我在src内有一个数据文件夹。

我希望能够更改JSON文件，而后者又会更改UI。

Answer 1

获取获取文件数据的请求，而不是导入或要求它。例如：

fetch(URL, {method:'GET'})
    .then(response => response.json())
    .then(json=>{
        //use the json data
    })

如果您使用的是redux，我建议您在操作中使用获取请求并存储数据。如果没有，请在componentDidMount中运行获取请求，并将数据存储在组件状态中，这样就可以将数据传递给子组件。

Answer 2

如果还没有，您需要使用Webpack配置构建设置。您可以使用此tutorial来了解如何安装它。

安装Copy Webpack插件：npm i --save copy-webpack-plugin

转到项目的webpack.config.prod.js和webpack.config.dev.js（如果您在开发模式下运行build），请使用此配置作为src/assets/example.json

的示例

    import CopyWebpackPlugin from 'copy-webpack-plugin';

    export default {
      plugins: [
         new CopyWebpackPlugin([
           { from: 'src/assets/example.json', to: 'assets/example.json' }]
         )
      ]
    }

此配置从src文件夹中提取JSON文件，并防止其被最小化。

从反应构建中排除.json文件

2 个答案: