我正在用JavaScript客户端(在浏览器中运行)和Node.js服务器创建一个小应用程序,使用WebSocket通信。

我想在客户机和服务器之间共享代码。我才刚刚开始使用Node.js,至少可以说,我对现代JavaScript的知识有点生疏。因此,我仍然对CommonJS的require()函数感到困惑。如果我通过使用“export”对象创建我的包,那么我无法看到我如何在浏览器中使用相同的JavaScript文件。

我想创建一组在两端使用的方法和类,以方便编码和解码消息以及其他镜像任务。然而,Node.js/CommonJS打包系统似乎阻止了我创建可以在双方使用的JavaScript文件。

我还尝试使用JS.Class来获得更紧密的OO模型,但我放弃了,因为我不知道如何让提供的JavaScript文件与require()一起工作。我是不是遗漏了什么?


当前回答

也许这不完全符合你的问题,但我还是想分享一下。

我想在string上声明几个简单的string实用函数。原型,可用于节点和浏览器。我只是把这些函数保存在一个名为utilities.js的文件中(在子文件夹中),并且可以很容易地从我的浏览器代码中的脚本标记中引用它,并在我的Node.js脚本中使用require(省略.js扩展名):

my_node_script.js

var utilities = require('./static/js/utilities')

my_browser_code.html

<script src="/static/js/utilities.js"></script>

我希望这些信息对别人有用,而不是对我。

其他回答

服务器可以简单地将JavaScript源文件发送到客户端(浏览器),但诀窍是客户端必须提供一个迷你的“导出”环境,然后才能执行代码并将其存储为模块。

创建这样一个环境的一个简单方法是使用闭包。例如,假设您的服务器通过HTTP(如http://example.com/js/foo.js)提供源文件。浏览器可以通过XMLHttpRequest加载所需的文件,并像这样加载代码:

ajaxRequest({
  method: 'GET',
  url: 'http://example.com/js/foo.js',
  onSuccess: function(xhr) {
    var pre = '(function(){var exports={};'
      , post = ';return exports;})()';
    window.fooModule = eval(pre + xhr.responseText + post);
  }
});

关键是客户端可以将外部代码包装到一个匿名函数中立即运行(一个闭包),该函数创建“exports”对象并返回它,这样你就可以将它分配到你想要的地方,而不是污染全局命名空间。在这个例子中,它被分配给窗口属性fooModule,该属性将包含文件foo.js导出的代码。

不要忘记JavaScript函数的字符串表示形式代表该函数的源代码。您可以简单地以封装的方式编写函数和构造函数,以便它们可以被toString()'d发送给客户端。

另一种方法是使用构建系统,将公共代码放在单独的文件中,然后将它们包含在服务器和客户端脚本中。我通过WebSockets将这种方法用于一个简单的客户端/服务器游戏,其中服务器和客户端都运行本质上相同的游戏循环,客户端每一次都与服务器同步,以确保没有人作弊。

我的游戏构建系统是一个简单的Bash脚本,它通过C预处理器运行文件,然后通过sed清理cpp留下的一些垃圾,所以我可以使用所有普通的预处理器,如#include, #define, #ifdef等。

现在,js也值得一看。它允许您从客户端调用服务器端,从服务器端调用客户端函数

之前的解决方案都没有将CommonJS模块系统引入浏览器。

正如在其他答案中提到的,有资产管理器/打包器解决方案,如Browserify或Piler,还有RPC解决方案,如dnode或nowjs。

但是我找不到浏览器的CommonJS实现(包括require()函数和exports /模块)。导出对象等)。所以我自己写了,后来才发现别人写得比我好:https://github.com/weepy/brequire。它被称为Brequire (Browser require的缩写)。

从受欢迎程度来看,资产管理公司符合大多数开发商的需求。然而,如果你需要CommonJS的浏览器实现,Brequire可能会符合要求。

2015年更新:我不再使用Brequire(它已经几年没有更新了)。如果我只是在编写一个小型的开源模块,并且我希望任何人都能轻松使用,那么我将遵循与Caolan的回答类似的模式(上面)——我在几年前写过一篇关于它的博客文章。

然而,如果我写的模块是为私人使用的,或者是为一个在CommonJS上标准化的社区(比如Ampersand社区)写的,那么我就用CommonJS的格式写它们,并使用Browserify。

用例:在Node.js和浏览器之间共享你的应用配置(这只是一个例子,可能不是最好的方法,这取决于你的应用)。

问题:你不能使用window(在Node.js中不存在)或global(在浏览器中不存在)。

编辑:现在我们可以感谢globalThis和Node.js >= 12。

过时的解决方案:

文件config.js: Var config = { 喷火:“酒吧” }; If (typeof module === 'object')模块。导出= config; 在浏览器(index.html)中: < script src = " config.js " > < /脚本> < script src = " myApp.js " > < /脚本> 现在可以打开开发工具并访问全局变量配置 在Node.js (app.js)中: Const config = require('./config'); console.log (config.foo);//打印'bar' 使用Babel或TypeScript: 从'./config'导入配置; console.log (config.foo);//打印'bar'