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

JavaScript Node.js

JinJin小宇宙

2020-03-19

因此,我正在使用node / express + jade组合编写应用程序。

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

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

为了加载内容messages.js(就像我在服务器端一样),然后再加载该文件的调用函数。但是,require未在客户端定义,并且抛出形式的错误Uncaught ReferenceError: require is not defined

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

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

第2214篇《节点上的客户端:未捕获ReferenceError:未定义require》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
Pro阳光 2020.03.19

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

由于项目不需要CommonJs,并且必须具有ES3兼容性(不支持模块),因此您所需要做的就是从代码中删除所有exportimport语句,因为tsconfig不包含

"module": "commonjs"

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

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

最终生成的代码将始终具有(至少对于 TypeScript3.0而言)这样的行

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();
老丝米亚 2020.03.19

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

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

您有三种选择:

  1. 使用<script>标签。
  2. 使用CommonJS实现。同步依赖项,例如Node.js
  3. 使用AMD实施。

CommonJS客户端实现包括:

(其中大多数需要在部署之前进行构建)

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

您可以阅读有关我的Browserify与(不推荐使用)Component比较的更多信息

AMD的实现包括:

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

请注意,在搜索选择与之搭配的产品时,您会了解到BowerBower仅用于程序包依赖关系,并且在CommonJS和AMD等模块定义上不受质疑。

希望这会有所帮助。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android