在客户端 Node.js 中包含 JQuery
Posted
技术标签:
【中文标题】在客户端 Node.js 中包含 JQuery【英文标题】：Including JQuery in Client Side Node.js 【发布时间】：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
【问题讨论】：
【参考方案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页面相同的目录中
非常感谢，我会试试看！给你支票:)以上是关于在客户端 Node.js 中包含 JQuery的主要内容，如果未能解决你的问题，请参考以下文章