React中如何使用require()？JSON文件读写及模块引入疑问

首先得明确：React是运行在浏览器环境里的，而fs是Node.js专属的文件系统模块，浏览器根本没有这个API；至于require，它是Node.js的模块加载语法，浏览器原生也不支持——你项目里的node_modules是开发阶段的依赖，最终会被打包工具（比如Webpack、Vite）转换成浏览器能识别的代码，不是说有node_modules就能直接用Node的API。

下面分场景说怎么处理JSON：

读取JSON文件 #

1. 静态导入本地JSON（开发/构建阶段） #

如果是项目里的静态JSON文件，直接用ES模块的import语法就行，打包工具会自动处理：

import userData from './user.json';
console.log(userData); // 直接拿到JSON解析后的对象

部分打包工具也支持用require（但这是打包工具模拟的，不是Node原生的require）：

const userData = require('./user.json');

2. 动态加载（运行时请求） #

如果需要在运行时动态获取JSON（比如从public目录里读取），用浏览器原生的fetch API：

async function loadJson() {
  const response = await fetch('/data.json'); // 路径对应public目录下的文件
  const data = await response.json();
  console.log(data);
}
loadJson();

写入JSON文件 #

浏览器出于安全限制，不能直接写入本地文件系统，有两种替代方案：

1. 通过后端接口处理 #

写一个Node.js后端接口，前端把数据发过去，后端用fs模块写入文件：

// 前端React代码
async function saveData(data) {
  await fetch('/api/save-json', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
}

后端用Express的示例代码：

// 后端Node.js代码
const fs = require('fs');
const express = require('express');
const app = express();
app.use(express.json());

app.post('/api/save-json', (req, res) => {
  fs.writeFile('./saved-data.json', JSON.stringify(req.body), (err) => {
    if (err) throw err;
    res.send('数据保存成功');
  });
});

2. 让用户下载JSON文件 #

如果不需要存在服务器，只是让用户把数据导出到本地，可以生成下载链接：

function downloadJson(data, filename) {
  const jsonStr = JSON.stringify(data, null, 2);
  const blob = new Blob([jsonStr], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

// 使用示例
const userData = { name: '张三', age: 25 };
downloadJson(userData, 'user-info.json');

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