在 HTML 中使用 Node.js 模块

Question

我有以下 Node.js 项目（这是我的问题的最小工作示例）：

模块1.js ：

module.exports = function() {
    return "this is module1!";
};

module2.js :

var module1 = require('./module1');
module.exports = function() {
    return module1()+" and this is module2!";
};

服务器.js ：

var module2 = require('./module2');
console.log(module2());  // prints: "this is module1! and this is module2!"

现在我想创建一个也将使用 module2.js 的client.html文件。 这是我尝试过的（但失败了）：

天真版本：

<script src='module2.js'></script>
<script>alert(module2());</script> // should alert: "this is module1! and this is module2!"

这显然不起作用 - 它会产生两个错误：

使用Node-Browserify ：运行后：

browserify module2.js > module2.browserified.js

我将 client.html 更改为：

<script src='require.js'></script>
<script>
    var module2 = require('module2');
    alert(module2());
</script>

这不起作用 - 它会产生一个错误：

使用@Torben 的Smoothie.js ：

<script src='require.js'></script>
<script>
    var module2 = require('module2');
    alert(module2());
</script>

这不起作用 - 它会产生三个错误：

我查看了require.js，但它与 Node.js 结合看起来太复杂了——我没有找到一个简单的例子，它只需要一个现有的 Node.js 模块并将其加载到网页中（如示例中所示）。

我查看了head.js和lab.js，但没有发现 Node.js 的 require。

那么，我应该怎么做才能从 HTML 页面使用现有的 Node.js 模块 module2.js？

Answer 1

问题是您使用的是 CJS 模块，但仍然尝试使用内联脚本的旧方式。 那行不通，要么这样要么那样。

要充分利用 CJS 风格，请以与服务器端完全相同的方式组织客户端代码，因此：

创建 client.js：

var module2 = require('./module2');
console.log(module2());  // prints: "this is module1! and this is module2!"

使用 Browserify（或您选择的其他 CJS 打包器）创建包：

browserify client.js > client.bundle.js

在 HTML 中包含生成的包：

<script src="client.bundle.js"></script>

页面加载后，您应该看到“这是模块 1！这是模块 2！” 在浏览器控制台中

Answer 2

您也可以尝试使用我可以帮助您的simq 。

Answer 3

您的 Smoothie Require 问题是由错误引起的（ https://github.com/letorbi/smoothie/issues/3 ）。 我最近的提交修复了这个错误，所以你的例子现在应该可以在没有任何更改的情况下工作。