Client sul nodo: Riferimento non rilevato Errore: requisito non definito

Quindi, sto scrivendo un'applicazione con la combinazione node / express + jade.

Ho client.js, che viene caricato sul client. In quel file ho il codice che chiama le funzioni da altri file JavaScript. Il mio tentativo era di usare

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

per caricare il contenuto di messages.js(proprio come faccio sul lato server) e successivamente le funzioni di chiamata da quel file. Tuttavia, requirenon è definito sul lato client e genera un errore del modulo Uncaught ReferenceError: require is not defined.

Questi altri file JS vengono inoltre caricati in fase di esecuzione sul client perché inserisco i collegamenti nell'intestazione della pagina Web. Quindi il client conosce tutte le funzioni che vengono esportate da questi altri file.

Come posso chiamare queste funzioni da questi altri file JS (come messages.js) nel client.jsfile principale che apre il socket al server?

Questo perché require()non esiste nel browser / lato client JavaScript.

Ora dovrai fare alcune scelte sulla gestione degli script JavaScript sul lato client.

Hai tre opzioni:

1. Usa <script>tag.
2. Utilizzare un'implementazione CommonJS . Dipendenze sincrone come Node.js
3. Utilizzare un'implementazione AMD .

Le implementazioni lato client di CommonJS includono:

(la maggior parte di essi richiede un passaggio di compilazione prima della distribuzione)

1. Browserify : è possibile utilizzare la maggior parte dei moduli Node.js nel browser. Questo è il mio preferito.
2. Webpack : fa tutto (bundle JS, CSS, ecc.). Reso popolare dall'ondata di React.js. Famoso per la sua difficile curva di apprendimento.
3. Rollup - Nuovo concorrente. Sfrutta i moduli ES6. Include abilità di agitazione degli alberi (rimuove il codice inutilizzato).

Puoi leggere di più sul mio confronto di Browserify vs (obsoleto) Componente .

Le implementazioni AMD includono:

1. RequireJS : molto popolare tra gli sviluppatori JavaScript sul lato client. Non è un mio gusto a causa della sua natura asincrona.

Nota, nella tua ricerca per scegliere con quale andare, leggerai di Bower . Bower è solo per le dipendenze dei pacchetti ed è non adottato su definizioni di moduli come CommonJS e AMD.

Spero che questo aiuti alcuni.

Vengo da un ambiente elettronico, dove ho bisogno della comunicazione IPC tra un processo di rendering e il processo principale. Il processo di rendering si trova in un file HTML tra i tag di script e genera lo stesso errore. La linea

const {ipcRenderer} = require('electron')

genera l' errore di riferimento non rilevato: il requisito non è definito

Sono stato in grado di aggirare il problema specificando l'integrazione del nodo come vera quando la finestra del browser (in cui è incorporato questo file HTML) è stata originariamente creata nel processo principale.

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

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

Ciò ha risolto il problema per me. La soluzione è stata proposta qui . Spero che questo aiuti qualcun altro. Saluti.

ES6: in html includere il file js principale usando l'attributo type="module"( supporto del browser ):

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

E nel script.jsfile includere un altro file del genere:

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

All'interno del file incluso ( module.js) è necessario esportare la funzione / classe che verrà importata

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

Esempio di lavoro qui .

Nel mio caso ho usato un'altra soluzione.

Dato che il progetto non richiede CommonJs e deve avere la compatibilità ES3 (moduli non supportati) tutto ciò di cui hai bisogno è semplicemente rimuovere tutte le istruzioni di esportazione e importazione dal tuo codice , perché tsconfig non contiene

"module": "commonjs"

Ma usa le istruzioni di importazione ed esportazione nei tuoi file di riferimento

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

Il codice generato finale avrà sempre (almeno per dattiloscritto 3.0) tali righe

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

Anche usando questo non funzionerà, penso che la soluzione migliore sia 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();

Questo ha funzionato per me

1. salva questo file https://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. carica nel tuo HTML in questo modo
   <script data-main="your-Scrpt.js" src="require.js"></script>
   Nota!
   usa: -> require (['moudle-name']) in "your-script.js"
   non richiesto ('moudle-name')
   const {ipcRenderer} = require (['electron'])
   Not: const {ipcRenderer} = require ('electron')