Wie kann ich factor-bundle mit browserify programmatisch verwenden?

Question

Ich mag für meinen browserify Einspeisepunkten gemeinsame Abhängigkeiten zu finden Faktor-Bündel verwenden und sie aus in ein einziges gemeinsames Bündel sparen:

https://www.npmjs.org/package/factor-bundle

Die Faktor Bündel Dokumentation macht es sehr einfach scheinen zu tun die Befehlszeile, aber ich möchte es programmgesteuert machen und ich kämpfe darum, mich darum zu kümmern.

Meine aktuelle Skript diese (I reactify bin mit jsx zu verwandeln reagieren die Dateien auch):

var browserify = require('browserify'); 
var factor = require('factor-bundle') 
var glob = require('glob'); 

glob('static/js/'/**/*.{js,jsx}', function (err, files) {  
    var bundle = browserify({ 
    debug: true 
    }); 

    files.forEach(function(f) { 
    bundle.add('./' + f); 
    }); 
    bundle.transform(require('reactify')); 

    // factor-bundle code goes here? 

    var dest = fs.createWriteStream('./static/js/build/common.js'); 
    var stream = bundle.bundle().pipe(dest); 
}); 

Ich versuche, herauszufinden, wie Faktor-Bundle als Plugin zu verwenden, und geben Sie die gewünschte Ausgabedatei für jede der Eingabedateien (dh jeder Eintrag in files)

Answer 1

Diese Antwort ist ziemlich spät, so ist es wahrscheinlich, dass Sie entweder bereits eine Lösung oder eine Arbeit für diese Frage gefunden haben. Ich antworte das, da es my question ziemlich ähnlich ist.

Ich konnte dies mit factor-bundle als browserify-Plugin arbeiten. Ich habe Ihren spezifischen Code nicht getestet, aber das Muster gleich sein soll:

var fs = require('fs'), 
    browserify = require('browserify'), 
    factor = require('factor-bundle'); 

var bundle = browserify({ 
    entries: ['x.js', 'y.js', 'z.js'], 
    debug: true 
}); 

// Group common dependencies 
// -o outputs the entry files without the common dependencies 
bundle.plugin('factor-bundle', { 
    o: ['./static/js/build/x.js', 
     './static/js/build/y.js', 
     './static/js/build/z.js'] 
}); 

// Create Write Stream 
var dest = fs.createWriteStream('./static/js/build/common.js'); 

// Bundle 
var stream = bundle.bundle().pipe(dest); 

Die Faktor-Bundle-Plugin nimmt Ausgabeoptionen o, die die gleichen Indizes wie die Eingabedateien haben müssen.

Leider habe ich nach diesem Punkt nicht herausgefunden, wie ich sonst noch etwas mit diesen Dateien machen kann, weil ich anscheinend nicht auf das stream-Ereignis von factor-bundle zugreifen kann. Für die Minification usw. muss dies möglicherweise auch über ein Browser-Plugin geschehen.

Answer 2

Ich habe grunt-reactify erstellt, um Ihnen eine Bundle-Datei für eine JSX-Datei zu ermöglichen, um die Arbeit mit modularen React-Komponenten zu erleichtern. Alles was Sie tun müssen, ist eine übergeordnete Zielordner und die Quelldateien angeben:

grunt.initConfig({ 
 
    reactify: { 
 
     'tmp': 'test/**/*.jsx' 
 
    }, 
 
})