我正在用JavaScript客户端(在浏览器中运行)和Node.js服务器创建一个小应用程序,使用WebSocket通信。
我想在客户机和服务器之间共享代码。我才刚刚开始使用Node.js,至少可以说,我对现代JavaScript的知识有点生疏。因此,我仍然对CommonJS的require()函数感到困惑。如果我通过使用“export”对象创建我的包,那么我无法看到我如何在浏览器中使用相同的JavaScript文件。
我想创建一组在两端使用的方法和类,以方便编码和解码消息以及其他镜像任务。然而,Node.js/CommonJS打包系统似乎阻止了我创建可以在双方使用的JavaScript文件。
我还尝试使用JS.Class来获得更紧密的OO模型,但我放弃了,因为我不知道如何让提供的JavaScript文件与require()一起工作。我是不是遗漏了什么?
用例:在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'
我写了一个简单的模块,可以导入(在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服务器部署解决方案)。
如果一切顺利,将会出现: