Browser: Uncaught ReferenceError: require ist nicht definiert

Question

Ich habe eine Datei client.js, die auf der Client-Seite geladen wird. In dieser Datei habe ich Code, der Funktionen aus anderen JavaScript-Dateien aufruft. Mein Versuch war es,

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

zu verwenden, um den Inhalt von messages.js zu laden (genau wie auf der Server-Seite) und später Funktionen aus dieser Datei aufzurufen. Allerdings ist require auf der Client-Seite nicht definiert und wirft einen Fehler vom Typ Uncaught ReferenceError: require is not defined.

Diese anderen JavaScript-Dateien werden ebenfalls zur Laufzeit auf der Client-Seite geladen, da ich die Links im Header der Webseite platziere. Der Client kennt also alle Funktionen, die von diesen anderen Dateien exportiert werden.

Wie rufe ich diese Funktionen aus diesen anderen JavaScript-Dateien (wie z.B. messages.js) in der Hauptdatei client.js auf, die den Socket zum Server öffnet?

Answer 1

Dies liegt daran, dass require() in JavaScript für den Browser/nicht auf der Client-Seite nicht existiert.

Jetzt müssen Sie einige Entscheidungen über das Management Ihres JavaScript-Skripts auf der Client-Seite treffen.

Sie haben drei Optionen:

1. Verwenden Sie das </code>-Tag.</li> <li>Verwenden Sie eine <a href="http://wiki.commonjs.org/wiki/CommonJS" rel="noreferrer">CommonJS</a>-Implementierung. Es hat synchrone Abhängigkeiten wie Node.js</li> <li>Verwenden Sie eine <a href="http://requirejs.org/docs/whyamd.html" rel="noreferrer">asynchrone Moduldefinition</a> (AMD)-Implementierung.</li> </ol> <p><strong>CommonJS</strong>-Implementierungen auf der Client-Seite umfassen (die meisten von ihnen erfordern einen Build-Schritt, bevor sie bereitgestellt werden):</p> <ol> <li><a href="https://github.com/substack/node-browserify" rel="noreferrer">Browserify</a> - Sie können die meisten Node.js-Module im Browser verwenden. Das ist mein persönlicher Favorit.</li> <li><a href="https://webpack.github.io/" rel="noreferrer">Webpack</a> - Macht alles (bündelt JavaScript-Code, CSS etc.). Es wurde durch den Anstieg von React populär, hat aber einen berüchtigten steilen Lernkurve.</li> <li><a href="http://rollupjs.org/" rel="noreferrer">Rollup</a> - ein neuer Herausforderer. Er nutzt ES6-Module und verfügt über Tree-Shaking-Fähigkeiten (entfernt nicht genutzten Code).</li> </ol> <p>Sie können mehr über meinen Vergleich von <a href="http://procbits.com/2013/06/17/client-side-javascript-management-browserify-vs-component" rel="noreferrer">Browserify vs (deprecated) Component</a> lesen.</p> <p><strong>AMD</strong>-Implementierungen umfassen:</p> <ol> <li><a href="http://requirejs.org/" rel="noreferrer">RequireJS</a> - Sehr beliebt bei Client-Seite-JavaScript-Entwicklern. Es ist nicht mein Geschmack wegen seiner asynchronen Natur.</li> </ol> <p>Beachten Sie, dass Sie bei der Entscheidung, welche Methode Sie nutzen möchten, auch über <a href="https://github.com/bower/bower" rel="noreferrer">Bower</a> lesen werden. Bower dient nur für Paketabhängigkeiten und hat keine festgelegte Meinung zu Moduldefinitionen wie CommonJS und AMD.</p></x-turndown>

Answer 2

Ich komme aus einer Electron-Umgebung, 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 Zeile

const {ipcRenderer} = require('electron')

wirft den Uncaught ReferenceError: require is not defined

Ich konnte das umgehen, indem ich die Node.js-Integration als true festgelegt habe, als das Browserfenster (in dem diese HTML-Datei eingebettet ist) ursprünglich im Hauptprozess erstellt wurde.

function createAddItemWindow() {

    // Ein neues Fenster erstellen
    addItemWindown = new BrowserWindow({
        width: 300,
        height: 200,
        title: 'Add Item',

        // Die folgenden Zeilen haben das Problem gelöst
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
})}

Das hat das Problem für mich gelöst. Die Lösung wurde hier vorgeschlagen.

Answer 3

ES6: In HTML, include the main JavaScript file using attribute type="module" (Browser-Unterstützung):

Und in der Datei script.js eine weitere Datei einbinden:

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

In der eingeschlossenen Datei (module.js) müssen Sie die Funktion/Klasse exportieren, die Sie importieren werden:

export function hello() {
    return "Hallo Welt";
}

Ein funktionierendes Beispiel finden Sie hier. Weitere Informationen finden Sie hier.

Answer 4

Ersetzen Sie alle require-Anweisungen durch import-Anweisungen. Beispiel:

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

// Nachher:
import Web3 from 'web3';

Es hat bei mir funktioniert.

Answer 5

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

Da das Projekt kein CommonJS erfordert und es kompatibel mit ES3 sein muss (Module nicht unterstützt), müssen Sie einfach alle export und import Anweisungen aus Ihrem Code entfernen, da Ihr tsconfig nicht enthält

"module": "commonjs"

Aber verwenden Sie import- und export-Anweisungen in Ihren referenzierten Dateien

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

Der generierte Endcode wird immer (zumindest für TypeScript 3.0) solche Zeilen enthalten

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