节点上的客户端:未捕获的ReferenceError:没有定义require

So, I am writing an application with the node/express + jade combo.

因此，我正在编写一个带有node/express + jade组合的应用程序。

I have client.js, which is loaded on the client. In that file I have code that calls functions from other JavaScript files. My attempt was to use

我有客户。在客户端加载的js。在该文件中，我有从其他JavaScript文件调用函数的代码。我的企图是利用

var m = require('./messages');

in order to load the contents of messages.js (just like I do on the server side) and later on call functions from that file. However, require is not defined on the client side, and it throws an error of the form Uncaught ReferenceError: require is not defined.

以加载消息的内容。js(就像我在服务器端所做的那样)以及稍后从该文件调用函数。但是，需要在客户端没有定义，并且它会抛出一个未被捕获的引用错误的错误:需要没有定义。

These other JS files are also loaded on runtime at the client because I place the links at the header of the webpage. So the client knows all the functions that are exported from these other files.

这些其他的JS文件也会在客户端运行时加载，因为我将链接放在页面的头部。客户端知道所有从其他文件导出的函数。

How do I call these functions from these other JS files (such as messages.js) in the main client.js file that opens the socket to the server?

如何从主客户机中的其他JS文件(如message . JS)调用这些函数。打开套接字到服务器的js文件?

1 个解决方案

#1

296

This is because require() does not exist in the browser/client-side JavaScript.

这是因为在浏览器/客户端JavaScript中不存在require()。

Now you're going to have to make some choices about your client-side JavaScript script management.

现在，您必须对客户端JavaScript脚本管理做出一些选择。

You have three options:

你有三个选择:

Use <script> tag.
使用 <脚本> 标记。
Use a CommonJS implementation. Synchronous dependencies like Node.js
使用一个CommonJS的实现。同步依赖像node . js
Use an AMD implementation.
使用一个AMD的实现。

CommonJS client side-implementations include:

CommonJS客户端的实现包括:

(most of them require a build step before you deploy)

(大多数在部署之前都需要构建步骤)

Browserify - You can use most Node.js modules in the browser. This is my personal favorite.
Browserify—您可以使用大多数节点。浏览器中的js模块。这是我个人的最爱。
Webpack - Does everything (bundles JS, CSS, etc). Made popular by the surge of React.js. Notorious for its difficult learning curve.
Webpack——做所有的事情(捆绑JS、CSS等)。因反应堆的激增而流行。以难学曲线而闻名。
Rollup - New contender. Leverages ES6 modules. Includes tree-shaking abilities (removes unused code).
汇总-新的竞争者。利用ES6模块。包含树摇动能力(移除未使用的代码)。

You can read more about my comparison of Browserify vs Component.

您可以阅读更多关于我对Browserify和Component的比较。

AMD implementations include:

AMD的实现包括:

RequireJS - Very popular amongst client-side JavaScript developers. Not my taste because of its asynchronous nature.
RequireJS——在客户端JavaScript开发者中非常流行。不是我的口味，因为它的异步性。

Note, in your search for choosing which one to go with, you'll read about Bower. Bower is only for package dependencies and is unopinionated on module definitions like CommonJS and AMD.

注意，在你的搜索中，你会读到关于鲍尔的文章。Bower只适用于包依赖项，对于CommonJS和AMD等模块定义没有意见分歧。

Hope this helps some.

希望这可以帮助一些。

#1

296