如何在Nodejs中引用我建的JS文件?

如何在Nodejs中引用我建的JS文件?

目录结构 <pre> <code> images style.css … js jquery.min.js index.js node_modules socket.io index.html server.js </code> </pre> 我在index.html 里写的 <script src=“js/jquery.min.js” type=“text/javascript”></script> <script src=“js/index.js” type=“text/javascript”></script> <link href=“images/style.css” rel=“stylesheet” type=“text/css” /> 都无效,请问是server.js里还需要怎么配置下吗?


3 回复

在Node.js环境中,index.html中的脚本引用方式与在浏览器环境中有所不同。在浏览器中,你可以直接通过HTML标签来引用外部JavaScript文件,但在Node.js环境中,你需要使用require语句来引用其他JavaScript文件。

根据你提供的目录结构,index.jsserver.js都在根目录下的js文件夹中。如果你想在server.js中引用index.js,你可以这样做:

示例代码

index.js

// index.js
module.exports = {
    greet: function() {
        return 'Hello, World!';
    }
};

server.js

// server.js
const http = require('http');
const path = require('path');
const fs = require('fs');

// 引用index.js
const index = require('./js/index');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    // 设置响应头部信息
    res.writeHead(200, {'Content-Type': 'text/html'});

    // 读取并发送index.html
    const htmlPath = path.join(__dirname, 'index.html');
    fs.readFile(htmlPath, (err, data) => {
        if (err) throw err;

        // 在这里你可以调用index.js中的函数
        console.log(index.greet());

        res.end(data);
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 模块导出:在index.js中,我们定义了一个对象,并将其导出。这样,其他文件可以通过require语句来引用它。

  2. 引用模块:在server.js中,我们使用require语句来引用index.js。注意路径必须相对于server.js文件的位置。

  3. HTTP服务器:我们创建了一个简单的HTTP服务器,它会在接收到请求时读取并返回index.html文件。

  4. 执行函数:在服务器接收到请求后,我们可以调用index.js中定义的函数(例如greet)。

注意事项

  • 确保你的index.html文件路径正确。
  • server.js运行在Node.js环境中,因此不能直接使用浏览器环境中的<script>标签来引用JavaScript文件。
  • 如果你想在浏览器中引用index.js,你需要确保服务器正确地将静态文件暴露给客户端。

希望这些信息对你有帮助!


需要自己读文件流,然后返回 :D

var http = require('http');
var url = require('url');
var fs = require('fs');
http.createServer(function (req, res) {
        res.writeHead(200, {'Content-Type': 'text/html'});
	var content = fs.readFileSync('index.html');
	res.write(content);
        res.end();
}).listen(9337);
console.log('Server running at http://127.0.0.1:9337/');

访问链接:http://127.0.0.1:9337/

要在Node.js中正确引用你自己创建的JS文件,你需要确保文件路径正确,并且在服务器上正确地设置了静态文件服务。根据你的目录结构,我们只需要关注如何在server.js中配置静态文件服务。

示例代码

假设你使用Express框架来搭建服务器(这一步并不是必须的,但通常简化了静态文件服务的配置),你可以这样做:

// server.js
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

// 设置静态文件服务,将 'public' 目录作为静态文件根目录
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

在这个例子中,我们假定所有HTML、CSS和JavaScript文件都在一个名为public的目录下。因此,我们需要将这些文件移动到该目录或修改express.static的路径。

修改目录结构

将现有文件移动到新的public目录下,得到以下结构:

/public
  /images
    style.css
  /js
    jquery.min.js
    index.js
  index.html
/node_modules
/socket.io
server.js

这样,通过express.static配置,客户端可以访问/js/jquery.min.js/js/index.js等资源。

HTML中的脚本引用

修改你的index.html文件,确保脚本路径指向正确的资源:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="/images/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/index.js" type="text/javascript"></script>
</body>
</html>

请注意,URL前缀/表示从服务器的根目录开始查找资源,这是静态文件服务设置的默认行为。

总结

  • 确保文件路径正确。
  • 使用express.static服务静态文件。
  • 在HTML文件中使用正确的路径引用脚本。
回到顶部