Jak alias modułu z Browserify lib in Gulp?

Question

Browserify readme opisuje tworzenie zewnętrznych wymaga tak: $ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js

Następnie na stronie można zrobić:

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

To działa, jeśli chcesz to zrobić za pomocą wiersza poleceń, ale chciałbym używać Browserify w pliku gulp. Ale wydaje się, że nie ma możliwości dodania nazwy do modułu takiego jak ./myfile-js:my-module w tym przykładzie. Jeśli istnieje opcja, nie znalazłem go. Jedynym sposobem na wymóg mojego modułu w sposób, który opisują, jest wykonanie require(3), ponieważ wydaje się, że Browserify podaje numery modułom, ale te liczby zmieniają się i wyraźnie nie jest to pożądane.

EDIT: Moje obecne rozwiązanie jest, aby to zrobić:

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

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

Jest to obejście problemu i nie jest optymalny, jeśli chcę, aby w pełni korzystać z rurociągu haustem. Chciałbym wiedzieć, jak można to zrobić bez wiersza poleceń, a jeśli nie, dlaczego jest to tylko coś, co można zrobić za pośrednictwem interfejsu CLI?

Answer 1

b.require() z expose opcji.

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

gulp.task("browserify", bundle); 

Browserify-Gulp integracja

innych odpowiedzi sugerują, że vinyl-source-stream jest wymogiem tutaj, ale to niekoniecznie prawda. Nie pokazałeś, w jaki sposób integrujesz Browserify i Gulp. Potrzebujesz tylko vinyl-source-stream, jeśli faktycznie robisz jakąś integrację pomiędzy Browserify i Gulpem po prostu owijając operację bundlingową Browserify w zadaniu Gulp (które ludzie dość często robią), na przykład uruchamiając wtyczkę Gulp na dołączonym wyjściu. Na przykład, można po prostu to zrobić:

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

Oto kilka sposobów, że mogę myśleć, aby osiągnąć to, czego szukasz:

1. Użyj .bundle() metoda:

Wydaje się metodą .bundle() może być to, czego potrzebujesz. Jest wbudowany w browserify. Spróbuj eksperymentować z tym kodem. Pozwala na użycie metod Gulpa w .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() 
}) 

Następnie powinieneś być w stanie połączyć ten plik ./build/bundle.js do <script> tagu jak poniżej: <script src="./build/bundle.js"></script>.

NPM linki: vinyl-source-stream, browserify, gulp (. Wiesz już o tym, ale inni mogą nie zdawać sobie z nich jeszcze)

2. Dokonaj głęboko powiązany Alias:

Jeśli chce zrobić alias, który głębokie linki język zewnętrznego klasy JS (nie klasy CSS), trzeba by spróbować użyć require() wywołanie metody takiego:

const bundle = require('browserify').bundle 

co jest równoważne:

import {bundle} from "browserify" 

Te ostatnie 2 linie założyć, że obiekt JSON jest zwracane z modułu zewnętrznego, która jest wymagana/ujęte jako zależność. Przedmiotem powrót w tym pliku zewnętrznego, powinien wyglądać mniej więcej tak:

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

Potencjał „Gotchya”: Jeśli zależność zewnętrzny nie zwraca obiekt JSON, wówczas .bundle wróci niezdefiniowane.Na przykład, byłoby to zapobiec .bundle w require('browserify').bundle od pracy:

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

Proszę dać mi znać, jeśli potrzebujesz dodatkowej pomocy z haustem po eksperymentować z 1st przykład kodu. (Jest to mieszanka jak gulp.task(), browserify(), .bundle() & .pipe() pracują razem, wraz z kodem zmieszane do niego. Powinieneś być w stanie zmusić go do pracy na komputerze.)

Answer 3

Podczas korzystania łyk z browserify, trzeba zainstalować moduł vinyl-source-stream. Flaga -r odsłania moduły znajdujące się wewnątrz twojego pakietu, które następnie mogą wywołać za pomocą require.

Możesz skonfigurować wiele wpisów i przenieść konfigurację do innego pliku, jeśli masz tylko jeden plik wejściowy, możesz go po prostu przekazać, aby przeszukać i usunąć entries z opcji. debug:true opcja jest taka sama jak -d z linii poleceń

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

Teraz można to zrobić w swoim haustem config:

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'))           
}); 

Jeśli chcesz wystawiać modułu przez inną nazwę użyj z require, użyj opcji expose.

Wygląda na to, że istnieje gotcha dotyczące korzystania z modułów lub modułów non Commonjs, które nie ustawiają się poprawnie module.exports.

Jeśli chcesz użyć modułu, który odsłonięty jako requirable tutaj z innej wiązki (zakładając, że masz kilka wiązek), można:

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

W tym przypadku zawsze, gdy wymagają my-module w obrębie bundle2, próbujesz wywołać go zewnętrznie od require w bundle.js.

Jeśli chcesz zezwolić na pobieranie wielu plików poza pakietem z jednym wymagającym połączeniem, możesz przekazać je jako 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'))           
}); 

Możesz zajrzeć Stefan Imhoff's gulp tutorial a browserify API aby uzyskać więcej informacji.