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

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

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

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

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

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


当前回答

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

其他回答

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

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

你有三个选择:

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

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

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

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

AMD实现包括:

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

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

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

由于项目不需要CommonJS,它必须具有ES3兼容性(模块不支持),你所需要的只是从你的代码中删除所有的导出和导入语句,因为你的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();
window = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

这对我很有效

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

笔记!

在your-script.js中使用require([' module -name']), 不需要(“moudle-name”)

使用const {ipcRenderer} = require(['electron']), not const {ipcRenderer} = require('电子')

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

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

// After:
import Web3 from 'web3';

这对我很管用。