如何在React构建中排除JSON文件并保留为独立可修改文件？

我来帮你梳理下实现方案，核心思路就是不让JSON被打包进React的bundle，而是作为静态文件独立存在，然后通过动态请求读取它，这样修改JSON后就能直接同步到UI（开发环境可以自动刷新，生产环境刷新页面即可）。

第一步：调整JSON文件的存放位置 #

首先要把data.json从src/data移出来，避免被webpack打包。这里有两种推荐方案：

方案一（最简单，无需额外配置）

把data.json放到项目的public/data/目录下，最终结构如下：

你的React项目/
├── public/
│   ├── data/
│   │   └── data.json
│   └── index.html  // React默认的入口HTML
├── src/
│   ├── components/
│   └── ...
└── package.json

React在执行npm run build时，会自动把public文件夹里的所有内容复制到build目录，所以最终build后你会得到build/data/data.json，完全符合你要的独立路径要求。

方案二（自定义根目录data文件夹）

如果你坚持要把JSON放在项目根目录的data/文件夹，那需要配置build脚本，让它把data文件夹复制到build目录：

1. 先安装辅助工具copyfiles：

   npm install copyfiles --save-dev
   

2. 修改package.json里的build脚本：

   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build && copyfiles -u 1 data/**/* build/data/",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   }
   

   这样每次build后，data文件夹会被完整复制到build/data路径下。

第二步：在组件中动态读取JSON文件 #

绝对不能用import导入JSON，因为import会让webpack把JSON内容打包进JS bundle，修改JSON后不会生效。我们要用fetch（或axios）发起HTTP请求来读取静态JSON文件：

import { useState, useEffect } from 'react';

function DynamicDataComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 封装读取JSON的函数
  const fetchData = async () => {
    try {
      // 请求路径对应最终的data/data.json
      const response = await fetch('/data/data.json', {
        // 禁用缓存，确保每次拿到最新内容
        cache: 'no-store'
      });
      
      if (!response.ok) {
        throw new Error('无法加载数据文件');
      }
      
      const jsonData = await response.json();
      setData(jsonData);
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    // 初始加载数据
    fetchData();

    // 开发环境：添加轮询，实时检测JSON变化
    if (process.env.NODE_ENV === 'development') {
      // 每1秒重新读取一次，可根据需求调整间隔
      const interval = setInterval(fetchData, 1000);
      // 组件卸载时清除定时器
      return () => clearInterval(interval);
    }
  }, []);

  // 加载/错误状态处理
  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  // 用data渲染你的UI
  return (
    <div className="data-container">
      <h2>从独立JSON加载的数据</h2>
      {data && Object.entries(data).map(([key, value]) => (
        <div key={key} className="data-item">
          <span>{key}:</span>
          <span>{typeof value === 'object' ? JSON.stringify(value) : value}</span>
        </div>
      ))}
    </div>
  );
}

export default DynamicDataComponent;

第三步：验证效果 #

• 开发环境：启动npm start后，修改public/data/data.json（或根目录data/data.json），组件会自动重新读取数据并更新UI，无需刷新页面。
• 生产环境：执行npm run build后，把build目录部署到服务器，修改build/data/data.json，刷新页面就能看到更新（因为我们加了cache: 'no-store'，不会缓存旧数据）。

内容的提问来源于stack exchange，提问作者Pavitar