javascript - Node.js 上的客户端：未捕获的 ReferenceError：未定义要求

Question

我正在使用 Node.js、Express.js 和Jade组合编写应用程序。

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

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

为了加载messages.js（就像我在服务器端做的那样）的内容，然后从该文件中调用函数。但是，require它没有在客户端定义，它会引发表单错误Uncaught ReferenceError: require is not defined。

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

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

score 542 · Accepted Answer

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

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

你有三个选择：

使用<script>标签。
使用CommonJS实现。它具有像 Node.js 这样的同步依赖项
使用异步模块定义(AMD) 实现。

CommonJS客户端实现包括（其中大多数在部署之前需要构建步骤）：

Browserify - 您可以在浏览器中使用大多数 Node.js 模块。这是我个人的最爱。
Webpack - 做所有事情（捆绑 JavaScript 代码、CSS 等）。它因 React 的激增而流行起来，但因其难以学习的曲线而臭名昭著。
Rollup - 一个新的竞争者。它利用 ES6 模块并包括摇树功能（删除未使用的代码）。

您可以阅读更多关于我对Browserify 与（已弃用）组件的比较。

AMD实施包括：

RequireJS - 在客户端 JavaScript 开发人员中非常流行。由于它的异步性质，这不是我的口味。

请注意，在您选择使用哪一个时，您将阅读有关Bower的信息。Bower 仅用于包依赖项，对 CommonJS 和 AMD 等模块定义没有意见。

score 77 · Accepted Answer

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

线

const {ipcRenderer} = require('electron')

抛出Uncaught ReferenceError: require is not defined

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

function createAddItemWindow() {

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

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

这为我解决了这个问题。这里提出了解决方案。

score 52 · Accepted Answer

ES6：type="module"在 HTML 中，使用属性（浏览器支持）包含主要的 JavaScript 文件：

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

在script.js文件中，包含另一个文件，如下所示：

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

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

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

一个工作示例是here。更多信息在这里。

score 24 · Accepted Answer

用语句替换所有require语句import。例子：

// Before:
const Web3 = require('web3');

// After:
import Web3 from 'web3';

它对我有用。

score 3 · Accepted Answer

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

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

"module": "commonjs"

但是在您引用的文件中使用导入和导出语句

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

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

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

score 3 · Accepted Answer

即使使用它也行不通。我认为最好的解决方案是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();

score 3 · Accepted Answer

这对我有用

从RequireJS 下载页面获取最新版本
这是我们将使用的 RequestJS 文件。
将其加载到您的 HTML 内容中，如下所示： <script data-main="your-script.js" src="require.js"></script>

笔记！

require(['moudle-name'])在中使用your-script.js，而不是require('moudle-name')

使用 const {ipcRenderer} = require(['electron'])，而不是const {ipcRenderer} = require('electron')

score 3 · Accepted Answer

window = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

score 1 · Accepted Answer

我确定。我们必须补充：

webPreferences: {
    nodeIntegration: true
}

例如：

mainWindow = new BrowserWindow({webPreferences: {
    nodeIntegration: true
}});

对我来说，问题已经解决了。

score 1 · Accepted Answer

人们在问什么是脚本标记方法。这里是：

<script src='./local.js'></script>.

或来自网络：

<script src='https://mycdn.com/myscript.js'></script>

您需要为您的脚本插入正确的 url。

score 0 · Accepted Answer

我正在尝试使用 webpack 构建 metronic。在我的 package.json 中，我必须删除 "type": "module" 部分。

javascript - Node.js 上的客户端：未捕获的 ReferenceError：未定义要求

11 回答 11

Related

Reference