我正在学习 Node.js,并从常见的聊天应用程序示例开始。我让一切工作正常,但我不想将所有 javascript 内联在 index.html 文件中,而是将其放入它自己的名为 app.js 的文件中。然而,一旦我这样做,我就会得到 404 not found on the file。我正在尝试使用 src 路径,但无法让它找到该文件。当它是 Node 应用程序时,有没有引用自定义 js/css 文件的技巧?
Index.html
<div id="chat"></div>
<form id="send-message">
<input type="text" id="message" />
<input type="submit" />
</form>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/app.js"></script>
<script>
</script>
server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var path = require('path');
app.use(express.static(path.join(__dirname, 'app.js')));
server.listen(process.env.port || 3000);
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
io.sockets.on('connection', function (socket) {
socket.on('send message', function (message) {
console.log(message);
io.sockets.emit('new message', message);
});
});
app.js
$(document).ready(function () {
var socket = io.connect();
var form = $('#send-message');
var message = $('#message');
var chat = $('#chat');
form.submit(function (e) {
e.preventDefault();
socket.emit('send message', message.val());
message.val('');
});
socket.on('new message', function (data) {
chat.append(data + "<br />");
});
});
我可能会沉迷于掌握 Node 的概念,但我假设我不必在实际的 server.js 本身中做任何事情,因为那是服务器端代码,我不应该做任何 dom服务器端内的操纵。像通常使用标准 Web 应用程序一样添加自定义 js 文件似乎不是正确的方法。我注意到,在我看过/读过的几乎所有教程/文档中,它们都是通过调用 cdn url 来引用 jquery 和 bootstrap 等库,而不是将这些文件作为模块或本地目录包含在内。基于这一点和我不断收到的 404 错误,我假设有一种不同的方法可以在 Web 应用程序中包含对本地文件的外部 js 引用。
fiddler 输出:
GET http://localhost:1337/app.js HTTP/1.1
Host: localhost:1337
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Accept: */*
Referer: http://localhost:1337/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
Cookie: __utma=111872281.1352628776.1455330937.1455330937.1455330937.1; __utmz=111872281.1455330937.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
最佳答案
您需要在 server.js
中使用 express.static()
。您没有在 Express 服务器中建立静态 Assets ,因此无法提供文件。
var express = require('express');
var app = express();
var path = require('path');
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
server.listen(process.env.port || 3000);
// The below works but isn't a good practice because it's not scalable
app.use('/app.js', express.static(path.join(__dirname, '/app.js')));
// You should create a public directory in your project folder and
// place all your static files there and the below app.use() will
// serve all files and sub-directories contained within it.
//app.use('public', express.static(path.join(__dirname, 'public')));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
通常,您不会像我在上面的代码片段中那样将文件设置为静态。您需要建立一个静态目录,例如 public
,然后在您的公共(public)目录中您可以放置可以提供服务的静态资源(CSS、JS、HTML)。
关于javascript - 在 Node.js Web 应用程序中引用自定义 javascript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38297009/