node.js 节点上的客户端：未捕获的 ReferenceError：需要未定义

Client on node: Uncaught ReferenceError: require is not defined

提问by MightyMouse

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

我有client.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, requireis not defined on the client side, and it throws an error of the form Uncaught ReferenceError: require is not defined.

为了加载messages.js（就像我在服务器端所做的那样）的内容，然后从该文件调用函数。但是，require没有在客户端定义，它会抛出表单错误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.

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

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

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

回答by JP Richardson

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

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

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

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

You have three options:

您有三个选择：

1. Use <script>tag.
2. Use a CommonJSimplementation. Synchronous dependencies like Node.js
3. Use an AMDimplementation.

1. 使用<script>标签。
2. 使用CommonJS实现。像 Node.js 这样的同步依赖
3. 使用AMD实现。

CommonJSclient side-implementations include:

CommonJS客户端实现包括：

(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. Webpack- Does everything (bundles JS, CSS, etc). Made popular by the surge of React.js. Notorious for its difficult learning curve.
3. Rollup- New contender. Leverages ES6 modules. Includes tree-shaking abilities (removes unused code).

1. Browserify- 您可以在浏览器中使用大多数 Node.js 模块。这是我个人的最爱。
2. Webpack- 无所不能（捆绑 JS、CSS 等）。由于 React.js 的激增而流行起来。因其艰难的学习曲线而臭名昭著。
3. 汇总- 新的竞争者。利用 ES6 模块。包括摇树功能（删除未使用的代码）。

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

您可以阅读更多关于我对Browserify 与 (deprecated) Component 的比较。

AMDimplementations include:

AMD实施包括：

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

1. 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 的信息。Bower 仅适用于包依赖项，并且对 CommonJS 和 AMD 等模块定义没有意见。

Hope this helps some.

希望这对一些人有所帮助。

回答by Kibonge Murphy

I am coming from an electron environment, where I need IPC communication between a renderer process and the main process. The renderer process sits in an HTML file between script tags and generates the same error. The line

我来自电子环境，在那里我需要渲染器进程和主进程之间的 IPC 通信。渲染器进程位于脚本标记之间的 HTML 文件中，并生成相同的错误。线

const {ipcRenderer} = require('electron')

throws the Uncaught ReferenceError: require is not defined

抛出Uncaught ReferenceError: require is not defined

I was able to work around that by specifying node integration as true when the browser window (where this HTML file is embedded) was originally created in the main process.

当浏览器窗口（嵌入此 HTML 文件的位置）最初在主进程中创建时，我能够通过将节点集成指定为 true 来解决这个问题。

function createAddItemWindow() {
//Create new window
addItemWindown = new BrowserWindow({
    width: 300,
    height: 200,
    title: 'Add Item',

    //The lines below solved the issue
    webPreferences: {
        nodeIntegration: true
    }
})}

That solved the issue for me. The solution was proposed here. Hopes this helps someone else. Cheers.

那为我解决了这个问题。此处提出了解决方案。希望这对其他人有帮助。干杯。

回答by Kamil Kie?czewski

ES6:In html include main js file using attribute type="module"(browser support):

ES6：在 html 中使用属性type="module"（浏览器支持）包含主 js 文件：

<script type="module" src="script.js"></script>

And in script.jsfile include another file like that:

在script.js文件中包含另一个这样的文件：

import { hello } from './module.js';
...
// alert(hello());

Inside included file (module.js) you must export function/classthat you will import

在包含文件 ( module.js) 中，您必须导出将导入的函数/类

export function hello() {
    return "Hello World";
}

Working example here.

工作示例在这里。

回答by ydanila

In my case I used another solution.

就我而言，我使用了另一种解决方案。

As project doesn't require CommonJs and it must have ES3 compatibility (modules not supported) all you need is just remove all exportand importstatements from your code, because your tsconfigdoesn't contain

由于项目不需要 CommonJs 并且它必须具有 ES3 兼容性（不支持模块），您只需要从代码中删除所有导出和导入语句，因为您的tsconfig不包含

"module": "commonjs"

But use import and export statements in your referenced files

但是在引用的文件中使用 import 和 export 语句

import { Utils } from "./utils"
export interface Actions {}

Final generated code will always have(at least for typescript 3.0) such lines

最终生成的代码将始终具有（至少对于 typescript 3.0）这样的行

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();

回答by Wael Chorfan

Even using this won't work , I think the best solution is browserify:

即使使用它也不起作用，我认为最好的解决方案是 browserify：

module.exports = {
  func1: function () {
   console.log("I am function 1");
  },
  func2: function () {
    console.log("I am function 2");
  }
};

-getFunc1.js-
var common = require('./common');
common.func1();

回答by eaithy

This Worked For Me

这对我有用

1. save this file https://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. load into your HTML like this
   <script data-main="your-Scrpt.js" src="require.js"></script>
   Note!
   use: --> require(['moudle-name']) in "your-script.js"
   not require('moudle-name')
   const {ipcRenderer} = require(['electron'])
   Not : const {ipcRenderer} = require('electron')

1. 保存此文件https://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. 像这样加载到您的 HTML 中
   <script data-main="your-Scrpt.js" src="require.js"></script>
   注意！
   使用：--> require(['moudle-name']) in "your-script.js"
   不需要（'模块名称'）
   const {ipcRenderer} = require(['electron'])
   不是： const {ipcRenderer} = require('electron')