HTML中使用require报错无法导入JSON，如何实现多JS文件共享数据

• require是Node.js专属的CommonJS模块语法，浏览器原生不支持，这是第一个报错的核心原因
• fs是Node.js专属的文件系统模块，浏览器端无对应实现，任何场景下在前端代码中调用fs都会报错，无需再尝试相关方案
• 使用ES Module导入JSON出现语法错误通常是两个原因：一是缺少浏览器要求的assert { type: 'json' }类型声明；二是直接用file://协议打开本地HTML文件，浏览器安全策略禁止ESM加载本地文件，必须用本地HTTP服务（比如VSCode Live Server插件）启动访问。标准正确导入写法如下：

import subsObj from './subscriptions.json' assert { type: 'json' }; 
const subs = subsObj.subs;

• RequireJS是AMD模块加载器，原生不支持直接加载JSON文件，需要额外配置JSON加载插件才能使用，直接调用会报错

你不需要强制使用模块语法的前提下，以下方案兼容性和实现成本最优：

方案1：全局挂载法（零依赖，全浏览器兼容） #

1. 将JSON内容改造为JS文件，命名为subscriptions-data.js，内容如下：

window.sharedSubsData = {
  // 此处粘贴你原subscriptions.json的全部内容
  "subs": [/* 你的原有数据内容 */]
}

2. 在所有需要用到这份数据的JS文件加载之前，优先加载该JS文件：

<script src="subscriptions-data.js"></script>
<script src="subscribe.js"></script>
<script src="其他需要用到数据的JS文件.js"></script>

3. 任意JS文件中直接调用window.sharedSubsData.subs即可拿到数据，无需任何导入逻辑

方案2：fetch缓存拉取法（适合不想修改原有JSON格式的场景） #

封装全局复用的拉取逻辑，避免重复请求JSON文件：

1. 新建get-shared-subs.js文件，内容如下：

window.getSharedSubs = (() => {
  let requestCache = null
  return () => {
    if (!requestCache) {
      requestCache = fetch('./subscriptions.json')
        .then(res => {
          if (!res.ok) throw new Error('订阅数据加载失败')
          return res.json()
        })
        .then(data => data.subs)
    }
    return requestCache
  }
})()

2. 提前加载该JS文件后，任意需要使用数据的地方调用即可：

// 任意JS文件内的使用逻辑
window.getSharedSubs().then(subs => {
  // 此处写使用subs的业务代码
})

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