Come aliasare un modulo con Browserify lib in Gulp?

Question

Il Browserify readme descrive la creazione richiede esterna in questo modo: $ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js

Poi nella tua pagina si può fare:

<script src="bundle.js"></script> 
<script> 
    var through = require('through'); 
    var duplexer = require('duplexer'); 
    var myModule = require('my-module'); 
    /* ... */ 
</script> 

Questo funziona se si vuole fare utilizzare la riga di comando, ma mi piacerebbe usare Browserify in un file gulp. Ma non sembra esserci modo di aggiungere un nome ad un modulo come ./myfile-js:my-module nell'esempio. Se c'è un'opzione per questo, non l'ho trovato. L'unico modo per richiedere il mio modulo nel modo in cui descrivono è fare require(3) perché Browserify sembra dare numeri ai moduli, ma questi numeri cambiano e chiaramente questo non è desiderabile.

EDIT: La mia soluzione attuale è quella di fare questo:

var shell = require('gulp-shell'); 

gulp.task('browserify', shell.task([ 
    'browserify -r ./src/bundle.js:bundle > ./build/bundle.js' 
])) 

Si tratta di una soluzione e non è ottimale se voglio trarre il massimo vantaggio del gasdotto Gulp. Mi piacerebbe sapere come questo può essere fatto senza la riga di comando o, in caso contrario, perché questo è solo qualcosa che può essere fatto tramite CLI?

Answer 1

b.require() con expose opzione.

function bundle() { 
    browserify() 
    .require("./myfile-js", {expose: "my-module"}) 
    .require("through") 
    .require("duplexer") 
    .bundle() 
    /* ... */ 
} 

gulp.task("browserify", bundle); 

Browserify-Gulp integrazione

Le altre risposte suggeriscono che vinyl-source-stream è un requisito qui, ma questo non è necessariamente vero. Non hai illustrato come stai integrando Browserify e Gulp. Hai solo bisogno di vinyl-source-stream se stai effettivamente facendo un po 'di integrazione tra Browserify e Gulp oltre il semplice avvolgimento di un'operazione di raggruppamento di Browserify in un'attività Gulp (cosa che le persone comunemente fanno), come l'esecuzione di un plugin Gulp sull'output in bundle. Ad esempio, si può solo fare questo:

var fs = require("fs"); 

gulp.task("browserify", function() { 
    return browserify(/* ... */) 
    /* ... */ 
    .bundle() 
    // But if you're doing something with Gulp here you should use 
    // `vinyl-source-stream` and pipe to `gulp.dest()`. 
    .pipe(fs.createWriteStream("./bundle.js", "utf8")); 
}); 

Answer 2

Qui ci sono un paio di modi che mi viene in mente di compiere ciò che stai cercando:

1. Utilizzare il metodo .bundle():

Sembra che il metodo .bundle() potrebbe essere quello che ti serve. È preinstallato in browserify. Prova a sperimentare con questo codice. Ti consente di utilizzare i metodi di Gulp .pipe().

const browserify = require('browserify') 
const gulp = require('gulp') 
const source = require('vinyl-source-stream') 

gulp.task('browserify', function (cb) { 
    browserify('./src/bundle.js') 
    .bundle() // <- This traverses the /node_modules/ tree to bundle everything ... 
      // into 1 giant stream & eventually a single file. 
    .pipe(source('bundle.js')) // Creates the "output source" file name, 
          // rather than being the "input source". 
    .pipe(gulp.dest('./build/')) 
    return cb() 
}) 

Poi si dovrebbe essere in grado di collegare questo file: ./build/bundle.js a un tag <script> come questo: <script src="./build/bundle.js"></script>.

NPM link: vinyl-source-stream, browserify, gulp (. Sapete già di quelli, ma altri potrebbero non essere ancora a conoscenza di loro)

2. Fare un alias profondo legato:

Se vuole fare un alias, che profondi legami in una classe JS esterno (non una classe CSS), che avrebbe dovuto provare a utilizzare un require() chiamata al metodo come questo:

const bundle = require('browserify').bundle 

che è equivalente a:

import {bundle} from "browserify" 

Tali ultime 2 righe supporre che un oggetto JSON viene restituito dal modulo esterno, che viene richiesto/incluso come dipendenza. L'oggetto di ritorno in quel file esterno, dovrebbe essere simile a questo:

module.exports = { 
    "default": SomeMainClass, 
    "bundle": someExtraFunctionLikeBundle 
} 

Potenziale "Gotchya": Se la dipendenza esterna non restituisce un oggetto JSON, allora la .bundle sarebbero tornati indefinito.Ad esempio, ciò impedirebbe il .bundle in require('browserify').bundle da lavorare:

module.exports = function() {...} // instead of module.exports = {JSON} 

prega fatemi sapere se avete bisogno di ulteriore aiuto con Gulp, dopo aver sperimentato con l'esempio 1 ° codice. (E 'una miscela di come gulp.task(), browserify(), .bundle() & .pipe() lavorare insieme, con il vostro codice misto in esso. Si dovrebbe essere in grado di farlo funzionare sul vostro computer.)

Answer 3

Quando si utilizza sorso con browserify, è necessario installare il modulo vinyl-source-stream. Il flag -r espone i moduli all'interno del pacchetto esternamente che possono quindi chiamare utilizzando require.

È possibile configurare più voci e spostare la configurazione in un file diverso, se si dispone di un solo file di immissione, è invece possibile semplicemente passarlo a browserify e rimuovere entries dalle opzioni. L'opzione debug:true è la stessa di -d dalla riga di comando

var b = browserify(./app/index.js');       

Ora, si può fare questo nella configurazione sorso:

var gulp = require('gulp');              
    var transform = require('vinyl-source-stream');         
    var browserify = require('browserify');           
    var b = browserify({                
    entries:['./app/index.js'],              
    debug:true                  
    });                    

    gulp.task('browserify',function(){            
    return b                  
      .require('through')              
      .require('duplexer')              
      .require('./app/lib/my-module',{expose:'my-module'})      
      .bundle()                
      .pipe(transform('bundle.js'))           
      .pipe(gulp.dest('./app/build'))           
}); 

Se si desidera esporre il modulo con un nome diverso per utilizzare con require, utilizzare l'opzione expose.

Sembra che ci sia un gotcha relativo all'utilizzo di moduli non Commonjs o moduli che non impostano correttamente module.exports.

Se si desidera utilizzare il modulo, che si esposti come requirable qui da un altro fascio (supponendo che si dispone di più pacchetti), si potrebbe:

b 
.external('thorugh') 
.external('my-module') 
.../*more config*/ 
.bundle() 
.pipe(transform('bundle2.js')) 
.pipe(gulp.dest('./app/build') 

In questo caso ogni volta che il vostro bisogno my-module entro bundle2, lo si sta riutilizzando esternamente dallo require in bundle.js.

Se si desidera consentire a più file di essere richiesti all'esterno del pacchetto con una singola chiamata richiesta, è possibile passarli come array.

gulp.task('browserify',function(){            
    return b                  
      .require(['through','duplexer'],{expose:'stream-utils'})                           
      .require('./app/lib/my-module',{expose:'my-module'})      
      .bundle()                
      .pipe(transform('bundle.js'))           
      .pipe(gulp.dest('./app/build'))           
}); 

Potete guardare Stefan Imhoff's gulp tutorial e browserify API per ulteriori informazioni.