"Impossibile trovare il modulo 'jquery'" - gestione globale per JQuery e AngularJS in browserify con Gulp

Question

Ho cercato di creare un progetto che utilizzi AngularJS, Browserify e Gulp per un'esperienza di sviluppo eccellente, quella che produce una distribuzione " modulo '(in gergo angolare). L'idea è di avere un progetto auto-documentato, come Angular Bootstrap, che produce anche una distribuzione consumabile da utilizzare in un'altra applicazione.

Abbiamo ottenuto ottimi risultati con Gulp, ma abbiamo problemi con browserify/browserify-shim. Inoltre, sfortunatamente, la maggior parte degli esempi là fuori non usa il gulp, o usa gulp-browserify, che è stato messo in blacklist/finito.

Stiamo compresi AngularJS e JQuery da Google CDN come <script> tag e abbiamo dichiarato "angular" : "global:angular" e "jquery" : "global:$" nel nostro browserify-shim config nella package.json, ma stiamo ottenendo "cannot find module" quando cerchiamo di utente var angular = require('angular') e var $ = require('jquery') all'interno del nostro codice browserified (una volta eseguito nel browser).

Ho creato un progetto di esempio che distilla questo down vicino al minimo.

A sample repository of the code is available at

Una volta clonato, si dovrebbe eseguire 'npm install', quindi 'bower install', quindi 'gulp' dalla radice della cartella multi-browserify per generare i file ed eseguire il server di prova.

Con gulp in esecuzione, è possibile accedere al codice HTML dal vivo al http: //: 4000/gulp.html

Qualsiasi aiuto sarebbe molto apprezzato - mi chiedo se abbiamo incontrato un bug/problema con l'intersezione di gulp, browserify, vinyl-source-stream, ecc. o più probabilmente, non lo otteniamo ancora.

Answer 1

Il recupero delle dipendenze da un CDN è un requisito? In caso contrario, potresti utilizzare npm per le tue dipendenze e lasciare che browserify li illumini per te.

JQuery e angolari sono disponibili tramite NPM, in modo da utilizzare jQuery come un esempio si potrebbe semplicemente dichiarare nel vostro package.json, in questo modo:

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

In alternativa, in esecuzione npm install <package> -s dalla directory contenente il package.json installerà il modulo specificato e salvarlo come dipendenza nel file package.json.

Dopo aver installato questa dipendenza (e tutti gli altri si desiderio), si può andare avanti e utilizzare per le app.js come segue:

var $ = require('jquery'); 

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

Semplice come quello, e non c'è bisogno di usare pergolato o browserify-shim - browserify guarderà nella cartella node_modules e li troverà. Non ho provato questo con angolare (ho avuto un problema cercando di installarlo) - ma è disponibile attraverso npm, quindi dovrebbe funzionare.

Answer 2

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

invece di richiedono ( "jquery" ), dare percorso relativo dalla directory dei sorgenti
richiedono (" ./node_modules/jquery/dist/jquery.min. js ");

Provare quanto segue:

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

O

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