Utilizzo dei moduli Node.js in HTML

Ho il seguente progetto Node.js (che è un esempio di lavoro minimo del mio problema):

module1.js :

module.exports = function() { return "this is module1!"; }; 

module2.js :

 var module1 = require('./module1'); module.exports = function() { return module1()+" and this is module2!"; }; 

server.js :

 var module2 = require('./module2'); console.log(module2()); // prints: "this is module1! and this is module2!" 

Ora voglio creare un file client.html che utilizzi anche module2.js. Ecco cosa ho provato (e fallito):

versione ingenua :

  alert(module2()); // should alert: "this is module1! and this is module2!" 

Questo ovviamente non funziona – produce due errori:

  • ReferenceError: require non è definito.
  • ReferenceError: module2 non è definito.

Utilizzo di Node-Browserify : Dopo l’esecuzione:

 browserify module2.js > module2.browserified.js 

Ho cambiato client.html in:

   var module2 = require('module2'); alert(module2());  

Questo non funziona – produce un errore:

  • ReferenceError: module2 non è definito.

Usando Smoothie.js da @Torben:

   var module2 = require('module2'); alert(module2());  

Questo non funziona – produce tre errori:

  • errore di syntax su module2.js linea 1.
  • SmoothieError: imansible caricare module2 (0)
  • TypeError: module2 non è una funzione

Ho guardato a require.js ma sembra troppo complicato da combinare con Node.js – Non ho trovato un semplice esempio che prende solo un modulo Node.js esistente e lo carica in una pagina web (come nell’esempio).

Ho guardato head.js e lab.js ma non ho trovato alcuna menzione del fabbisogno di Node.js.

Quindi, cosa dovrei fare per utilizzare il mio modulo Node.js esistente, module2.js, da una pagina HTML?

Il problema è che stai usando i moduli CJS, ma provi ancora a giocare alla vecchia maniera con gli script inline. Non funzionerà, è questo o quello.

Per sfruttare appieno lo stile CJS, organizza il tuo codice lato client esattamente come faresti per il lato server, quindi:

Crea client.js:

 var module2 = require('./module2'); console.log(module2()); // prints: "this is module1! and this is module2!" 

Crea un pacchetto con Browserify (o un altro bundler CJS di tua scelta):

 browserify client.js > client.bundle.js 

Includi bundle generato in HTML:

  

Dopo aver caricato la pagina dovresti vedere “questo è module1! E questo è module2!” nella console del browser

Puoi anche provare simq con cui posso aiutarti.

I tuoi problemi con Smoothie Require, sono stati causati da un bug ( https://github.com/letorbi/smoothie/issues/3 ). Il mio ultimo commit ha corretto questo bug, quindi il tuo esempio dovrebbe funzionare senza modifiche.