客户端节点：未捕获ReferenceError：require未定义 [英] Client on node: Uncaught ReferenceError: require is not defined

问题描述

我有 client.js ，它被加载到客户端。在该文件中，我有代码可以调用其他JavaScript文件的函数。我尝试使用

  var m = require（'./ messages'）; 
  

为了加载 messages.js （就像我在服务器端一样），然后从该文件调用函数。但是，要求在客户端没有定义，并且会抛出错误的形式未捕获ReferenceError：require未定义。

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

如何从这些其他JS文件中调用这些函数（例如主要的 client.js 文件中的messages.js ）打开套接字到服务器？

解决方案

这是因为浏览器/客户端JavaScript中不存在 require（）

现在，您将需要对客户端JavaScript脚本管理做出选择。

您有三个选项：

1. 使用< script> 标签


2. 使用 CommonJS 实施。同步依赖关系，如Node.js


3. 使用 AMD 实现。

CommonJS 客户端实现包括：

（大部分需要构建步骤才能部署）

1. Browserify - 您可以在浏览器中使用大多数Node.js模块。这是我个人的最爱。


2. 组件 - 专注于简单。浏览器。由同一个制作Express.js的人（最受欢迎的Node.js Web框架）制作。


3. Webpack - 是否所有（捆绑JS，CSS等）。受到React.js激增的欢迎。臭名昭着的难学习曲线。


4. 汇总 - 新的竞争者。充分利用ES6模块。包括树木的能力（删除未使用的代码）。

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

AMD 实现包括：

1. RequireJS - 在客户端JavaScript开发人员中非常受欢迎。因为它的异步性，不是我的口味。

请注意，在搜索中选择哪一个，你会阅读 Bower 。 Bower仅适用于软件包依赖关系，并且在诸如CommonJS和AMD等模块定义上不受任何限制。

希望这有帮助。

编辑（2016-01-16）：

添加 webpack 和汇总。我认为可以说，在2016年，最好避免组件。我最终将其从列表中删除。

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

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

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.

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.

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?

解决方案

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

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

You have three options:

1. Use <script> tag.
2. Use a CommonJS implementation. Synchronous dependencies like Node.js
3. Use an AMD implementation.

CommonJS client side-implementations include:

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

1. Browserify - You can use most Node.js modules in the browser. This is my personal favorite.
2. Component - Focuses on simplicity. Browser only. Made by the same guy who made Express.js, the (most) popular Node.js web framework.
3. Webpack - Does everything (bundles JS, CSS, etc). Made popular by the surge of React.js. Notorious for its difficult learning curve.
4. Rollup - New contender. Leverages ES6 modules. Includes tree-shaking abilities (removes unused code).

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

AMD implementations include:

1. RequireJS - Very popular amongst client-side JavaScript developers. Not my taste because of its asynchronous nature.

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.

Hope this helps some.

Edit (2016-01-16):

Added webpack and rollup. I think it's safe to say that in 2016, it's best to avoid component. I'll eventually remove it from the list.

这篇关于客户端节点：未捕获ReferenceError：require未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！