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

Question

所以,我正在用node/express + jade combo编写一个应用程序.

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

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

为了加载messages.js(就像我在服务器端一样)的内容,然后加载该文件的调用函数.但是,require没有在客户端定义,它会抛出窗体的错误Uncaught ReferenceError: require is not defined.

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

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

Answer 1

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

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

你有三个选择:

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

CommonJS客户端实现包括:

(大部分需要在部署之前进行构建步骤)

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

您可以阅读有关Browserify与Component的比较的更多信息.

AMD实施包括:

1. RequireJS - 在客户端JavaScript开发人员中非常受欢迎.不是我的品味,因为它的异步性质.

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

希望这会有所帮助.

Answer 2

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

const {ipcRenderer} = require('electron')

引发Uncaught ReferenceError：未定义require

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

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

Answer 3

ES6:在html中包含使用属性的主js文件type="module"(浏览器支持):

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

并在script.js文件中包含另一个文件:

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

在'module.js'中,您必须导出要导入的函数/类

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

这里的工作示例.

Answer 4

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

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

// After:
import Web3 from 'web3';

它对我有用。

Answer 5

这对我有用

1. 从RequireJS 下载页面获取最新版本
   这是我们将使用的 RequestJS 文件。
2. 将其加载到您的 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')