Client auf Knoten: Nicht erfasster Referenzfehler: Erforderlich ist nicht definiert

Also schreibe ich eine Anwendung mit der Kombination aus Knoten / Express + Jade.

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

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

um den Inhalt von messages.js(genau wie ich es auf der Serverseite tun) und später Funktionen aus dieser Datei aufzurufen. Ist requirejedoch nicht auf der Clientseite definiert und löst einen Fehler des Formulars aus Uncaught ReferenceError: require is not defined.

Diese anderen JS-Dateien werden ebenfalls zur Laufzeit auf dem Client geladen, da ich die Links in der Kopfzeile 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 (z. B. messages.js) in der Hauptdatei auf client.js, die den Socket für den Server öffnet?

Dies liegt daran, require()dass das browser- / clientseitige JavaScript nicht vorhanden ist.

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

Sie haben drei Möglichkeiten:

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

Zu den clientseitigen CommonJS -Implementierungen gehören:

(Die meisten von ihnen erfordern vor der Bereitstellung einen Erstellungsschritt.)

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 geworden durch die Welle von React.js. Bekannt für seine schwierige Lernkurve.
3. Rollup - Neuer Anwärter. Nutzt ES6-Module. Beinhaltet Baumschüttelfähigkeiten (entfernt nicht verwendeten Code).

Sie können mehr über meinen Vergleich von Browserify mit (veralteter) Komponente 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 der richtigen Option etwas über Bower lesen werden . Bower ist nur für Paketabhängigkeiten gedacht und nicht für Moduldefinitionen wie CommonJS und AMD geeignet.

Hoffe das hilft einigen.

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')

löst den Uncaught ReferenceError aus: require ist nicht definiert

Ich konnte dies umgehen, indem ich die Knotenintegration als true 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 hier vorgeschlagen . Hoffe das hilft jemand anderem. Prost.

ES6: In HTML enthalten Sie die Haupt-JS-Datei mit dem Attribut type="module"( Browser-Unterstützung ):

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

Und in der script.jsDatei enthalten Sie eine andere Datei wie diese:

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

In der enthaltenen Datei ( module.js) müssen Sie die Funktion / Klasse exportieren , die Sie importieren möchten

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

Arbeitsbeispiel hier .

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

Da das Projekt keine CommonJs erfordert und ES3-kompatibel sein muss (Module werden nicht unterstützt), müssen Sie lediglich alle Export- und Importanweisungen aus Ihrem Code entfernen , da Ihre tsconfig keine enthält

"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 immer (zumindest für Typoskript 3.0) solche Zeilen

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

Selbst wenn dies nicht funktioniert, ist browserify meiner Meinung nach die beste Lösung:

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();

Das hat bei mir funktioniert

1. Speichern Sie diese Datei https://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. Laden Sie wie folgt in Ihren HTML-
   <script data-main="your-Scrpt.js" src="require.js"></script>
   Code!
   Verwenden Sie: -> require (['moudle-name']) in "your-script.js"
   nicht erforderlich ('Moudle-Name')
   const {ipcRenderer} = erfordern (['Elektron'])
   Nicht: const {ipcRenderer} = erfordern ('Elektron')