使用import * as fs from 'fs'报错：Cannot use import statement outside a module

核心问题拆解 #

1. 环境混淆：fs是Node.js的内置文件系统模块，浏览器环境完全不支持——浏览器出于安全限制，禁止前端JS直接读取本地文件系统，这是你读取文件失败的根本原因。
2. 模块语法错误：你同时混用了ES模块的import和CommonJS的require，而且浏览器本身不识别Node.js的模块导入语法，导致出现Cannot use import statement outside a module错误。
3. 异步逻辑问题：就算在Node.js环境下，fs.readFile是异步操作，你在setInterval里调用它后立刻更新DOM，此时downloads还没被新值覆盖，拿到的始终是旧数据。

对应解决方案 #

方案1：如果是要从服务器获取文件内容 #

把读取本地文件的逻辑换成浏览器支持的fetch API，定时请求服务器上的tp.txt文件：

let downloads = 0;

// 封装加载文件的函数
function updateDownloads() {
  fetch('tp.txt')
    .then(res => {
      if (!res.ok) throw new Error('请求失败');
      return res.text();
    })
    .then(text => {
      downloads = text;
      document.getElementById('downloads').innerText = downloads;
    })
    .catch(err => console.error('加载出错:', err));
}

// 页面加载时先执行一次
updateDownloads();
// 每5秒刷新一次
setInterval(updateDownloads, 5000);

方案2：如果是要读取用户本地的文件 #

必须通过浏览器的File API，让用户主动选择文件才能读取：

<!-- 先加一个文件选择控件 -->
<input type="file" id="fileSelector" accept=".txt">
<div id="downloads"></div>

<script>
let downloads = 0;
const fileSelector = document.getElementById('fileSelector');

// 监听用户选择文件的事件
fileSelector.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  // 文件读取完成后更新内容
  reader.onload = (event) => {
    downloads = event.target.result;
    document.getElementById('downloads').innerText = downloads;
  };
  // 以文本格式读取文件
  reader.readAsText(selectedFile);
});

// 注意：浏览器不允许自动重复读取本地文件，必须用户再次选择才能更新
</script>

额外提醒 #

如果你的代码原本是打算在Node.js环境运行（比如后端脚本），那需要：

• 删掉其中的document.getElementById（Node.js没有DOM）
• 统一模块语法：要么用import（需要在package.json里添加"type": "module"），要么用require，不能混用
• 修正异步逻辑：把需要使用downloads的代码放在fs.readFile的回调函数里

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