Client op Node.js: Uncaught ReferenceError: vereisen is niet gedefinieerd

Ik schrijf een applicatie met de Node.js, Express.js en Jade combinatie.

Ik heb bestand client.js, dat op de client is geladen. In dat bestand heb ik code die functies aanroept uit andere JavaScript-bestanden. Mijn poging was om

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

om de inhoud van messages.js te laden (net zoals ik aan de serverkant doe) en later functies uit dat bestand aan te roepen. require is echter niet gedefinieerd aan de clientzijde, en het genereert een fout van de vorm Uncaught ReferenceError: require is not defined.

Deze andere JavaScript-bestanden worden ook tijdens runtime bij de client geladen, omdat ik de links in de kop van de webpagina plaats. De client kent dus alle functies die uit deze andere bestanden worden geëxporteerd.

Hoe roep ik deze functies aan vanuit deze andere JavaScript-bestanden (zoals messages.js) in het hoofdbestand client.js dat de socket naar de server opent?

Antwoord 1, autoriteit 100%

Dit komt omdat require() niet bestaat in de browser/client-side JavaScript.

Nu zult u een aantal keuzes moeten maken over uw JavaScript-scriptbeheer aan de clientzijde.

Je hebt drie opties:

1. Gebruik de <script>-tag.
2. Gebruik een CommonJS-implementatie. Het heeft synchrone afhankelijkheden zoals Node.js
3. Gebruik een asynchrone moduledefinitie (AMD) implementatie.

CommonJS client-side-implementaties omvatten (de meeste vereisen een build-stap voordat u implementeert):

1. Browserify – U kunt de meeste Node.js-modules in de browser gebruiken. Dit is mijn persoonlijke favoriet.
2. Webpack – Doet alles (bundelt JavaScript-code, CSS, enz.). Het werd populair gemaakt door de opkomst van React, maar het is berucht om zijn moeilijke leercurve.
3. Rollup – een nieuwe kanshebber. Het maakt gebruik van ES6-modules en bevat mogelijkheden om bomen te schudden (verwijdert ongebruikte code).

Je kunt meer lezen over mijn vergelijking van Browserify versus (verouderde) component.

AMD-implementaties omvatten:

1. RequireJS – Zeer populair onder client-side JavaScript-ontwikkelaars. Het is niet mijn smaak vanwege het asynchrone karakter.

Let op, bij het zoeken naar de juiste keuze, lees je over Bower. Bower is alleen bedoeld voor pakketafhankelijkheden en heeft geen mening over moduledefinities zoals CommonJS en AMD.

Antwoord 2, autoriteit 12%

Ik kom uit een Electron-omgeving, waar ik IPC communicatie tussen een rendererproces en het hoofdproces. Het rendererproces bevindt zich in een HTML-bestand tussen scripttags en genereert dezelfde fout.

De lijn

const {ipcRenderer} = require('electron')

gooit de Uncaught ReferenceError: required is niet gedefinieerd

Ik heb dat kunnen omzeilen door Node.js-integratie als true te specificeren toen het browservenster (waar dit HTML-bestand is ingesloten) oorspronkelijk in het hoofdproces werd gemaakt.

function createAddItemWindow() {
    // Create a new window
    addItemWindown = new BrowserWindow({
        width: 300,
        height: 200,
        title: 'Add Item',
        // The lines below solved the issue
        webPreferences: {
            nodeIntegration: true
        }
})}

Dat loste het probleem voor mij op. De oplossing is hier voorgesteld.

Antwoord 3, autoriteit 9%

ES6: Neem in HTML het JavaScript-hoofdbestand op met het kenmerk type="module" (browserondersteuning):

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

En voeg in het bestand script.js nog een bestand toe zoals dit:

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

In het meegeleverde bestand (module.js) moet u exporteer de functie/klasse die u gaat importeren:

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

Een werkend voorbeeld is hier. Meer informatie is hier.

Antwoord 4, autoriteit 3%

Vervang alle require-instructies door import-instructies. Voorbeeld:

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

Het werkte voor mij.

Antwoord 5

Zelfs als je dit gebruikt, werkt het niet. Ik denk dat de beste oplossing is 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();

Antwoord 6

In mijn geval heb ik een andere oplossing gebruikt.

Omdat het project geen CommonJS vereist en ES3-compatibiliteit moet hebben (modules niet ondersteund), hoeft u alleen maar alle instructies voor export en import te verwijderen van uw code, omdat uw tsconfig geen

. bevat

"module": "commonjs"

Maar gebruik import- en exportverklaringen in uw bestanden waarnaar wordt verwezen

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

Uiteindelijk gegenereerde code heeft altijd (tenminste voor TypeScript 3.0) dergelijke regels

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

Antwoord 7

window = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

Antwoord 8

Dit werkte voor mij

1. Bewaar het bestand https://requirejs.org/docs/ release/2.3.5/minified/require.js. Het is het bestand voor RequestJS dat we zullen gebruiken.
2. Laad het als volgt in uw HTML-inhoud:
   <script data-main="your-script.js" src="require.js"></script>

Opmerkingen!

Gebruik require(['moudle-name']) in your-script.js,
niet require('moudle-name')

Gebruik const {ipcRenderer} = require(['electron']),
niet const {ipcRenderer} = require('electron')

Antwoord 9

Ik bevestig. We moeten toevoegen:

webPreferences: {
    nodeIntegration: true
}

Bijvoorbeeld:

mainWindow = new BrowserWindow({webPreferences: {
    nodeIntegration: true
}});

Voor mij is het probleem daarmee opgelost.