[英]Client on Node.js: Uncaught ReferenceError: require is not defined
我正在使用 Node.js、Express.js 和Jade组合编写一个应用程序。
我有文件client.js
,它已加载到客户端。 在该文件中,我有从其他 JavaScript 文件调用函数的代码。 我的尝试是使用
var m = require('./messages');
为了加载messages.js
的内容(就像我在服务器端所做的那样),然后从该文件调用函数。 但是,客户端未定义require
,它会抛出Uncaught ReferenceError: require is not defined
形式的错误。
这些其他 JavaScript 文件也在客户端运行时加载,因为我将链接放在网页的 header。 所以客户端知道从这些其他文件导出的所有功能。
如何从打开服务器套接字的主client.js
文件中的这些其他 JavaScript 文件(例如messages.js
)调用这些函数?
这是因为require()
在浏览器/客户端 JavaScript 中不存在。
现在,您将不得不对客户端 JavaScript 脚本管理做出一些选择。
你有三个选择:
CommonJS客户端实现包括(其中大多数在部署之前需要构建步骤):
您可以阅读更多关于我对Browserify 与(已弃用)组件的比较。
AMD实施包括:
请注意,在您选择使用哪一个时,您将阅读有关Bower的信息。 Bower 仅用于包依赖项,对 CommonJS 和 AMD 等模块定义没有意见。
我来自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
}
})}
这为我解决了这个问题。 这里提出了解决方案。
ES6:在 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";
}
用import
语句替换所有require
语句。 例子:
// Before:
const Web3 = require('web3');
// After:
import Web3 from 'web3';
它对我有用。
这对我有用
<script data-main="your-script.js" src="require.js"></script>
笔记!
在your-script.js
中使用require(['moudle-name'])
,而不是require('moudle-name')
使用const {ipcRenderer} = require(['electron'])
,而不是const {ipcRenderer} = require('electron')
就我而言,我使用了另一种解决方案。
由于该项目不需要 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();
即使使用它也行不通。 我认为最好的解决方案是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();
window = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
我确定。 我们必须补充:
webPreferences: {
nodeIntegration: true
}
例如:
mainWindow = new BrowserWindow({webPreferences: {
nodeIntegration: true
}});
对我来说,问题已经解决了。
人们在问什么是脚本标记方法。 这里是:
<script src='./local.js'></script>.
或来自网络:
<script src='https://mycdn.com/myscript.js'></script>
您需要为您的脚本插入正确的 url。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.