React构建JSON编辑器：fs模块使用与目录列表实现疑问

嘿，我来帮你理清这个问题——在React前端项目里用Node.js的fs模块确实容易踩坑，咱们一步步拆解你的疑问：

1. 为什么yarn add fs没用还报错？ #

首先要明确：fs是Node.js的核心内置模块，根本不需要通过npm/yarn安装！你执行yarn add fs装的是一个第三方包，它和Node原生的fs完全不是一回事，功能不全，所以才会出现rs.readdir is not a function的错误。

更关键的是：浏览器环境里根本不存在Node.js的fs模块！浏览器出于安全限制，不允许前端代码直接访问用户本地的文件系统，所以你在React项目里直接require('fs')，拿到的要么是那个残缺的第三方包，要么就是undefined，自然无法调用readdir。

2. 要不要安装完整Node.js才能用fs？ #

如果是在Node.js后端服务里用fs，那只要你有Node环境就行（fs是内置的，不用额外装）。但你是在React前端项目里，就算装了完整Node.js，前端代码也没法直接用fs——因为前端代码最终是在浏览器里运行的，和Node环境是完全隔离的。

3. 有没有替代方案实现目录列表功能？ #

根据你的场景，分三种情况给出方案：

情况一：前端让用户选择本地文件夹并读取目录 #

用浏览器原生的API就能实现，不需要依赖任何第三方库：

• 兼容性较好的方案：使用带webkitdirectory属性的文件输入框

import { useState } from 'react';

function DirectoryList() {
  const [files, setFiles] = useState([]);

  const handleFolderSelect = (e) => {
    const selectedFiles = Array.from(e.target.files);
    // 提取文件名称和相对路径
    const fileInfo = selectedFiles.map(file => ({
      name: file.name,
      fullPath: file.webkitRelativePath
    }));
    setFiles(fileInfo);
  };

  return (
    <div>
      <input type="file" webkitdirectory onChange={handleFolderSelect} />
      <h3>目录文件列表：</h3>
      <ul>
        {files.map((file, index) => (
          <li key={index}>{file.fullPath}</li>
        ))}
      </ul>
    </div>
  );
}

export default DirectoryList;

• 更强大的方案：使用现代浏览器的File System Access API，支持持续读写文件夹，但兼容性稍差。

情况二：你的React项目是Electron桌面应用 #

如果是Electron应用（基于Chromium+Node.js的桌面程序），那你可以直接使用Node.js的fs模块，但需要注意Electron的安全配置：新版Electron推荐通过preload脚本来暴露Node API给渲染进程，而不是直接开启nodeIntegration。

情况三：后端处理目录，前端展示 #

如果是需要读取服务器端的目录，那应该把fs的代码写在Node.js后端服务里，前端通过API请求（比如axios、fetch）获取目录数据，再在React中渲染。

4. 你的代码该怎么调整？ #

你现在的代码是Node.js后端的写法，直接放在React前端肯定跑不通。如果是想做前端本地目录选择，换成上面的浏览器API方案；如果是读取服务器目录，把这段代码移到后端接口里，前端调用接口拿数据即可。

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