如何将.js文件传递给.ejs和node

Question

我希望能够将一个名为popmotion的库加载到我的主页中，该库位于传递到node/express的.ejs文件中，目前我的文件popmotion.js中的代码不能运行，我希望能够通过popmotion.js控制ejs文件中提到的dom元素，我得到了引用错误的控制台错误，这些错误表明安装在节点模块中的模块popmotion不被识别，我不知道这是否与我的list.ejs、app.js或我的文件结构或其他什么有关

我的节点文件具有以下依赖项

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const _ = require("lodash");
const popmotion = require("popmotion");

const app = express();

app.set('view engine', 'ejs');

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

mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);
mongoose.connect("mongodb://localhost:27017/todolistDB");

我的list.ejs看起来像这样

<%- include("header") -%>

  <div class="box" id="heading">
    <h1> <%= listTitle %> </h1>
  </div>

  <div id="b"class="box ball">

    <% newListItems.forEach(function(item){ %>
      <form action="/delete" method="post">
       <div class="item">
        <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">
        <p><%=item.name%></p>
       </div>
       <input type="hidden" name="listName" value="<%= listTitle %>"></input>
      </form>
    <% }) %>

      <form class="item" action="/" method="post">
        <input type="text" name="newItem" placeholder="New Item" autocomplete="off">
        <button type="submit" name="list" value="<%= listTitle %>">+</button>
      </form>
  </div>

<%- include("footer") -%>

我还在express中包含了一个静态公共文件夹，用于运行styles.css和popmotion.js(我试图在主页上呈现的文件)，我的文件结构如下所示

​

Answer 1

你需要从你的前端代码加载popmotion脚本。所以在你的一个EJS模板中，例如：

<script src="javascripts/popmotion.js"></script>

此时，您正在将其作为节点模块加载，当浏览器查看呈现的模板时，该模块对浏览器不可用。