Node.js新手求助：如何在HTML代码中直接使用Node.js模块？

你遇到的核心问题其实很典型：浏览器的JavaScript运行环境根本不支持Node.js的内置模块（比如os）和require语法。Node.js的API是专门给服务器端运行的代码设计的，浏览器里没有这些模块，直接在HTML里写require('os')肯定会报错。

下面给你两种实用的解决方案，根据你的需求选就行：

方案1：搭个简单的Node.js服务，前后端配合获取hostname #

这个方法适合需要动态获取hostname的场景，步骤很简单：

• 先确保你装了Node.js，然后新建一个文件夹，初始化项目：

npm init -y

• 装个轻量的Express框架（方便快速搭服务）：

npm install express

• 新建server.js文件，写后端逻辑：

const express = require('express');
const os = require('os');
const app = express();

// 让服务托管静态HTML文件
app.use(express.static('public'));

// 写一个接口，返回服务器的hostname
app.get('/get-hostname', (req, res) => {
  res.send(os.hostname());
});

// 启动服务，监听3000端口
app.listen(3000, () => {
  console.log('服务跑起来啦！访问 http://localhost:3000 就行');
});

• 新建public文件夹，里面放你的index.html：

<div style="float:left;" id="operate"></div>
<script>
// 前端用fetch请求后端接口拿hostname
fetch('/get-hostname')
  .then(response => response.text())
  .then(hostname => {
    document.getElementById('operate').innerHTML = hostname;
  })
  .catch(error => console.log('获取失败:', error));
</script>

• 最后启动服务：

node server.js

打开浏览器访问http://localhost:3000，就能看到hostname啦！

方案2：用Node.js直接生成包含hostname的HTML（适合简单静态场景） #

如果只是想生成一个包含hostname的静态HTML文件，不用搭服务也可以：

• 新建generate-html.js文件：

const os = require('os');
const fs = require('fs');

const hostname = os.hostname();
// 直接把hostname嵌入HTML内容里
const html = `
<div style="float:left;" id="operate">${hostname}</div>
`;

// 把内容写入index.html文件
fs.writeFileSync('index.html', html);
console.log('HTML文件生成好了，直接打开index.html就能看啦！');

• 运行这个脚本：

node generate-html.js

打开生成的index.html，就能看到hostname了。

额外提个醒 #

浏览器的JS只能用浏览器提供的API（比如操作DOM、发请求这些），Node.js的服务端API（像os、fs这些）只能在Node.js环境里用，两者是完全分开的哦～如果是想获取用户设备的名称，浏览器没有直接的API能做到，只能通过后端拿服务器的hostname，或者让用户自己输入。

内容的提问来源于stack exchange，提问作者itsdevthen