„Can not Modul‚jquery‘gefunden“ - Umgang mit Globals für JQuery und AngularJS in browserify mit Gulp

Question

Ich habe versucht, ein Projekt zu erstellen, das AngularJS, Browserify und Gulp für eine ausgezeichnete Entwickler Erfahrung nutzt, eine, die erzeugt ein verteilbar ' Modul '(im Sprachgebrauch). Die Idee ist, ein selbst-dokumentiertes Projekt zu haben, wie Angular Bootstrap, das auch eine konsumierbare Verteilung zur Verwendung in einer anderen Anwendung erzeugt.

Wir hatten gute Ergebnisse mit Gulp, aber wir haben Probleme mit browserify/browserify-shim. Außerdem verwenden leider die meisten der Beispiele entweder keinen Schluck oder verwenden gulp-browserify, der auf der schwarzen Liste steht.

Wir einschließlich AngularJS und JQuery von Google CDN als <script> Tags und haben "angular" : "global:angular" und "jquery" : "global:$" in unserer browserify-shim config in package.json erklärt, aber wir bekommen "cannot find module", wenn wir versuchen, Benutzer var angular = require('angular') und var $ = require('jquery') innerhalb unserer browserified-Code (sobald es im Browser läuft).

Ich habe ein Beispielprojekt erstellt, das dies auf ein Minimum reduziert.

A sample repository of the code is available at

einmal geklont, würden Sie 'npm install', dann 'bower install', dann 'gulp' aus der Wurzel des multi-browserify Ordner ausführen, um die Dateien und führen Sie den Test-Server zu erzeugen.

Mit Zug läuft, können Sie die Live-HTML unter http: //: 4000/gulp.html

Jede Hilfe wäre sehr dankbar - ich frage mich, wenn wir auf einen Fehler/Problem gekommen mit dem schnitt von gulp, browserify, vinyl-source-stream usw., oder wahrscheinlicher, haben wir es noch nicht ganz verstanden.

Answer 1

Ist das Abrufen Ihrer Abhängigkeiten von einem CDN eine Voraussetzung? Wenn nicht, könnten Sie npm für Ihre Abhängigkeiten verwenden und sie browserisieren, um sie für Sie magisch zu machen.

JQuery und Angular sind über npm zur Verfügung, so mit Jquery als Beispiel könnten Sie einfach es wie so in Ihrem package.json erklären:

... 
    "dependencies": { 
    "jquery": "^1.11.1" 
    }, 
    ... 

Alternativ läuft npm install <package> -s aus dem Verzeichnis mit Ihrem package.json wird die Installation spezifizierten Modul und speichern Sie es als eine Abhängigkeit in Ihrer package.json Datei.

Sobald Sie diese Abhängigkeit installiert haben (und alle anderen, die Sie wünschen), können Sie voran gehen und sie in Ihrem app.js wie folgt:

var $ = require('jquery'); 

$('<div>Hello World, I\'m using JQuery!</div>').appendTo('body'); 

So einfach ist das, und keine Notwendigkeit Bower zu verwenden oder browserify-shim - browserify durchsucht den Ordner node_modules und sucht sie. Ich habe das nicht mit eckigen versucht (ich hatte ein Problem versucht, es zu installieren) - aber es ist verfügbar durch npm, so sollte es funktionieren.

Answer 2

# assuming you have installed jquery locally instead of globally 
npm install jquery -s   # without -g flag 

anstelle von erfordern ( "jquery" ) gibt relativen Pfad vom Quellverzeichnis
erfordern (“./node_modules/jquery/dist/jquery.min. js ");

Versuchen Sie Folgendes:

<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script> 

ODER

<script>var $ = jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>