Node.js 和 Express：如何将脚本文件添加到 ejs 文件答案

【问题标题】：Node.js and Express: How to add script file to ejs fileNode.js 和 Express：如何将脚本文件添加到 ejs 文件
【发布时间】：2020-12-15 17:22:55
【问题描述】：

这是我第一次使用 node.js 和 Express。我有以下项目结构：

Project/
|-- app/
|   |-- script.js
|
|-- public/
|   |-- css/
|       |-- style.css
|   |
|   |-- resources/
|
|-- views/
|   |-- index.ejs
|
|-- app.js
|-- package.json
|-- package-lock.json

现在：

app.js -> 启动服务器
index.ejs -> 包含html代码
style.css -> 有样式
script.js -> 包含我的应用程序的前端功能

在创建服务器以便从那里运行我的应用程序之前，脚本文件像往常一样简单地包含在 index.html（现在是 index.ejs）中，并且一切正常。但是现在仅仅在 ejs 中包含脚本文件是不够的。实际上，页面只是加载到服务器上，没有任何功能。

我已经尝试在我的 script.js 文件中添加以下内容，因为我在这里找到了一些东西，但它不起作用：

const express = require("express");
path = require('path');

const script = express();
script.use(express.static(path.join('../views', 'index')));

我需要做什么才能将我的 script.js 文件与 node.js 链接并表达，无需开发 RESTful 应用程序？

【问题讨论】：

标签： javascript node.js express

【解决方案1】：

你用错了express.static。

首先，您真的非常不想将您的 ejs 文件公开给其他人下载。这样做可以让人们看到您的服务器的源代码（即使它只是模板），为他们提供更多信息以对您的应用程序进行逆向工程。所以删除这个：

script.use(express.static(path.join('../views', 'index')));

其次，您希望人们能够下载您的前端脚本、CSS 和图像。要允许这样做（这是您问题的直接答案），您需要使用express.static：

script.use(express.static(path.join('../app')));
script.use(express.static(path.join('../public')));

设置完成后，您可以简单地将前端脚本以通常的方式包含在您的 ejs 文件中：

<script src="/script.js">

浏览器会为您完成剩下的工作。

补充答案：

如果您希望从 /app 路径而不是 / 提供脚本，您可以在 Express 中设置路径：

script.use('/app', express.static(path.join('../app')));

然后可以用作：

<script src="/app/script.js">

【讨论】：

请注意，大多数人会将他们的前端脚本放在 public 文件夹中以避免混淆，因为这就是 public 文件夹的含义 - 静态内容
首先，感谢您公开我的 ejs 文件。其次，根据您的建议，我将script.js 移至公共下的新文件夹。在启动服务器的app.js 文件中，我一直有用于公开提供静态文件的中间件，所以现在包含script.js 文件！太棒了，非常感谢 :) 另外请注意，我认为您的意思是写 app.use 而不是 script.use。
@MariahZammit 变量的名称取决于您如何设置它。在您的情况下，您使用 script = express() 所以它将是 script.use() 而不是 app.use()

【解决方案2】：

你需要告诉 express 使用的是 ejs


// set view engine to ejs
script.set("view engine", "ejs");
// you need to specify views folder too because your script.js is not in // root folder.
app.set('views','../views');
// serve public folder so you can include .css .js in your .ejs file.
app.use("/public", express.static("../public"));

//render you index file
app.use("/", (req,res)=>{
 return res.render("index");
});

【讨论】：