时间戳

首页 > 解决方案 > scrollreveal ReferenceError: 要求 const ScrollReveal = require("scrollreveal"); 后未定义文档

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

问题描述

我正在尝试使用 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：文档未定义

索引.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>

应用程序.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');
});

标签： javascriptnode.jsscrollreveal.js

解决方案

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

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

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

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

推荐阅读