Come esporre 'require' al browser quando si utilizza browserify all'interno di gulp?

Quando ho un file di x.js che assomiglia a questo:Come esporre 'require' al browser quando si utilizza browserify all'interno di gulp?

x.js

module.exports = function (n) { return n * 111 }

e corro browserify dalla riga di comando in questo modo:

browserify -r ./x.js > bundle.js

ottengo un file di output che assomiglia a questo (più o meno):

require=(function e(t,n,r){function ...... 
./App.jsx":[function(require,module,exports){ 
module.exports=require('0+DPR/'); 
},{}]},{},[])

Poi nel mio codice del browser Posso fare questo:

<html> 
    <head> 
    <title>React server rendering example</title> 
    <script src="static/bundle.js"></script> 
    </head> 
    <body> 
    Welcome to the React server rendering example. Here is a server-rendered React component: 
    <div id="53a442ff8b39d"></div><script> 
    var x = require('./x.js'); 
    console.log(x(3)) 
</script> </body> 
</html>

Io in realtà ho due domande:

1) Questo non funziona del tutto nel browser ottengo l'errore: "errore non rilevato: Impossibile trovare il modulo' ./x. js'". Perché sta succedendo?

2) In realtà voglio eseguirlo in gulp usando vinyl-source-stream. Ho provato a fare qualcosa di simile nel mio gulpfile ma non funziona. Qualche idea? Ottengo l'errore 'richiedono non è definito'

var gulp = require('gulp'), 
    browserify = require('browserify'), 
    source = require('vinyl-source-stream'); 

var b = browserify({ 
    entries: ['./x.js'], 
    }); 
    b.bundle({debug: false}) 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest('./build'));

fonte

2014-06-20 asolberg

Nel tuo esempio della riga di comando che si sta scrivendo 'bundle.js' nella stessa cartella di' x.js', ma il codice HTML è la lettura da 'statica/bundle.js', e nel vostro' esempio gulp' lo stai scrivendo in 'build/bundle.js'. Qual è in realtà quello che vuoi? – loganfsmyth

Diciamo solo supporre che faccio le bundle.js mv appropriate comando di metterlo al posto giusto per il server web per l'accesso. Questo non è il punto cruciale del problema qui. – asolberg

Speriamo che questo [progetto github] (https://github.com/erichosick/nodeboxrequire) aiuterà. Mostra come richiedere ed esportare le librerie, l'html, il file gulp, ecc. – ehsk

Aggiornamento: È possibile fare riferimento a un alias nel opzione -r

Prova: browserify -r ./x.js:my-module > bundle.js

E nella tua pagina: var x = require('my-module');

NOTA: se è stato utilizzato un interruttore -r su un modulo nodo come fs o tramite , non è necessario un alias per questi perché di solito hanno un nome nel loro file package.json.

Vedere node-browserify -- external requires per ulteriori informazioni.

Se avete intenzione di raggruppare i vostri x.js del genere (con -r switch) ci sono un paio di opzioni

1) Prendere lo script nella vostra pagina html e bundle separatamente.

Creare un file main.js e mettere il vostro JS in esso.

Usa browserify -x ./x.js > main.js

Utilizzando l'interruttore -x, Browserify collegherà i tuoi bundle.js come una dipendenza.

quindi fare riferimento a entrambi i file JS nella tua pagina.

2) Usa il nome generato da Browserify.

var x = require('0+DPR/');

Vedi aggiornamento sopra per creare un alias.

buona risorsa di seguito in quanto si sta cercando di andare oltre con Gulp

Browserify - Bring Nodejs modules to browsers

Per ulteriori Gulp + Browserify (utilizza Watchify anche per livereload) Controllare il blog post sul Viget

Gulp + Browserify: The Everything Post

fonte

2014-06-28 05:30:04 mikekidder

In realtà è ottenuto abbastanza vicino, ad eccezione di due cose:

è necessario esporre il 'x.js' con un nome a vista che è possibile utilizzare per richiedere() in seguito, ad esempio: 'x' è una buona scelta nel vostro caso
invece di require('./x.js'); si dovrebbe fare require('x');

Quindi, per dare la risposta completa:

in lib/x.js

module.exports = function (n) { return n * 111 }

in gulpfile.js

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var transform = require('vinyl-transform'); 

gulp.task('build-lib', function() { 

    var browserified = transform(function(filename) { 
    return browserify(filename) 
     .require(filename, { expose: 'x'}) 
     .bundle(); 
    }); 
    return gulp.src('./lib/x.js') 
    .pipe(browserified) 
    .pipe(gulp.dest('./dist')); // currently this recipe will output to ./dist/x.js. you may use a rename plugin to output it with a different filename for eg. bundle.js 
}); 

gulp.task('default', ['build-lib']);

in un documento HTML (index.html)

<html> 
... 
<script src='dist/x.js'></script> 
<script> 
    var x = require('x'); 
    console.log(x(3)); 
</script>

Un po 'di dettagli la ricetta sorso:

ho usato vinyl-transform invece vinyl-source-stream.

È possibile scegliere di utilizzare vinyl-source-stream ma bisogna ricordarsi di pipa in vinyl-buffer subito dopo che se si hanno più trasformazioni utilizzando plugin che funziona su oggetti file vinile tamponate (invece di streaming di file oggetto in vinile che vinyl-source-stream dà fuori)

Cosa vinyl-transform fa è che si prende cura di entrambi gli oggetti nel buffer di file e lo streaming in vinile per voi.

fonte

2014-08-13 15:13:56

Come esporre 'require' al browser quando si utilizza browserify all'interno di gulp?

risposta

Problemi correlati