React+TypeScript项目fs模块解析失败及readFile调用异常求助

问题本质 #

fs是Node.js专属的文件系统模块，仅能在Node.js环境（服务器端或本地Node脚本）中运行。而React应用运行在浏览器中，浏览器没有提供fs相关的API，所以无论怎么安装依赖、修改tsconfig，前端代码都无法直接调用fs.readFile/fs.writeFile，这是核心矛盾。

为什么你的尝试无效 #

• 安装fs依赖：npm上的fs包是占位符版本（0.0.1-security），没有实际的文件系统实现，浏览器环境无法使用。
• 修改tsconfig的types: ["node"]：只是让TypeScript编译时不报错，但浏览器运行时依然不存在fs对象，所以会出现readFile is not a function的错误——你引入的fs是一个空或不完整的对象，没有对应的方法。

正确的解决方案 #

根据你的需求选择对应的方案：

方案1：前端本地存储（保存到用户浏览器） #

如果只是需要在用户浏览器中缓存API数据，使用浏览器提供的本地存储API：

• localStorage/sessionStorage：适合小体量数据，用法简单
• IndexedDB：适合大量数据，支持异步操作

示例（localStorage）：

// 定义天气数据类型
type WeatherType = {
  city: string;
  temperature: number;
  // 其他字段...
};

// 保存天气数据到localStorage
const saveWeatherData = (data: WeatherType) => {
  localStorage.setItem('savedWeather', JSON.stringify(data));
};

// 从localStorage读取数据
const loadWeatherData = () => {
  const saved = localStorage.getItem('savedWeather');
  return saved ? JSON.parse(saved) as WeatherType : null;
};

方案2：后端接口存储（保存到服务器） #

如果需要将数据持久化到服务器的文件系统，必须通过后端接口实现：

1. 用Node.js（比如Express）写一个后端服务，在服务端使用fs模块读写文件
2. 前端通过fetch/axios调用后端接口，传递或获取数据

示例后端接口（Express）：

const express = require('express');
const fs = require('fs');
const app = express();
app.use(express.json());

// 保存天气数据的接口
app.post('/api/save-weather', (req, res) => {
  fs.writeFile('./weather-data.json', JSON.stringify(req.body), (err) => {
    if (err) return res.status(500).json({ error: '保存失败' });
    res.json({ success: true });
  });
});

// 获取天气数据的接口
app.get('/api/get-weather', (req, res) => {
  fs.readFile('./weather-data.json', 'utf8', (err, data) => {
    if (err) return res.status(404).json({ error: '无数据' });
    res.json(JSON.parse(data));
  });
});

app.listen(3001, () => console.log('后端服务运行在3001端口'));

前端调用示例：

type WeatherType = {
  city: string;
  temperature: number;
};

// 保存数据到服务器
const saveWeatherToServer = async (data: WeatherType) => {
  await fetch('http://localhost:3001/api/save-weather', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
};

// 从服务器获取数据
const loadWeatherFromServer = async () => {
  const res = await fetch('http://localhost:3001/api/get-weather');
  return res.json() as Promise<WeatherType>;
};

方案3：开发环境预缓存（提前拉取数据到本地文件） #

如果是开发阶段需要缓存API响应，避免重复调用，可以写一个独立的Node脚本，在启动React项目前运行，拉取数据并保存为JSON文件，然后在React组件中直接导入该文件：

示例脚本（fetch-weather.js）：

const fs = require('fs');
const fetch = require('node-fetch');

(async () => {
  const res = await fetch('你的天气API地址');
  const data = await res.json();
  fs.writeFileSync('./src/weather-cache.json', JSON.stringify(data));
})();

然后在package.json中添加脚本：

"scripts": {
  "prestart": "node fetch-weather.js",
  "start": "react-scripts start"
}

这样启动项目时会自动拉取数据并存为本地文件，React组件直接导入即可：

import weatherData from './weather-cache.json';

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