Verwenden Sie Browserify und RequireJS auf der gleichen Seite?

Question

So bin ich auf einen interessanten Anwendungsfall gestoßen, in dem ich Browserify verwende, um alle meine Assets in einem Projekt zu bündeln, aber ein großes externes (außerhalb des Projekts) Modul muss geladen werden, wenn ein bestimmtes App-Fenster wird aufgerufen. (Es ist ein Video-Player-Modul, das aus drei Skripten besteht, die bei Bedarf asynchron eingezogen werden).

Im Moment ist von uncalled object Fehlern alle Arten von Fehlern sind immer wenn das requireJS Modul vor der Datei Browserified app.js geladen in ist, zu cannot find module Fehlern, wenn in nach der Code Browserified geladen.

Gibt es trotzdem kann ich Browserify und RequireJS auf der gleichen Seite schön spielen? Ich verliere den Verstand!

Answer 1

TL; DR - window.require in Ihrem browserified Skript verwenden.

Vielleicht würde es noch jemandem helfen. Ich benutze zufällig eine "externe" Dojo-basierte Bibliothek, die vollständig auf AMD basiert, die absolut nicht "browserfähig" und nicht konvertierbar zu CommonJS oder sonstwie ist. Mein eigener Code ist vollständig browserifiziert. Es funktioniert OK wie folgt aus:

1. Laden Sie die AMD-Loader vor dem browserified Skript (die die globale require Funktion definiert):

   <script src="dojo/dojo.js"></script> <!-- RequireJS/AMD loader, defining a global 'require'--> 
   <script src="app/main.js"></script> <!-- The Browserify bundle --> 
   

2. In Ihrem eigenen js, rufen Sie die require Funktion auf window Objekt (denn Sie haben eine lokale browserify- require die globale ein Shadowing)

   window.require(['dojo/dojo'], function (dojo) { ... }); 
   

3. Die 'externe' App oder Bibliothek, die require eigenständig aufruft, um Submodule usw. zu laden, funktioniert gut, weil der Code nicht im Browser-Kontext ist und der globale require dort nicht beschattet ist.

Vielleicht, wenn Sie einig reinen schönen Standard RequireJS Module haben, könnten Sie irgendwie wandeln sie Browserifiable, aber in meinem Fall, dass keine Option war.

Answer 2

Es gibt ein Tool mit der Bezeichnung browserify-derequire, das dieses Problem löst, indem die browserify-Statmenets umbenannt werden, um die Namenskollision zu vermeiden.

npm install -g browserify-derequire 

es als browserify Plugin von changin Ihren Build-Befehl verwenden:

Es kann mit npm mit installiert werden

browserify src/*.js -p browserify-derequire > module.js 

Es ist mehr Diskussion zu diesem Thema an: https://github.com/substack/node-browserify/issues/790

Answer 3

Für eine schluckfreundliche Lösung (ähnlich wie @ Cride5 vorgeschlagen) können Sie gulp-derequire Plugin verwenden.

Grund Beispiel von docs:

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

gulp.task('build', function() { 
    var bundleStream = browserify({entries: './index.js', standalone: 'yourModule'}).bundle(); 
    return bundleStream 
     .pipe(source('yourModule.js')) 
     .pipe(derequire()) 
     .pipe(gulp.dest('./build')); 
}); 

Plugin basiert auch auf derequire Modul, so dass alle Optionen unterstützt werden.