Particle.js + Node + Express - 无法加载资源答案

【问题标题】：Particle.js + Node + Express - Can't get resource to loadParticle.js + Node + Express - 无法加载资源
【发布时间】：2018-01-06 14:02:16
【问题描述】：

伙计们。又是一次愚蠢的问题。

我正在研究使用particles.js 作为背景，因为我学会了使用节点和表达。在 github 上提供的文档中，它说要使用：

npm install particles.js

完成此操作后，我已将其添加到我的 app.js 中调用它：

var particleJS = require("particle.js")

然而，此时，当我尝试运行我的应用程序时，节点错误状态：

ReferenceError：未定义窗口

还有另一个代码块应该被调用来创建这个应该在前端运行的代码块，使用玉文件。

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});

有几件事我不太确定。首先，从我对 node 的乐趣来看，npm install 模块应该可以在 app.js 中调用。所以我觉得它不起作用很奇怪..这是因为有问题的代码不是基于使用像 express 这样的框架吗？

其次，如果是这种情况，并且我已经通过 npm 安装了particle.js 模块，为了让jade 能够拾取它，我必须将js 复制到“javascript”公共目录中，这样它能找到吗？

如果是这样的话，我一开始就不需要通过 npm 安装它？

这么多问题......对不起。我还在学习，并且在这个方面有点跑来跑去。也许我的逻辑在某个地方是错误的。

谁能帮忙？

【问题讨论】：

使用捆绑工具，例如 Webpack。您不能在 Node 的上下文中运行前端库。您基本上使用 NPM 来管理您的项目所依赖的库。要使用它们，您需要将所有内容捆绑到 .js 文件中，并加载到视图中。
我认为您将使用 npm 或 yarn 安装的 express 和必须添加到 Express 的公共目录中的前端库混在一起。 expressjs.com/en/starter/static-files.html 。您可以使用 npm 下载您的库并添加到您的库的路由，但它不是很干净:)。看这个话题：stackoverflow.com/questions/11372408/…

标签： javascript node.js express pug particles.js

【解决方案1】：

所以你在正确的轨道上，当你 npm install 一个前端库时，你需要使用另一个库来将它加载到视图中。我猜他们假设您正在使用这样的框架，或者将其放入前端框架的 app.js（react 等）中。我只需下载库并将其放入您的静态文件夹并以这种方式运行。

【讨论】：

我这样做了，它按预期工作。我不确定这是否是正确的方法，但我还是决定这样做。稍后我将研究反应，并可能考虑人们提到的其他一些选项。非常感谢您的帮助:)

【解决方案2】：

我更改了脚本并引用了我在外部创建的文件夹的档案particles.js 和particle.json

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

    <style>
        body{
            background-color: lightgrey;
        }
        *{
            padding : 0px;
            margin : 0px;
            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
        }
      </style>

<!--<div id="particles-js"></div>-->
<div id="particles-js" style="position : absolute; width:100%; height:100%; z-index:-1; background-color: #000000"></div>

  <div class="container">
      <img src="../logo.jpg" width="600" class="img-fluid wall" style="display: block; margin: 0 auto">
  </div>

  <div class="container">
      <Form action = "/game" method = "POST">
        <button id="Iniciar_juego" type="submit" class="btn btn-primary btn-lg">Iniciar juego</button>
        <Input name="textbox" id="usuario" class="form-control" aria-label="Nombre de usuario:" aria-describedby="inputGroup-sizing-default" type="text" value="${salida}"style="display: none">
      </Form>
      <Form action = "/tabla" method = "GET">
        <button id="Ranking" type="submit" class="btn btn-primary btn-lg">Ver Ranking</button>
      </Form>
      <Form action = "/inst" method = "GET">
        <button id="Instrucciones" type="submit" class="btn btn-primary btn-lg">Instrucciones</button>
      </Form>
      <Form action = "/" method = "GET">
        <button id="Salir" type="submit" class="btn btn-primary btn-lg">Salir</button>
      </Form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

  <script>
    particlesJS.load('particles-js','../particles.json',function(){
      console.log('particles.json loaded...');
    });
  </script>
</body>
</html>

【讨论】：