Yeoman生成的Excel加载项项目导入JavaScript模块报错问题

我正尝试使用Yeoman generator创建Excel加载项，需要在excel_project/src/taskpane/taskpane.js文件中调用fs库。单独在终端运行taskpane.js文件时所有功能正常，但在终端执行npm start启动整个Excel项目时会出现模块导入错误，Excel加载项环境无法正常导入模块。

以下为Yeoman生成的默认taskpane.js文件内容，我仅新增了const fs = require('fs'); // this gives the error这行代码：

Office.onReady((info) => {
  if (info.host === Office.HostType.Excel) {
    document.getElementById("sideload-msg").style.display = "none";
    document.getElementById("app-body").style.display = "flex";
    document.getElementById("run").onclick = run;
  }
});

export async function run() {
  try {
    const fs = require('fs'); // 报错位置
    await Excel.run(async (context) => {
      const range = context.workbook.getSelectedRange();
      let text = document.querySelector('textarea').value;

      // 读取区域地址
      range.load("address");
      // 更新填充颜色
      range.format.fill.color = "yellow";

      await context.sync();
      console.log(`The range address was ${range.address}.`);
    });
  } catch (error) {
    console.error(error);
  }
}

报错截图如下：

报错根本原因 #

• fs是Node.js专属的内置模块，仅能在Node运行时环境中调用，不支持浏览器环境。
• Yeoman生成的Excel加载项的taskpane代码运行在Office内嵌的浏览器渲染沙箱中，属于纯前端环境，不存在Node.js运行时，因此直接引入fs必然触发模块不存在的错误。你单独在终端运行该JS文件时，调用的是本地系统的Node运行时，所以可以正常执行fs逻辑，两个运行环境存在本质区别。

对应解决方法 #

根据你使用fs的实际场景选对应方案即可：

• 场景1：读取用户本地磁盘文件
  不要使用fs，直接用浏览器原生File API实现，通过<input type="file">组件让用户主动选择目标文件，再通过FileReader读取文件内容，这是Office加载项官方推荐的前端文件读取方案，不需要额外依赖。
• 场景2：将内容写入本地文件/触发下载
  使用前端原生Blob + URL.createObjectURL方案生成临时下载链接，通过模拟a标签点击触发文件下载，不要调用fs接口。
• 场景3：需要调用Node原生能力（比如读写任意磁盘路径、调用本地系统接口）
  将fs相关逻辑拆分到独立的本地Node服务中作为中间层，taskpane的前端代码通过HTTP请求调用本地服务暴露的接口，由本地Node服务执行fs操作后将结果返回给加载项前端即可。
• 注意：不要尝试通过webpack等打包工具把fs模块打包进前端代码，fs底层依赖Node的系统调用能力，浏览器环境没有对应实现，打包后运行依然会报错。

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