我正在用JavaScript客户端(在浏览器中运行)和Node.js服务器创建一个小应用程序，使用WebSocket通信。
我想在客户机和服务器之间共享代码。我才刚刚开始使用Node.js，至少可以说，我对现代JavaScript的知识有点生疏。因此，我仍然对CommonJS的require()函数感到困惑。如果我通过使用“export”对象创建我的包，那么我无法看到我如何在浏览器中使用相同的JavaScript文件。
我想创建一组在两端使用的方法和类，以方便编码和解码消息以及其他镜像任务。然而，Node.js/CommonJS打包系统似乎阻止了我创建可以在双方使用的JavaScript文件。
我还尝试使用JS.Class来获得更紧密的OO模型，但我放弃了，因为我不知道如何让提供的JavaScript文件与require()一起工作。我是不是遗漏了什么?
当前回答
在浏览器的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)
其他回答
我写了这个，如果你想将所有变量设置为全局作用域，使用起来很简单:
(function(vars, global) {
for (var i in vars) global[i] = vars[i];
})({
abc: function() {
...
},
xyz: function() {
...
}
}, typeof exports === "undefined" ? this : exports);
不要忘记JavaScript函数的字符串表示形式代表该函数的源代码。您可以简单地以封装的方式编写函数和构造函数，以便它们可以被toString()'d发送给客户端。
另一种方法是使用构建系统，将公共代码放在单独的文件中，然后将它们包含在服务器和客户端脚本中。我通过WebSockets将这种方法用于一个简单的客户端/服务器游戏，其中服务器和客户端都运行本质上相同的游戏循环，客户端每一次都与服务器同步，以确保没有人作弊。
我的游戏构建系统是一个简单的Bash脚本，它通过C预处理器运行文件，然后通过sed清理cpp留下的一些垃圾，所以我可以使用所有普通的预处理器，如#include， #define， #ifdef等。
如果你使用模块捆绑器(如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
我写了一个简单的模块，可以导入(在Node中使用require，或者在浏览器中使用脚本标记)，您可以使用它从客户端和服务器加载模块。
示例使用
1. 定义模块
将以下文件放在你的静态web文件文件夹中的log2.js文件中:
let exports = {};
exports.log2 = function(x) {
if ( (typeof stdlib) !== 'undefined' )
return stdlib.math.log(x) / stdlib.math.log(2);
return Math.log(x) / Math.log(2);
};
return exports;
就这么简单!
2. 使用模块
由于它是一个双边模块加载器，我们可以从双方(客户端和服务器)加载它。因此，你可以做以下事情，但你不需要同时做这两件事(更不用说以特定的顺序):
在节点
在Node中，它很简单:
var loader = require('./mloader.js');
loader.setRoot('./web');
var logModule = loader.importModuleSync('log2.js');
console.log(logModule.log2(4));
这个应该返回2。
如果文件不在Node的当前目录中，请确保调用loader。seroot的路径到你的静态web文件文件夹(或任何你的模块)。
在浏览器中:
首先，定义网页:
<html>
<header>
<meta charset="utf-8" />
<title>Module Loader Availability Test</title>
<script src="mloader.js"></script>
</header>
<body>
<h1>Result</h1>
<p id="result"><span style="color: #000088">Testing...</span></p>
<script>
let mod = loader.importModuleSync('./log2.js', 'log2');
if ( mod.log2(8) === 3 && loader.importModuleSync('./log2.js', 'log2') === mod )
document.getElementById('result').innerHTML = "Your browser supports bilateral modules!";
else
document.getElementById('result').innerHTML = "Your browser doesn't support bilateral modules.";
</script>
</body>
</html>
确保你没有直接在浏览器中打开文件;因为它使用AJAX，我建议你看看Python 3的http。服务器模块(或任何你的超快速，命令行，文件夹web服务器部署解决方案)。
如果一切顺利，将会出现:
在浏览器的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)
