JavaScript本地JSON获取报错及多文件export/import使用问题求助

原因 #

fetch API是基于HTTP/HTTPS协议设计的，直接通过file://协议打开本地HTML文件时，浏览器安全策略会限制fetch的使用，导致无法正确解析本地文件路径；如果是在Node.js环境中运行，fetch本身不是通用内置API（Node.js 18+才内置，但同样需要HTTP环境，不能直接读取本地文件路径）。

解决方法 #

浏览器环境

启动本地HTTP服务器，将项目文件放在服务器目录下，通过http://localhost:端口号访问页面：

• Python环境：在项目目录执行 python -m http.server 8000（Python3）或 python -m SimpleHTTPServer 8000（Python2），然后访问http://localhost:8000
• Node.js环境：先全局安装http-server（npm install -g http-server），再在项目目录执行http-server，按提示地址访问

Node.js环境

改用Node.js内置的fs模块读取本地JSON文件：

// Promise版本写法
import fs from 'fs/promises';

fs.readFile('./inputForHw3.json', 'utf8')
  .then(data => console.log(JSON.parse(data)))
  .catch(error => console.log(error));

// async/await写法
async function readLocalJson() {
  try {
    const data = await fs.readFile('./inputForHw3.json', 'utf8');
    console.log(JSON.parse(data));
  } catch (error) {
    console.log(error);
  }
}
readLocalJson();

原因 #

添加"type": "module"后，Node.js会将所有.js文件当作ES模块处理，此时必须严格遵循ES模块的路径规则：比如相对路径必须加./或../、文件扩展名要写全，否则会触发模块解析错误；只要路径规则合规，单独运行任意文件都是可行的。

解决方法 #

1. 修正模块导入路径
   所有相对路径的导入必须添加前缀并写全扩展名，示例：

   // 正确写法
   import { formatData } from './utils.js';
   // 错误写法（会报错）
   import { formatData } from 'utils';
   import { formatData } from './utils';
   

2. 直接单独运行文件
   在终端执行node 目标文件名.js即可，比如：

   node userModule.js
   node orderModule.js
   

3. 通过package.json脚本管理
   在package.json的scripts字段中添加多个运行命令，方便快速执行：

   {
     "type": "module",
     "scripts": {
       "run:user": "node userModule.js",
       "run:order": "node orderModule.js",
       "run:all": "node userModule.js && node orderModule.js"
     }
   }
   

   执行时用npm run run:user或npm run run:order即可分别运行对应文件。

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