在客户端 Node.js 中包含 JQuery答案

【问题标题】：Including JQuery in Client Side Node.js在客户端 Node.js 中包含 JQuery
【发布时间】：2016-06-23 09:54:44
【问题描述】：

我正在使用 express 学习 node.js，遇到了一个给我带来麻烦的话题。基本上，一旦用户请求一个网页并且后端向他们发送 HTML 网页，如果我想包含一个 javascript 文件以使该 HTML 页面具有交互性，我将如何做到这一点？

我的后端是这样的：

var app = require('express')();
var server = require('http').Server(app);
var express = require('express');
server.listen(8080);
app.use(express.static(__dirname + '/views'));

app.get('/', function(req, res){
    res.render('index.html');
});

它发送的 HTML 如下所示：

<html>
    <head>
        <meta charset="UTF-8">
        <title>WebsiteMainPage</title>
    </head>
    <body>
        <h1>index.html</h1>
    </body>
</html>

我是否只是通过将 HTML 中的源链接到这样的公共源来添加 Jquery？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

或者我必须做一些特别的事情吗？无论如何，我将如何添加我编写的通用 javascript 文件，而不是 Jquery 之类的库。

编辑：我的项目结构如下：

Project
   |
   |_____ backend.js
   |
   |_____ views
   |         |
   |         |_______ index.html
   |
   |_____ static
             |
             |_______ libs
                        |
                        |________jquery-1.12.1.min

【问题讨论】：

标签： javascript jquery html node.js

【解决方案1】：

使用 CDN 服务器是最好的选择，这样浏览器就会缓存您的库文件。这将帮助您的客户减少他们的页面加载时间。

如果您想使用自己从服务器下载的副本，请创建一个目录结构例如“static/libs/”，然后将 jquery 库复制到该目录中然后通过

将其设为静态目录

app.use(express.static(__dirname + '/static'));

然后你可以通过

从你的html页面引用jquery

<script src="/libs/jquery/1.12.0/jquery.min.js"></script>

您也可以将node_module 目录设为静态，然后所有node_module 将可供公众使用，您可以从客户端引用jquery 文件。

在评论中我看到你提到了npm jquery。当您执行npm jquery 时，jquery 将作为节点模块安装，并且可以在 node_module 目录中使用，使用 require('jquery') 您可以在服务器中使用 jquery 模块只有一边。如果要在客户端使用require('jquery') 方法，则必须使用requirejs 或webpack 等。

【讨论】：

我明白了，这很有道理，谢谢！所以app.use()可以做不止一次
嘿，所以我编辑了我的问题以添加我的目录结构的表示，我想知道你是否可以帮助我看看我是否正确地实施了你的建议。
基本上在我的 index.html 中我添加了<script src="/libs/jquery-1.12.1.min.js"></script>，在我的 backend.js 中我添加了app.use(express.static(__dirname + '/static'));
实际上它似乎可以工作，但我不想在 html 中使用我的交互式 javascript 函数，这可能会变得混乱，我想创建一个名为 app.js 的文件并在其中使用 jquery 和东西，所以我我会尝试将app.js 添加到libs/ 文件夹并在那里添加我的功能。太刺激了！
Gilson 如果我使用 webpack，我还需要在 node_modules 目录中的 jquery 中添加“exprex.static”行吗？或者在这种情况下，我可以在 webpack 的配置中公开 jquery.js 的所有路径而不会出现安全问题？

【解决方案2】：

亲爱的，

这很简单，只需使用

包含 jquery 文件

<head><script src="/pathto/jquery.min.js"></script></head>

或

在 index.html 文件的head 标签中添加 CDN

在应用的根文件夹中创建一个名为“public”的文件夹。
在“public”文件夹中创建“js”名称文件夹
将所有 js 文件保存在“js 文件夹”中
像这样在您的 app.js 文件中进行更改

app.use(express.static(path.join(__dirname, 'public')));
现在只需转到您的索引文件并在 HTML 头标记中正常添加 CDN 或您的 jquery 文件。

感谢和干杯 :)

【讨论】：

感谢您的回答！我无法确定 Jquery 文件的路径，我在项目根文件夹中使用了npm install jquery（我在帖子中添加了一个目录结构以进行可视化）。也许我真的会得到源代码，明确地制作一个名为jquery.min.js的文件，并将其放在与html页面相同的目录中
非常感谢，我会试试看！给你支票:)