scrollreveal ReferenceError: document is not defined after requiring const ScrollReveal = require("scrollreveal");

Question

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

现在，当我在超级终端中运行 nodemon app.js 时，出现此错误：

C:\Users\Admin\Desktop\My Projects\test\node_modules\scrollreveal\dist\scrollreveal.js:33 container: document.documentElement, ^

ReferenceError: document is not defined

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');
});

Answer 1

我想你误解了使用依赖的方式

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

您在这里面临的问题是您在 NodeJS 文件中包含了一个只能在浏览器环境中工作的包。由于NodeJS没有“文档”的概念，因此错误。

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

scrollreveal ReferenceError: document is not defined after requiring const ScrollReveal = require("scrollreveal");

scrollreveal ReferenceError: document is not defined after requiring const ScrollReveal = require("scrollreveal");

javascript

node.js

scrollreveal.js