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

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

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

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


当前回答

将代码编写为RequireJS模块,将测试编写为Jasmine测试。

这样,就可以使用RequireJS在任何地方加载代码,并且在浏览器中使用jasmine-html和Node.js中的jasmine-node运行测试,而不需要修改代码或测试。

下面是一个工作示例。

其他回答

在浏览器的Node.js模块模式、AMD模块模式和全局模式中检查jQuery源代码:

(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)

之前的解决方案都没有将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'

我写了这个,如果你想将所有变量设置为全局作用域,使用起来很简单:

(function(vars, global) {
    for (var i in vars) global[i] = vars[i];
})({
    abc: function() {
        ...
    },
    xyz: function() {
        ...
    }
}, typeof exports === "undefined" ? this : exports);

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();