Client on Node.js: Uncaught ReferenceError: require未定义

我正在用Node.js, Express.js和玉组合写一个应用程序。

我有文件client.js，它被加载在客户端。在这个文件中，我有调用其他JavaScript文件的函数的代码。我的尝试是利用

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

以便加载messages.js的内容(就像我在服务器端所做的那样)，然后从该文件调用函数。然而，require并没有在客户端定义，它会抛出一个形式为Uncaught ReferenceError: require is not defined的错误。

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

如何从打开到服务器的套接字的主client.js文件中的这些其他JavaScript文件(如messages.js)调用这些函数?

1265917 次浏览
小开
最佳答案

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

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

你有三个选择:

  1. 使用<script>标记。
  2. 使用CommonJS实现。它有像Node.js一样的同步依赖
  3. 使用异步模块定义 (AMD)实现。

CommonJS客户端实现包括(其中大多数在部署之前需要一个构建步骤):

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

你可以阅读更多关于我的Browserify vs(已弃用)Component的比较。

AMD实现包括:

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

注意，在你搜索选择哪一个去，你会读到关于鲍尔。Bower只适用于包的依赖关系，不适用于CommonJS和AMD等模块定义。

小开

在HTML中，使用属性type="module" (浏览器支持)包含主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";
}

一个工作的例子在这里。更多信息见在这里。

小开

在我的例子中，我使用了另一种解决方案。

因为这个项目不需要CommonJS，而且它必须与ES3兼容(不支持模块)，你所需要的只是从代码中删除所有export和import语句，因为你的tsconfig不包含

"module": "commonjs"

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

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

最终生成的代码总是有这样的行(至少对于TypeScript 3.0是这样)

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

即使使用这个也没用。我认为最好的解决方案是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();
小开

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

这条线

const {ipcRenderer} = require('electron')

抛出Uncaught ReferenceError: require没有定义

当浏览器窗口(嵌入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
}
})}

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

小开

这对我很有效

  1. 从RequireJS下载页面
    中获取最新版本 它是我们将要使用的RequestJS文件 像这样把它加载到你的HTML内容中: 李<script data-main="your-script.js" src="require.js"></script> < br > < / >

笔记!

使用 require(['moudle-name']) in your-script.js， 不是require('moudle-name') < / p > < p > 使用 const {ipcRenderer} = require(['electron']), 不是const {ipcRenderer} = require('electron') < / p >

小开

将所有require语句替换为import语句。例子:

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


// After:
import Web3 from 'web3';

这对我很管用。

小开

我确认。我们必须补充:

webPreferences: {
nodeIntegration: true
}

例如:

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

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

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

人们在问什么是脚本标记方法。下面就是:

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

或来自网络:

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

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

小开

我试图用webpack构建节拍。在我的包裹里。我必须删除“type":“module"部分. json。

enter image description here


提交答案