Three.js应用中无法引入Node.js fs模块的问题求助

你在浏览器环境里尝试使用Node.js专属的fs模块，这是错误的核心原因。fs（文件系统模块）是Node.js的核心模块，专门用于Node.js后端环境操作本地文件系统，浏览器出于安全限制和运行环境差异，完全不支持这个模块，所以webpack打包时会提示找不到它。

场景1：你想在前端读取用户本地文件 #

别用fs，改用浏览器原生的File API实现：

// 给页面添加文件选择框
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = (event) => {
    // 这里拿到文件内容
    console.log(event.target.result);
  };
  reader.readAsText(file); // 读取文本文件，也可用readAsDataURL读取二进制/图片
});
document.body.appendChild(fileInput);

场景2：你想操作服务器/本地项目的文件 #

把文件操作逻辑移到Node.js后端服务里：

1. 用Express写一个简单的后端接口（读取文件示例）：

// server.js（后端独立文件）
const express = require('express');
const fs = require('fs');
const app = express();

app.get('/read-file', (req, res) => {
  fs.readFile('./your-file.txt', 'utf8', (err, data) => {
    if (err) {
      res.status(500).send('读取文件失败');
      return;
    }
    res.send(data);
  });
});

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

2. 前端通过HTTP请求调用接口获取文件内容：

// app.js（前端文件）
fetch('http://localhost:3000/read-file')
  .then(res => res.text())
  .then(data => console.log(data))
  .catch(err => console.error(err));

场景3：第三方库依赖fs但你不需要它的文件功能 #

如果是某个第三方库引入了fs但你用不到相关功能，可以在webpack配置里让webpack忽略这个模块：
修改webpack.config.js：

module.exports = {
  // ...其他配置
  resolve: {
    fallback: {
      "fs": false // 告知webpack不要解析fs模块
    }
  },
  // 针对webpack旧版本可使用node选项：
  node: {
    fs: 'empty'
  }
};

注意：此方案仅能让打包通过，无法在前端实际使用fs的文件操作功能。

JavaScript有两个核心运行环境：

• Node.js：运行在服务器/本地电脑，拥有操作系统级权限，可使用fs、path等核心模块操作文件系统。
• 浏览器：运行在用户浏览器中，出于安全限制，无法直接访问本地文件系统，仅能通过用户主动选择文件（File API）或与后端交互处理文件。

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