javascript - 在客户端和nodejs服务器上使用静态javascript文件

标签 javascript node.js websocket

我有一个正在运行的 Node.js 服务器,其中有一个静态内容文件夹。我有模型代码,我希望服务器和客户端都有,所以我将其放在静态内容文件夹中。我用过module.exports = {MyClass}这样在服务器上,我可以使用 const MyClass = require('./static-content/MyClass.js'); 导入它。这适用于服务器,但是客户端无法执行 require如果我将脚本放在 html 中 <script language="javascript" src="MyClass.js" > </script> ,然后我收到错误:

ReferenceError: module is not defined

有没有办法让客户端和服务器都使用 JavaScript 文件而不创建模型代码的重复项?上下文是我在服务器上有一个对象需要在服务器和客户端之间来回传递。由于它具有循环引用和函数,我不能简单地 JSON.stringify对象,因此我手动获取它的状态,将其转换为 JSON 对象,通过 WebSocket 发送它并在客户端上反转它。

最佳答案

您可以简单地检查范围内是否存在module。如果是,则将其导出,否则什么都不做。考虑以下示例:

静态/Testclass.js

class TestClass {
    constructor(someParam = 'initial state') {
        this.someField = someParam;
    }
    doStuff() {
        return `${this.someField}`;
    }

}

const testClassInstance = new TestClass('some other state');

if (typeof (module) !== 'undefined' && module.exports) {
    module.exports = {
        TestClass,
        testClassInstance
    };
}

静态/test.html

<!DOCTYPE html>
<head>
    <script src="/static/TestClass.js"></script>
</head>

<body>
    <p id="test"></p>
    <p id="test2"></p>
    <script>
        document.getElementById("test").innerText = new TestClass().doStuff();
        document.getElementById("test2").innerText = testClassInstance.doStuff();
    </script>
</body>

服务器.js

const TestClass = require('./static/TestClass').TestClass;
const testClassInstance = require('./static/TestClass').testClassInstance;
let  testObj = new TestClass();
console.log(testObj.doStuff());
console.log(testClassInstance.doStuff());

const express = require('express')
const app = express()
const port = 3000

app.use('/static', express.static('static'));
app.listen(port);

这会记录

initial state
some other state

服务器启动时到控制台,html页面上的两个段落也将包含这些内容。

关于javascript - 在客户端和nodejs服务器上使用静态javascript文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55460636/

相关文章:

javascript - 如何使用 jQuery 将所有相似的 id 放入数组中?

javascript - ejs模板数据未插入到mongodb中

javascript - 如何在MongoDB中存储和区分数据?

node.js - 在 OSX 上使用 Homebrew 软件安装 Node 。未找到 NPM

javascript - 如何在 Javascript 中使用 postMessage()?

html - npm 开始 : Manual browser refresh to reflect changes

javascript - 如何防止我的服务器 Web 套接字淹没我的浏览器客户端

javascript - 现代浏览器的 Socket.io 替代品

playframework - 为什么 play 2.6 在空闲 85 秒后关闭 websocket?虽然玩 2.5 没有

javascript - Jest : how to test console. 日志 haveBeenCalled 具有预期值的子集?