如何在ES5环境中导入JSON文件并解决require未定义报错？

报错原因 #

require是CommonJS模块化规范的专属语法，仅Node.js环境原生支持，浏览器原生ES5环境没有内置该方法，所以会抛出未定义报错。

对应解决方案 #

根据你的运行环境选择适配的实现方式：

场景1：代码运行在浏览器端（前端场景）

• 方法1：全局变量挂载（最简单无依赖）
  将data.json重命名为data.js，内容修改为挂载全局变量的形式：

  window.appData = {
    "name": "XYZ"
  }
  

  在页面HTML中先引入data.js再引入script.js，即可在script.js的ES5类中直接读取使用：

  // script.js 代码示例
  function CustomClass() {}
  CustomClass.prototype.init = function() {
    // 直接读取全局挂载的JSON数据
    this.storedData = window.appData;
    // 后续业务逻辑
  }
  

• 方法2：AJAX异步请求获取
  如果不想修改JSON文件格式，可以用原生XMLHttpRequest异步请求data.json，拿到数据后存入类实例：

  // script.js 代码示例
  function CustomClass() {}
  CustomClass.prototype.init = function(afterLoadCallback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', './data.json', true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 解析JSON响应存入当前实例
        this.storedData = JSON.parse(xhr.responseText);
        // 数据加载完成后执行回调逻辑
        if (afterLoadCallback) afterLoadCallback();
      }
    }.bind(this);
    xhr.send();
  }
  

  注意该方法需要在本地服务环境下运行（比如VSCode的Live Server插件），直接本地打开HTML会触发跨域限制。

场景2：代码运行在Node.js环境

如果是Node.js运行时还报该错误，说明当前项目配置了ES模块规范，你可以用fs模块读取JSON文件解析使用，兼容ES5语法：

// script.js 代码示例
var fs = require('fs');
var jsonData = JSON.parse(fs.readFileSync('./data.json', 'utf8'));

function CustomClass() {}
CustomClass.prototype.init = function() {
  this.storedData = jsonData;
}

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