怎么在 NW.js 中调用 Node.js 模块读写本地文件

一、NW.js 调用 Node.js 的底层原理与准备工作

传统浏览器出于安全沙箱策略，网页 JavaScript 无法随意直接访问或写入用户的本地磁盘文件。而在 NW.js 环境中，Chromium 的 JavaScript 执行上下文与 Node.js 的运行时上下文被整合在同一个执行空间内。

这意味着在页面渲染进程中的任何 <script> 标签内，都可以像在服务端脚本中一样直接使用全局变量 require、process 和 Buffer。读写本地文件实际上就是直接调用 Node.js 内置的 fs（File System）模块。

1. 搭建最简 NW.js 项目配置

要运行一个 NW.js 应用，必须在项目根目录下创建 package.json 描述清单。确保应用以本地页面启动，以便默认获得完整的 Node.js 调用特权。以下是一个规范的基准配置：

{
  "name": "nw-file-io-demo",
  "version": "1.0.0",
  "main": "index.html",
  "window": {
    "title": "NW.js 本地文件读写演示",
    "width": 880,
    "height": 640,
    "resizable": true
  }
}

二、读取本地文件：从选择器获取真实路径到读取文本

在纯网页环境中，<input type="file"> 返回的 File 对象出于安全考虑被浏览器做了脱敏处理，无法获取文件在操作系统磁盘上的真实完整路径（例如 C:\Documents\note.txt）。

而 NW.js 扩展了 HTML 规范：用户通过文件控件选中文件后，每个 file 对象都多出一个只读属性 path，直接包含该文件在本地硬盘的绝对路径。只要拿到这个绝对路径，就能直接传入 fs.readFile 完成内容获取。

2. 读取本地文件的完整代码实现

在 index.html 中放置一个文件输入控件与一个用于展示文本的文本域，并在 <script> 中通过 fs.promises 实现异步读取：

<!-- index.html 中的界面元素 -->
<div class="toolbar">
  <label for="filePicker">打开本地文本：</label>
  <input type="file" id="filePicker" accept=".txt,.json,.md,.js">
</div>
<textarea id="editor" rows="16" style="width:100%; margin-top:10px;"></textarea>

<script>
  // 直接引入 Node.js 内置核心模块
  const fs = require('fs');
  const path = require('path');

  const filePicker = document.getElementById('filePicker');
  const editor = document.getElementById('editor');

  filePicker.addEventListener('change', async function(event) {
    const fileList = event.target.files;
    if (!fileList || fileList.length === 0) {
      return;
    }

    // 获取 NW.js 提供的真实物理路径
    const filePath = fileList[0].path;
    console.log('目标文件绝对路径:', filePath);

    try {
      // 使用 Promise 版本的异步方法读取文本，防止大文件阻塞渲染主线程
      const content = await fs.promises.readFile(filePath, 'utf8');
      editor.value = content;
      console.log('文件读取成功，大小:', content.length, '字符');
    } catch (err) {
      alert('读取本地文件失败: ' + err.message);
      console.error(err);
    } finally {
      // 清空 value，确保连续两次选取同一文件时依然能够触发 change 事件
      filePicker.value = '';
    }
  });
</script>

三、写入本地文件：覆盖保存与“另存为”对话框

写入本地文件分为两种典型场景：

1. 原位保存（覆盖写入）：已知文件路径时，直接调用 fs.writeFile 将最新文本写回该路径。
2. 另存为新文件：用户需要自由选择目标存储文件夹及文件名。NW.js 为 <input type="file"> 专门扩展了 nwsaveas 属性。

当带有 nwsaveas 属性的文件控件被点击时，NW.js 不会弹出“打开文件”选择框，而是会弹出系统的“另存为”对话框。用户确认保存位置并确定后，event.target.files[0].path 返回的就是用户指定的待保存绝对路径。

3. 写入文件的完整实现示例

在 HTML 中同时预留一个隐藏的 nwsaveas 输入控件和一个“另存为”操作按钮：

<!-- 另存为专用隐藏输入控件，nwsaveas 属性值作为对话框的默认文件名 -->
<input type="file" id="savePicker" nwsaveas="未命名文档.txt" style="display:none;">
<button id="btnSaveDirect">原位保存</button>
<button id="btnSaveAs">另存为...</button>

<script>
  let currentFilePath = null; // 记录当前正在编辑的物理路径
  const savePicker = document.getElementById('savePicker');
  const btnSaveDirect = document.getElementById('btnSaveDirect');
  const btnSaveAs = document.getElementById('btnSaveAs');

  // 通用写入函数
  async function writeContentToDisk(targetPath, textData) {
    try {
      // 写入文本内容，指定 utf8 编码
      await fs.promises.writeFile(targetPath, textData, 'utf8');
      currentFilePath = targetPath;
      alert('保存成功！\n文件路径: ' + targetPath);
    } catch (err) {
      alert('保存文件失败: ' + err.message);
      console.error(err);
    }
  }

  // 点击“原位保存”
  btnSaveDirect.addEventListener('click', function() {
    if (currentFilePath) {
      writeContentToDisk(currentFilePath, editor.value);
    } else {
      // 若当前尚未关联任何本地路径，转为弹出“另存为”
      savePicker.click();
    }
  });

  // 点击“另存为”按钮，通过 JS 触发隐藏文件控件的点击事件
  btnSaveAs.addEventListener('click', function() {
    savePicker.click();
  });

  // 监听另存为对话框选择结果
  savePicker.addEventListener('change', function(event) {
    const fileList = event.target.files;
    if (fileList && fileList.length > 0) {
      const chosenPath = fileList[0].path;
      writeContentToDisk(chosenPath, editor.value);
    }
    // 重置控件值
    savePicker.value = '';
  });
</script>

四、实际应用中的核心细节与避坑指南

在 NW.js 中直接使用 Node.js 模块虽然简单直观，但由于桌面环境的特殊性，开发者在处理本地 I/O 时常常会踩中以下几类典型陷阱：

• 严禁在渲染主线程使用同步方法： Node.js 提供了 fs.readFileSync 和 fs.writeFileSync，虽然写法省去了回调和 Promise，但它们会直接阻塞 Node 事件循环。因为 NW.js 的 DOM 渲染与 JS 执行共享线程，一旦读取百兆大文件或遇到磁盘卡顿，整个应用窗口将瞬间失响应甚至出现系统级“卡死”白屏。在任何生产代码中，必须无条件优先使用异步或 Promise API。
• 小心相对路径的解析基准（process.cwd() 陷阱）： 在浏览器中，相对路径通常相对于当前网页 URL。而在 Node.js fs 模块中，像 fs.readFile('./config.json') 这样的相对路径，其基准是 process.cwd()（即应用启动时的工作目录），而不是 index.html 所在的目录。当用户从桌面快捷方式、右键菜单或不同终端路径启动应用时，process.cwd() 往往漂移，导致出现 ENOENT (no such file or directory) 错误。正确做法是结合 path.join(__dirname, 'config.json') 构造绝对基准。
• NW.js 运行模式（Mixed Context vs Separate Context）： 较新版本的 NW.js（0.13+）在默认情况下 Chromium 上下文与 Node.js 上下文处于隔离状态（Separate Context），此时 window.require 可以正常调用模块，但如果要跨环境传递复杂原生原型对象，建议在 package.json 中明确显式配置 "mixed-context": true，让 DOM 与 Node.js 共享统一的原型链，避免 instanceof 校验失效。

总结

在 NW.js 中调用 Node.js 模块读写本地文件的全流程可以总结为一个极为平滑的链路：

1. 以本地文件形式在 package.json 中定义应用入口；
2. 在 DOM 脚本中直接利用 const fs = require('fs') 引入内置模块；
3. 借助 HTML5 控件扩展特性 files[0].path 与 nwsaveas 唤起原生对话框并获取物理绝对路径；
4. 坚持通过 fs.promises.readFile 与 fs.promises.writeFile 异步处理磁盘读写，并辅以绝对路径规范化与异常捕获。

掌握这一整套方法后，即可在保留 Web 前端敏捷开发体验的同时，获得如传统桌面软件般强大的本地文件存取与数据持久化能力。