在HTML中使用Node.js模块 [英] Using Node.js modules in HTML

问题描述

我有以下Node.js项目(这是我的问题的最小工作示例):

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

module1.js :

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

module2.js :

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

server.js :

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

现在，我想创建一个也将使用module2.js的 client.html 文件.这是我尝试过的(但失败了):

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

原始版本:

<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.
• ReferenceError:未定义module2.

使用 Node-Browserify :运行后:

Using Node-Browserify: After running:

browserify module2.js > module2.browserified.js

我将client.html更改为:

I changed client.html to:

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

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

This doesn't work - it produces one error:

• ReferenceError:未定义module2.

使用 Smoothie.js :@Torben:

Using Smoothie.js by @Torben :

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

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

This doesn't work - it produces three errors:

• module2.js第1行出现语法错误.
• SmoothieError:无法加载module2(0)
• TypeError:module2不是函数

我查看了 require.js ，但它看起来太复杂而无法与Node.js结合使用-我没有找到一个简单的示例，该示例仅采用现有的Node.js模块并将其加载到网页中(如示例中一样).

I looked at require.js but 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).

我查看了 head.js 和

I looked at head.js and lab.js but found no mention of Node.js's require.

那么，要想从HTML页面使用现有的Node.js模块module2.js，该怎么办?

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

推荐答案

问题是您正在使用CJS模块，但仍尝试使用内联脚本使用旧方法.那是行不通的，就是这个或那个.

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 way as you would for server-side, so:

创建client.js:

Create client.js:

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

使用Browserify(或您选择的其他CJS捆绑器)创建捆绑包:

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

browserify client.js > client.bundle.js

在HTML中包含生成的包:

Include generated bundle in HTML:

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

页面加载后，您应该在浏览器控制台中看到这是module1 !，这是module2！"

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

这篇关于在HTML中使用Node.js模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！