scrollreveal ReferenceError: 要求 const ScrollReveal = require("scrollreveal"); 后未定义文档答案

【问题标题】：scrollreveal ReferenceError: document is not defined after requiring const ScrollReveal = require("scrollreveal");scrollreveal ReferenceError: 要求 const ScrollReveal = require("scrollreveal"); 后未定义文档
【发布时间】：2021-06-28 05:30:18
【问题描述】：

我正在尝试使用 scrollreveal javascript。通过 npm 安装它并在我的 NodeJS 代码中使用它（见下文）。另外，我也将它包含在我的 HTML 中。

现在，当我在超级终端中运行 nodemon app.js 时，我得到了这个错误：

C:\Users\Admin\Desktop\My Projects\test\node_modules\scrollreveal\dist\scrollreveal.js:33 容器：document.documentElement， ^

ReferenceError: 文档未定义

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello</h1>
    <script src="https://unpkg.com/scrollreveal@4.0.9/dist/scrollreveal.min.js"></script>
  </body>
</html>

app.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const ScrollReveal = require('scrollreveal');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000, function () {
  console.log('server start on port 3000');
});

【问题讨论】：

为什么要将它包含在 app.js 中？这似乎是一个只适用于“浏览器”的包，不适用于 NodeJS。
我不知道。我对此真的很陌生:(谢谢

标签： javascript node.js scrollreveal.js

【解决方案1】：

我认为你误解了使用依赖项的方式

首先，NodeJS 和在浏览器中运行的 JavaScript 是完全不同的。

您在这里面临的问题是您在 NodeJS 文件中包含一个仅在浏览器环境中工作的包。而且由于NodeJS没有“文档”的概念，所以报错。

要解决此问题，您只需从 NodeJS 中删除 require 语句，然后在 HTML 文件中使用“scrollreveal”即可。由于您在 HTML 中使用 CDN 链接，因此您无需通过 npm 安装依赖项。（您可以使用 npm 来管理您的依赖项，但这需要现代前端设置，我建议您从以下内容开始：Modern JavaScript Explained For Dinosaurs

【讨论】：

你的动画逻辑在哪里？您可以将另一个 JS 文件用于您自己的应用程序逻辑。如果您认为此答案确实回答了您的问题，您可以将其标记为已接受的答案。
我有一个 main.js，我在其中放置了 ScrollReveal().reveal('.hello',{delay: 200}); .我已经添加了。但是它不起作用。
抱歉回复晚了。但这是另一个问题，所以你可能应该在一个新问题中问这个问题。您可以检查几件事： 1. 查看浏览器的开发控制台中是否显示任何错误。 2.同样在浏览器的控制台中，查看是否所有的JS文件都加载正确。 3. 检查 lib 的文档，看看它们是否有可运行的示例，下载它们并用您自己的代码替换它们的代码，看看它是否有效。祝你好运！