我找不到在 html 中使用“require”的方法

Posted 2023-02-24

【中文标题】我找不到在 html 中使用“require”的方法

【英文标题】：I cannot find a way to use 'require' in html

【发布时间】：2021-11-18 16:19:20

【问题描述】：

我现在正在用 html 开发 JS，但出现以下错误：Uncaught (in promise) ReferenceError: require is not defined。

代码很简单subs = require("./subscriptions.json").subs;。

为了解决这个问题，我先尝试了module和import，结果又报错了。<script type="module" src="subscribe.js"></script>

import subs as subs from "./subscriptions.json"; → Uncaught SyntaxError: Unexpected token '' import subs from "./subscriptions.json"; → Uncaught SyntaxError: Unexpected identifier import * from "./subscriptions.json"; → Uncaught SyntaxError: Unexpected token '*' import "./subscriptions.json"; → Uncaught SyntaxError: Unexpected string

这和"fs"一样，一个JS模块，所以我放弃了它并尝试使用require.js（2.3.6）。但同样，它也抛出了错误。<script data-main="subscribe.js" src="require.js"></script>

require(["./subscriptions.json"]); → Uncaught Error: Script error for "subscriptions.json" require(["json!./subscriptions.json"]); → Uncaught Error: Script error for "json", needed by: json!subscriptions.json_unnormalized2 , Uncaught Error: Script error for "subscriptions.json" , Uncaught Error: Load timeout for modules: json!subscriptions.json_unnormalized2 require(["fs"]); → Uncaught Error: Script error for "fs"

我的代码可能有什么问题？需要时，我可以分享我的完整代码。

ps。实际上我不需要要求或导入某些东西。我只希望我的独立 JS 文件共享 json 数据。如果有更好的方法，请分享你的。谢谢。

【问题讨论】：

HTML 中没有require。 require 在 Node.js 中是 CJS。 fs 是一个 Node.js 模块，在浏览器中也不可用。

@jabaa 那么import 和require.js 有什么问题？

您是否收到错误消息？我尝试了你的import 代码并得到了Loading module from “http://localhost:8080/subscriptions.json” was blocked because of a disallowed MIME type (“application/json”). 似乎你只能导入 javascript 模块。你可以阅读developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。你安装require.js了吗？你如何导入它？你配置了吗？你可以阅读requirejs.org

@jabaa 明白。我会以另一种方式保存 JSON。而且，我已将require.js 安装为文件并放入<script data-main="subscribe.js" src="require.js"></script>。我想没有问题。

【参考方案1】：

你不能在 es6 模块中使用 require。 require 用于 node.js 并在浏览器端 javascript 中读取 json 文件，您可以在 javascript 文件中使用 fetch api，并且可以从 .json 文件中获取数据并在 HTML 中使用它

fetch("test.json")
    .then(response => response.json())
    .then(json => console.log(json));

【讨论】：

非常感谢，但是如何使用fs 再次保存？

@dbld fs 是 Node.js 模块，在浏览器中不可用。

您可以将更新后的 JSON 保存在浏览器存储中。但不能将其写入您的 PC 或服务器上的文件，因为您需要编写 node.js api

@jabaa 哦，这是个坏消息。那么如何用 JS 保存文件呢？

@hamza_hassan_44 我不太了解浏览器存储。我可以向其中保存的浏览器发送推送吗？