particles.js 和 window 未定义

Question

当我使用 node app.js 启动我的应用程序时，我收到以下错误：

/home/ubuntu/workspace/nodeapp/node_modules/particles.js/particles.js:1429
window.requestAnimFrame = (function(){
^

ReferenceError: window is not defined
    at Object.<anonymous> (/home/ubuntu/workspace/nodeapp/node_modules/particles.js/particles.js:1429:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/ubuntu/workspace/nodeapp/app.js:5:19)
    at Module._compile (module.js:570:32)

我正在尝试使用 particles.js 作为我的背景，我用 npm 安装了这个包。这是我的 app.js 的样子：

var express = require("express")
var app = express()
var request = require("request")
var PythonShell = require('python-shell');
var particlesJS = require("particles.js")
app.set("view engine", "ejs")
app.engine('html', require('ejs').renderFile);
app.use(express.static("public")); 

particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});



app.get("/", function(req, res){
    res.render("main")
})



app.listen(process.env.PORT, process.env.IP, function(){
    console.log("Movie App has started!!!");
})

并且我将 particles.js 存储在资产文件夹中。 html 看起来像这样：

<html>
    <head>
        <div id="particles-js"></div>
        <script src="particles.js"></script>
        <title>MYMDB</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css">
        <link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
    </body>
</html>

Answer 1

这是因为 window 是一个浏览器对象，看起来您正试图在服务器端的节点中加载 particle.js。

尝试将您的 particlesJS.load 调用移动到浏览器中。

来自他们的 npm 页面：

Initialize the plugin on the window.onload event.

window.onload = function() {
  Particles.init({
    selector: '.background'
  });
};

Answer 2

如果您查看 particles.js 文件，您会发现它正在尝试访问 window 全局变量。

window 对象是浏览器 API 调用，您无法在服务器端代码中访问它。

因此，只需将您的 require("particles.js") 代码移动到您可以访问 window 对象的位置就足够了。（请注意，我没有将其分配给 particlesJS variable，因为在 particles.js 文件中未完成任何导出操作。只需将一些功能分配给 window 对象即可。）

所以等待 window 对象加载：

window.onload = function() {
  require("particles.js");

  particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
  });
};

particles.js 和 window 未定义

particles.js and window is not defined

javascript

node.js

particles.js