Client sul nodo: Uncaught ReferenceError: require non è definito

Quindi, sto scrivendo un’applicazione con il nodo / express + jade combo.

Ho client.js , che viene caricato sul client. In quel file ho un 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, require non è definito sul lato client e genera un errore nella forma Uncaught ReferenceError: require is not defined .

Questi altri file JS sono anche caricati in runtime 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 richiamare queste funzioni da questi altri file JS (come messages.js ) nel file client.js principale che apre il socket sul server?

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

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

Hai tre opzioni:

  1. Usa il 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 richiede un passo di costruzione prima della distribuzione)

  1. Browserify : puoi 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 contendente. Utilizza i moduli ES6. Include abilità di scuotimento degli alberi (rimuove il codice inutilizzato).

Puoi leggere ulteriori informazioni sul mio confronto tra Browserify e Component .

Le implementazioni di AMD includono:

  1. RequireJS - Molto popolare tra gli sviluppatori JavaScript lato client. Non è il mio gusto per la sua natura asincrona.

Nota, nella tua ricerca per scegliere quale scegliere, leggi Bower . Bower è solo per le dipendenze dei pacchetti e non è propedeutico alle definizioni dei moduli come CommonJS e AMD.

Spero che questo aiuti alcuni.

ES6: In html include il file js principale usando attribute type="module" ( supporto browser ):

  

E nel file script.js include un altro file simile:

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

In ‘module.js’ è necessario esportare la funzione / class che si importerà

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

Esempio di lavoro qui .

Nel mio caso ho usato un’altra soluzione.

Poiché il progetto non richiede CommonJs e deve avere compatibilità ES3 (moduli non supportati) tutto ciò di cui hai bisogno è semplicemente rimuovere tutte le istruzioni di esportazione e importazione dal tuo codice , perché il tuo 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 typescript 3.0) tali linee

 "use strict"; exports.__esModule = true; var utils_1 = require("./utils"); .... utils_1.Utils.doSomething(); 
 Even using this won't work , I think the best solution is browserify -common.js- 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();