客户端节点：未定义的引用错误：要求

Question

客户端节点：未定义的引用错误：要求所以，我正在用节点/快递+翡翠组合编写一个应用程序。我有过client.js，它被加载到客户机上。在该文件中，我有从其他JavaScript文件调用函数的代码。我的企图是利用var m = require('./messages');的内容messages.js(就像我在服务器端所做的那样)以及稍后从该文件调用函数。然而，require在客户端未定义，则会引发窗体的错误。Uncaught ReferenceError: require is not defined.这些其他JS文件也是在运行时在客户端加载的，因为我将链接放在网页的页眉处。因此，客户端知道从这些其他文件导出的所有函数。如何从这些其他JS文件调用这些函数(如messages.js)主要client.js打开服务器套接字的文件？

Answer 1

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

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

你有三个选择：

1. 使用

   <script>

   标签。
2. 用

   CommonJS

   执行。像Node.js这样的同步依赖关系
3. 用

   AMD

   执行。

CommonJS客户端-实现包括：

(它们中的大多数在部署之前都需要一个构建步骤)

1. 褐化

   -您可以在浏览器中使用大多数Node.js模块。这是我个人的最爱。

2. WebPack

   -无所不包(包JS、CSS等)。因为React.js的激增而流行。因学习困难而声名狼藉。

3. 卷起

   -新竞争者。利用ES6模块。包括树震动能力(删除未使用的代码)。

你可以读到更多关于我比较Browserify VS(不推荐)组件.

AMD实现包括：

1. RequireJS

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

请注意，在您寻找选择与哪一个选择时，您将阅读有关鲍尔..Bower只适用于包依赖关系，并且对像CommonJS和AMD这样的模块定义没有意见。

希望这能帮上忙。

Answer 2

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 3

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

由于项目不需要CommonJ，而且它必须具有ES3兼容性(模块不受支持)，您所需要的只是移除所有出口和进口代码中的语句，因为你的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();