Question

所以，我正在用节点/ express + jade combo编写一个应用程序。

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

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

为了加载messages.js的内容（就像我在服务器端那样），然后加载该文件的调用函数。但是，require未在客户端定义，并且会引发Uncaught ReferenceError: require is not defined形式的错误。

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

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

Answer 1

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

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

您有三种选择：

使用<script>标记。
使用CommonJS实施。同步依赖，如Node.js
使用AMD实施。

CommonJS 客户端实现包括：

（大部分需要在部署之前进行构建步骤）

Browserify - 您可以在浏览器中使用大多数Node.js模块。这是我个人的最爱。
Webpack - 做所有事情（捆绑JS，CSS等）。受到React.js激增的欢迎。因其艰难的学习曲线而臭名昭着。
Rollup - 新的竞争者。利用ES6模块。包括树木震动能力（删除未使用的代码）。

您可以详细了解我对Browserify vs (deprecated) Component的比较。

AMD 实施包括：

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

注意，在搜索选择哪一个时，您会看到Bower。 Bower仅用于包依赖，并且在模块定义（如CommonJS和AMD）上不受影响。

希望这会有所帮助。

Answer 2

ES6：在html中，使用属性type="module"（browser support）包含主要js文件：

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

在script.js文件中，包含另一个类似的文件：

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

在“ module.js”中，您必须export function/class要导入

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

工作example here。

Answer 3

替换所有require语句以导入语句。示例：

//BEFORE:
const Web3 = require('web3');
//AFTER:
import Web3 from 'web3';

为我工作。

Answer 4

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

Answer 5

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

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

"module": "commonjs"

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

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

最终生成的代码将始终（至少对于打字稿3.0而言）具有此类行

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

Answer 6

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

.up {
    z-index: 9999;
    display: block;
    position: fixed;
    bottom: 70px;
    right: 23px;
    padding: 0;
    overflow: hidden;
    outline: none;
    border: none;
    border-radius: 2px;
}

iframe {
    width: 1px !important;
    min-width: 100% !important;
    border: none !important;
    overflow: hidden !important;
    height: 1973px !important;
    z-index: 1;

Answer 7

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

const {ipcRenderer} = require('electron')

引发未捕获的ReferenceError：需求未定义

通过在最初在主进程中创建浏览器窗口（嵌入此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
    }
})}

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

Answer 8

这对我有用

保存此文件https://requirejs.org/docs/release/2.3.5/minified/require.js
像这样将其加载到HTML中
<script data-main="your-Scrpt.js" src="require.js"></script>
注意！
使用：->“ your-script.js”中的require（['moudle-name']）
~~不需要（'moudle-name'）~~
const {ipcRenderer} = require（['electron']）
不是：const {ipcRenderer} = require（'electron'）

Answer 9

我确认，

我们必须添加

webPreferences：{ nodeIntegration：正确 }

例如： mainWindow = new BrowserWindow（{webPreferences：{ nodeIntegration：正确 }}）

对我来说，问题已经解决

节点上的客户端：未捕获的ReferenceError：未定义require

9 个答案: