wake-up-neo.com

Client auf Knoten: Nicht abgerufen ReferenceError: erforderlich ist nicht definiert

Also schreibe ich eine Anwendung mit der Kombination aus Knoten, Express und Jade.

Ich habe client.js, der auf dem Client geladen ist. In dieser Datei habe ich Code, der Funktionen aus anderen JavaScript-Dateien aufruft. Mein Versuch war zu benutzen

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

um den Inhalt von messages.js zu laden (genau wie auf der Serverseite) und später Funktionen aus dieser Datei aufzurufen. require ist jedoch auf der Clientseite nicht definiert und gibt einen Fehler in der Form Uncaught ReferenceError: require is not defined aus.

Diese anderen JS-Dateien werden zur Laufzeit auch auf dem Client geladen, weil ich die Links im Header der Webseite platziere. Der Client kennt also alle Funktionen, die aus diesen anderen Dateien exportiert werden.

Wie rufe ich diese Funktionen aus diesen anderen JS-Dateien (wie messages.js) in der client.js-Hauptdatei auf, die den Socket für den Server öffnet?

javascriptnode.jssocketsexpresspug
221
MightyMouse

Dies liegt daran, dass require() nicht im Browser/clientseitigen JavaScript vorhanden ist.

Jetzt müssen Sie einige Entscheidungen bezüglich der clientseitigen JavaScript-Skriptverwaltung treffen.

Sie haben drei Möglichkeiten:

  1. Verwenden Sie das <script>-Tag.
  2. Verwenden Sie eine CommonJS -Implementierung. Synchrone Abhängigkeiten wie Node.js 
  3. Verwenden Sie eine AMD -Implementierung. 

CommonJS clientseitige Implementierungen umfassen:

(Die meisten von ihnen erfordern vor dem Bereitstellen einen Build-Schritt).

  1. Browserify - Sie können die meisten Node.js-Module im Browser verwenden. Das ist mein persönlicher Favorit.
  2. Webpack - Macht alles (bündelt JS, CSS usw.). Bekannt gemacht durch den Anstieg von React.js. Bekannt für seine schwierige Lernkurve.
  3. Rollup - Neuer Anwärter. Nutzt ES6-Module. Enthält Tree-Shaking-Fähigkeiten (entfernt nicht verwendeten Code).

Sie können mehr über meinen Vergleich von Browserify vs Component lesen. 

AMD Implementierungen umfassen:

  1. RequireJS - Sehr beliebt bei clientseitigen JavaScript-Entwicklern. Nicht mein Geschmack wegen seiner asynchronen Natur.

Beachten Sie, dass Sie bei Ihrer Suche nach dem für Sie passenden auswählen, über Bower . Bower ist nur für Paketabhängigkeiten und wird von Moduldefinitionen wie CommonJS und AMD nicht verwendet. 

Hoffe das hilft einigen. 

338
JP Richardson

ES6: In html Include-Haupt-js-Datei mit dem Attribut type="module" ( Browserunterstützung ):

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

Und in script.js file füge eine andere Datei wie diese ein:

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

In 'module.js' müssen Sie Exportfunktion/Klasse importieren

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

Arbeit Beispiel hier .

10
Kamil Kiełczewski

In meinem Fall habe ich eine andere Lösung verwendet.

Da das Projekt keine CommonJs erfordert und ES3-Kompatibilität haben muss (Module werden nicht unterstützt), brauchen Sie nur entfernen Sie alle export - und import -Anweisungen aus Ihrem code , weil Ihre tsconfig enthält nicht

"module": "commonjs"

Verwenden Sie jedoch Import- und Exportanweisungen in Ihren referenzierten Dateien

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

Der endgültig generierte Code enthält (zumindest für TypeScript 3.0) immer solche Zeilen 

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();
1
ydanila

Selbst wenn dies nicht funktioniert, denke ich, ist die beste Lösung Browser-Browser:

-common.js-
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();
0
Wael Chorfan

Ich komme aus einer Elektronenumgebung, in der ich IPC Kommunikation zwischen einem Renderer-Prozess und dem Hauptprozess benötige. Der Renderer-Prozess befindet sich in einer HTML-Datei zwischen Skript-Tags und generiert denselben Fehler. Die Linie

const {ipcRenderer} = require('electron')

wirft den Uncaught ReferenceError: require ist nicht definiert

Ich konnte das umgehen, indem ich die Knotenintegration als wahr angab, als das Browserfenster (in das diese HTML-Datei eingebettet ist) ursprünglich im Hauptprozess erstellt wurde.

function createAddItemWindow() {
//Create new window
addItemWindown = new BrowserWindow({
    width: 300,
    height: 200,
    title: 'Add Item',

    //The lines below solved the issue
    webPreferences: {
        nodeIntegration: true
    }
})}

Das hat das Problem für mich gelöst. Die Lösung wurde vorgeschlagen hier . Hoffe das hilft jemand anderem. Prost.

0
Kibonge Murphy