如何在Node.js和浏览器之间共享代码？

Question

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

我想在客户端和服务器之间共享代码.我刚刚开始使用Node.js,至少可以说,我对现代JavaScript的了解有点生疏.所以我仍然围绕CommonJS的require()函数.如果我使用'export'对象创建我的包,那么我无法看到如何在浏览器中使用相同的JavaScript文件.

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

我也尝试使用JS.Class来获得更紧密的OO模型,但我放弃了,因为我无法弄清楚如何让提供的JavaScript文件与require()一起使用.这里有什么我想念的吗？

Answer 1

如果你想编写一个可以在客户端和服务器端使用的模块,我有一个简短的博客文章,快速简单的方法:编写Node.js和浏览器,基本上如下(其中this相同window) :

(function(exports){

    // Your code goes here

   exports.test = function(){
        return 'hello world'
    };

})(typeof exports === 'undefined'? this['mymodule']={}: exports);

或者,有一些项目旨在在客户端实现Node.js API,例如Marak的gemini.

您可能还对DNode感兴趣,它允许您公开JavaScript函数,以便可以使用简单的基于JSON的网络协议从另一台计算机调用它.

Answer 2

Epeli在这里提供了一个很好的解决方案http://epeli.github.com/piler/即使没有库也可以使用,只需将其放在名为share.js的文件中即可.

(function(exports){

  exports.test = function(){
       return 'This is a function from shared module';
  };

}(typeof exports === 'undefined' ? this.share = {} : exports));

在服务器端只需使用:

var share = require('./share.js');

share.test();

在客户端只需加载js文件然后使用

share.test();

Answer 3

检查jQuery源代码,使其在Node.js模块模式,AMD模块模式和浏览器中的全局工作:

(function(window){
    var jQuery = 'blah';

    if (typeof module === "object" && module && typeof module.exports === "object") {

        // Expose jQuery as module.exports in loaders that implement the Node
        // module pattern (including browserify). Do not create the global, since
        // the user will be storing it themselves locally, and globals are frowned
        // upon in the Node module world.
        module.exports = jQuery;
    }
    else {
        // Otherwise expose jQuery to the global object as usual
        window.jQuery = window.$ = jQuery;

        // Register as a named AMD module, since jQuery can be concatenated with other
        // files that may use define, but not via a proper concatenation script that
        // understands anonymous AMD modules. A named AMD is safest and most robust
        // way to register. Lowercase jquery is used because AMD module names are
        // derived from file names, and jQuery is normally delivered in a lowercase
        // file name. Do this after creating the global so that if an AMD module wants
        // to call noConflict to hide this version of jQuery, it will work.
        if (typeof define === "function" && define.amd) {
            define("jquery", [], function () { return jQuery; });
        }
    }
})(this)

Answer 4

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

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

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

Answer 5

我建议查看Node.js的RequireJS适配器.问题是默认情况下Node.js使用的CommonJS模块模式不是异步的,这会阻止在Web浏览器中加载.RequireJS使用AMD模式,只要您使用r.js适配器,它就是异步的并且兼容服务器和客户端.

Answer 6

也许这不完全符合这个问题,但我想我会分享这个.

我想制作几个简单的字符串实用程序函数,在String.prototype上声明,可用于节点和浏览器.我只是将这些函数保存在一个名为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>

我希望这对我以外的人有用.

Answer 7

如果使用webpack之类的模块捆绑器捆绑JavaScript文件供浏览器使用，则只需将Node.js模块重用于浏览器中运行的前端即可。换句话说，您的Node.js模块可以在Node.js和浏览器之间共享。

例如，您具有以下代码sum.js：

普通的Node.js模块：sum.js

const sum = (a, b) => {
    return a + b
}

module.exports = sum

使用Node.js中的模块

const sum = require('path-to-sum.js')
console.log('Sum of 2 and 5: ', sum(2, 5)) // Sum of 2 and 5:  7

在前端重用

import sum from 'path-to-sum.js'
console.log('Sum of 2 and 5: ', sum(2, 5)) // Sum of 2 and 5:  7