Browserify – Come chiamare la funzione raggruppata in un file generato tramite browserify nel browser

Sono nuovo di nodejs e browserify. Ho iniziato con questo link .

Ho il file main.js che contiene questo codice

var unique = require('uniq'); var data = [1, 2, 2, 3, 4, 5, 5, 5, 6]; this.LogData =function(){ console.log(unique(data)); }; 

Ora installo il modulo uniq con npm:

  npm install uniq 

Quindi raggruppo tutti i moduli necessari a partire da main.js in un unico file chiamato bundle.js con il comando browserify:

 browserify main.js -o bundle.js 

Il file generato è simile al seguente:

 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ var unique = require('uniq'); var data = [1, 2, 2, 3, 4, 5, 5, 5, 6]; this.LogData =function(){ console.log(unique(data)); }; },{"uniq":2}],2:[function(require,module,exports){ "use strict" function unique_pred(list, compare) { var ptr = 1 , len = list.length , a=list[0], b=list[0] for(var i=1; i<len; ++i) { b = a a = list[i] if(compare(a, b)) { if(i === ptr) { ptr++ continue } list[ptr++] = a } } list.length = ptr return list } function unique_eq(list) { var ptr = 1 , len = list.length , a=list[0], b = list[0] for(var i=1; i<len; ++i, b=a) { b = a a = list[i] if(a !== b) { if(i === ptr) { ptr++ continue } list[ptr++] = a } } list.length = ptr return list } function unique(list, compare, sorted) { if(list.length === 0) { return [] } if(compare) { if(!sorted) { list.sort(compare) } return unique_pred(list, compare) } if(!sorted) { list.sort() } return unique_eq(list) } module.exports = unique },{}]},{},[1]) 

Dopo aver incluso il file bundle.js nella mia pagina index.htm, come posso chiamare la funzione logData ??

Per impostazione predefinita, browserify non ti consente di accedere ai moduli dall’esterno del codice browserizzato: se desideri chiamare il codice in un modulo browserificato, dovrai browserizzare il codice insieme al modulo. Vedi http://browserify.org/ per esempi di questo.

Naturalmente, puoi anche rendere esplicitamente accessibile il tuo metodo dall’esterno in questo modo:

 window.LogData =function(){ console.log(unique(data)); }; 

Quindi puoi chiamare LogData() da qualsiasi altro punto della pagina.

La parte fondamentale del raggruppamento di moduli standalone con Browserify è l’opzione – --s . Espone tutto ciò che esporti dal tuo modulo usando module.exports del nodo come variabile globale. Il file può quindi essere incluso in un tag .

Hai solo bisogno di farlo se per qualche ragione hai bisogno che la variabile globale sia esposta. Nel mio caso il cliente aveva bisogno di un modulo standalone che potesse essere incluso nelle pagine web senza che dovessero preoccuparsi di questo business di Browserify.

Ecco un esempio in cui usiamo l'opzione - --s con un argomento del module :

 browserify index.js --s module > dist/module.js 

Questo esporrà il nostro modulo come una variabile globale denominata module .
Fonte .

Aggiornamento: grazie a @fotinakis. Assicurati di passare --standalone your-module-name . Se si dimentica che --standalone accetta un argomento, Browserify potrebbe generare automaticamente un modulo vuoto poiché non è stato in grado di trovarlo.

Spero che questo ti salvi un po 'di tempo.

La risposta di @Matas Vaitkevicius con l’opzione standalone di Browserify è corretta (anche la risposta di @jjh usando la variabile globale della finestra funziona, ma come altri hanno notato, inquina lo spazio dei nomi globale quindi non è l’ideale). Volevo aggiungere un po ‘più di dettagli su come usare l’opzione standalone.

Nello script di origine che desideri raggruppare, assicurati di esporre le funzioni che desideri chiamare tramite module.exports. Nello script client, è ansible chiamare queste funzioni esposte tramite . . Ecco un esempio:

Il mio file sorgente src / script.js avrà questo:
module.exports = {myFunc: func};

Il mio comando browserify sarà simile a questo:
browserify src/script.js --standalone myBundle > dist/bundle.js

E il mio client script dist / client.js caricherà lo script in bundle

e quindi chiama la funzione esposta in questo modo:


Non è necessario richiedere il nome del bundle nello script client prima di chiamare le funzioni esposte, ad esempio non è necessario e non funzionerà.

Infatti, proprio come tutte le funzioni offerte da browserify senza modalità standalone, la funzione require non sarà disponibile al di fuori dello script in bundle . Browserify ti consente di utilizzare alcune funzioni del nodo sul lato client, ma solo nello script in bundle stesso ; non è pensato per creare un modulo standalone che puoi importare e usare ovunque sul lato client, motivo per cui dobbiamo affrontare tutti questi problemi extra solo per chiamare una singola funzione al di fuori del suo contesto in bundle.

Leggi README.md di browserify su --standalone parameter o google “browserify umd”

Ho appena letto le risposte e sembra che nessuno abbia menzionato l’uso dell’ambito della variabile globale? Che è utile se si desidera utilizzare lo stesso codice in node.js e nel browser.

 class Test { constructor() { } } global.TestClass = Test; 

Quindi puoi accedere a TestClass ovunque.

   

Nota: TestClass diventa quindi disponibile ovunque. Che è lo stesso che usare la variabile della finestra.

Inoltre è ansible creare un decoratore che espone una class all’ambito globale. Che è veramente bello ma rende difficile tracciare dove viene definita una variabile.

Hai alcune opzioni:

  1. Lascia che plugin pluginify-bridge esporti automaticamente i moduli in un modulo di ingresso generato. Ciò è utile per i progetti SDK o situazioni in cui non è necessario mantenere manualmente ciò che viene esportato.

  2. Segui uno schema pseudo-namespace per l’esposizione roll-up:

Per prima cosa, organizza la tua libreria in questo modo, approfittando delle ricerche di indice sulle cartelle:

 /src --entry.js --/helpers --- index.js --- someHelper.js --/providers --- index.js --- someProvider.js ... 

Con questo modello, si definisce una voce come questa:

 exports.Helpers = require('./helpers'); exports.Providers = require('./providers'); ... 

Si noti che la richiesta carica automaticamente index.js da ciascuna rispettiva sottocartella

Nelle sottocartelle, puoi semplicemente includere un manifest simile dei moduli disponibili in quel contesto:

 exports.SomeHelper = require('./someHelper'); 

Questo pattern si adatta molto bene e consente il tracciamento contestuale (cartella per cartella) di cosa includere nell’API rolled-up.

A scopo di debug ho aggiunto questa riga al mio code.js:

 window.e = function(data) {eval(data);}; 

Quindi potrei eseguire qualsiasi cosa anche al di fuori del pacchetto.

 e("anything();"); 
 window.LogData =function(data){ return unique(data); }; 

Chiamare la funzione semplicemente tramite LogData(data)

Questa è solo una leggera modifica alla risposta di thejh ma importante