【问题标题】:'require' is not available to index.html running on node.js'require' 不适用于在 node.js 上运行的 index.html
【发布时间】:2021-08-17 20:11:56
【问题描述】:

我有一个服务器应用程序使用它来显示主页

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "/index.html"));
});

我在 index.html 中的 js 文件的头部有这些行

    <script src="/public/js/controller.js" type="module"></script>
    <script src="/public/js/main.js" type="module"></script>

main.js 用于前端 js,而控制器用于后端,它导入 model.js 和 model.js 使用 fs 使用此行

const fs = require("fs");

但是当我尝试使用节点服务器 http://localhost:3000 加载 index.html 时,出现此错误

model.js:2 Uncaught ReferenceError: require is not defined
    at model.js:2

所以我添加了 require.js 库,然后像这样使用它

    <script src="/public/js/require.js" ></script>

然后我仍然收到此错误

require.js:108 Uncaught Error: Module name "fs" has not been loaded yet for context: _. Use require([])
https://requirejs.org/docs/errors.html#notloaded
    at makeError (require.js:108)
    at Object.s [as require] (require.js:947)
    at requirejs (require.js:134)
    at model.js:2

有人可以建议,应该怎么做才能使这项工作?我在这个问题上被困了超过 2 天,而且我对 node.js 和这个“需要”的东西还很陌生。但我知道它是 node.js 的一个非常重要的部分。

所以我想对不使用捆绑器并直接从节点服务器运行的 html 页面必须做些什么来处理这个问题有一些清晰和一些建议/帮助。..

为了清楚我所说的“这个”是什么意思,我要做的就是获取一个文件夹名称列表,我想在前端用作导航菜单(li 项)。我我在 node.js 上使用这个命令来获取数组..

fs.readdir('./data/')

我需要在我的 index.html 中有这个数组,它位于 node.js 上运行的同一服务器/文件夹/应用程序上。

我假设如果 node.js 正在显示一个 html 文件(使用 app.get),我将能够以这种方式使用 fs 命令。我错了吗?如果是这样,我该怎么做才能使用readdir 并让数组在前端显示为菜单?

【问题讨论】:

  • requirejs 允许您在客户端使用require(),但这并不意味着它可以访问任何nodejs 包,例如默认的fs 或像@ 这样的npm 包987654334@。它只能做文件。
  • 感谢您的回复..根据您的评论在我的问题末尾添加了更多信息..请检查是否有意义

标签: node.js requirejs require


【解决方案1】:

“fs”模块是 NodeJS 中的一个内置模块,允许您使用文件系统。它在客户端不可用(想象人们可以访问您的网页并操纵您的文件系统!!)。

你想要做的是get a list of folder names that you want use as navigation menu (li items) on the front-end。为此,您可以使用“fs”模块在服务器端获取文件夹名称列表,然后使用模板引擎呈现带有数据的 HTML 文件。

对于 NodeJS,有一些流行的模板引擎:EJSpugnunjucks....

【讨论】:

  • 感谢@Dang 的澄清.. 这正是我打算做的.. 然后我认为用app.get("/", (req, res) =&gt; { res.sendFile(path.join(__dirname, "/index.html")); }); 显示HTML 与模板引擎相同.. 但我猜我错了,因为我现在意识到它仍然只是一个从 获取脚本的 html 网页,即使它是由服务器提供的……那是我的错误……对吗? ..对此的确认将帮助我继续前进..所以请回复并让我知道..
  • 是的,sendFile 只是将文件发送给客户端。您需要使用模板引擎:)
  • 或者,向服务器发送 AJAX 请求以获取文件列表。
【解决方案2】:

您可能将您的 server.js 用作 ES6 模块,这是一件好事,因为我自己花了一个小时来设置它。

你可以使用import * as fs from 'fs'; or import {fs} from 'fs';,但我使用了import { promises as fs } from "fs";,因为我喜欢我的 fs 调用 async

给人一种蟒蛇的感觉。

【讨论】:

  • 感谢您的回复..:-).. 不,我没有 server.js 作为 ES6 模块.. 所以它不允许导入选项(我假设对于node.js,最好使用'require'选项,这样就没有依赖关系了..无论如何这完全不同)..;-)..所以不,这个答案对我不起作用..
  • 如果你想在html5中做fs的东西,你可以使用input type="file"标签,或者加载像this这样的文件,或者不要。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-06
  • 1970-01-01
  • 2016-06-24
  • 2013-06-21
  • 2023-04-07
相关资源
最近更新 更多