javascript 在 HTML 中使用 Node.js 模块

Using Node.js modules in HTML

提问by Erel Segal-Halevi

I have the following Node.js project (which is a Minimal Working Example of my problem):

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

module1.js:

模块1.js：

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

module2.js:

module2.js:

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

server.js:

服务器.js：

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

Now I want to create a client.htmlfile that will also use module2.js. Here is what I tried (and failed):

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

naive version:

天真版本：

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

This obviously doesn't work - it produces two errors:

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

• ReferenceError: require is not defined.
• ReferenceError: module2 is not defined.

• 参考错误：需要未定义。
• 参考错误：module2 未定义。

Using Node-Browserify: After running:

使用Node-Browserify：运行后：

browserify module2.js > module2.browserified.js

I changed client.html to:

我将 client.html 更改为：

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

This doesn't work - it produces one error:

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

• ReferenceError: module2 is not defined.

• 参考错误：module2 未定义。

Using Smoothie.jsby @Torben :

使用@Torben 的Smoothie.js：

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

This doesn't work - it produces three errors:

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

• syntax error on module2.js line 1.
• SmoothieError: unable to load module2 (0 )
• TypeError: module2 is not a function

• module2.js 第 1 行的语法错误。
• SmoothieError: 无法加载 module2 (0)
• 类型错误：module2 不是函数

I looked at require.jsbut it looks too complicated to combine with Node.js - I didn't find a simple example that just takes an existing Node.js module and loads it into a web page (like in the example).

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

I looked at head.jsand lab.jsbut found no mention of Node.js's require.

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

So, what should I do in order to use my existing Node.js module, module2.js, from an HTML page?

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

采纳答案by Mariusz Nowak

The problem is that you're using CJS modules, but still try to play old way with inline scripts. That won't work, it's either this or that.

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

To take full advantage of CJS style, organize your client-side code exactly same wayas you would for server-side, so:

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

Create client.js:

创建 client.js：

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

Create bundle with Browserify (or other CJS bundler of your choice):

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

browserify client.js > client.bundle.js

Include generated bundle in HTML:

在 HTML 中包含生成的包：

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

After page is loaded you should see "this is module1! and this is module2!"in browser console

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

回答by Torben

Your problems with Smoothie Require, were caused by a bug (https://github.com/letorbi/smoothie/issues/3). My latest commit fixed this bug, so your example should work without any changes now.

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

回答by David Kudera

You can also try simqwith which I can help you.

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