Browserify sovrascrive la propria configurazione durante l'esplorazione di una cartella che contiene un pacchetto.json?

Question

Ho creato una semplice applicazione JavaScript utilizzando AngularJS.

sto usando NPM e Bower per gestire le mie dipendenze, Gulp a AUTOMATISE miei compiti e voglio utilizzare i CommonJS 'module.exports/require() a legare tutto insieme: ho deciso di andare per Browserify per raggruppare tutto questo.

C'è my very empty and clean project on Github, se vuoi dare un'occhiata.

---

Per poter require('angular'), ho configurato Browserify a spessorare che AngularJS nei moduli disponibili, utilizzando browserify-shim. Piuttosto semplice, ecco la parte rilevante della mia package.json:

"browser": { 
    "angular": "./bower_components/angular/angular.min.js" 
}, 
"browserify": { 
    "transform": [ 
    "browserify-shim" 
    ] 
}, 
"browserify-shim": { 
    "angular": { 
    "exports": "angular" 
    } 
} 

E 'abbastanza carino, il mio file JS principale appare come segue:

'use strict'; 

var angular = require('angular'); 

angular.module('MyApp', []) 
    .controller('View1Ctrl', ['$scope', require('./view1/view1.js')]) 
    .controller('View2Ctrl', ['$scope', require('./view2/view2.js')]); 

e che funziona.

---

Ora, io sto cercando di entrare in alcune cose più avanzati, utilizzando le librerie esterne disponibili tramite Bower. Vengono installati sotto bower_components e guardano -dove- proprio come il mio progetto, hanno uno package.json, uno bower.json e tutto il resto.

Prendiamo ad esempio ng-finestra, che anche require('angular'). Una volta recuperate via bower install ng-dialog --save, faccio due cose:

1. link del file JS del loro dist a una parola chiave (diciamo ng-dialog) nel mio package.json
2. require('ng-dialog') nel principale file di JS principale al fine di avere il mio modulo angolare dipendono il loro.

Ecco la parte rilevante aggiornata del mio package.json (notare che ng-finestra fa non bisogno di essere spessorato):

"browser": { 
    "angular": "./bower_components/angular/angular.min.js", 
    "ng-dialog": "./bower_components/ng-dialog/js/ngDialog.min.js" 
}, 
"browserify": { 
    "transform": [ 
    "browserify-shim" 
    ] 
}, 
"browserify-shim": { 
    "angular": { 
    "exports": "angular" 
    } 
} 

...e la mia aggiornato app.js di file:

'use strict'; 

var angular = require('angular'); 
require('ng-dialog'); 

angular.module('MyApp', ['ngDialog']) 
    .controller('View1Ctrl', ['$scope', require('./view1/view1.js')]) 
    .controller('View2Ctrl', ['$scope', require('./view2/view2.js')]); 

ottengo il seguente errore durante Browserify-ing questo in su:

Error: Cannot find module 'angular' from 'C:\...\bower_components\ng-dialog\js' 

Dopo una buona mezz'ora di tweaking in giro, si è scoperto che semplicemente eliminazione il file package.json da bower_components/ng-dialog rende tutto senza intoppi.

Cosa sta succedendo e come diavolo dovrei raggruppare quello ngDialog.min.js?

Answer 1

Come indicato nel Browserify Handbook

Il sistema modulare che browserify uso è lo stesso nodo, quindi pacchetti pubblicati a NPM che erano originariamente destinati ad essere utilizzati in nodo, ma non i browser funzionano bene nel browser pure.

Sempre più persone pubblicano moduli su npm che sono intenzionalmente progettati per funzionare sia nel nodo che nel browser utilizzando browserify e molti pacchetti su npm sono destinati all'uso nel solo browser. npm is for all javascript, frontale o back-end allo stesso modo.

quindi usare la distribuzione NPM di Angular e ngDialog pacchetti piuttosto che quelli Bower

npm install angular ng-dialog --save 

In questo modo eliminare con la necessità di fare l'intera configurazione in package.json e semplicemente chiamando require() nel progetto fai funzionare il browserify.

Quando si richiede un modulo nodo nel progetto, browserify raggruppa il file presente nel campo main del file package.json di quel rispettivo modulo nodo. Attualmente come campo principale di ngDialog si fa riferimento al file ngDialog.js, pertanto sarà necessario cambiarlo in ngDialog.min.js in modo che browserify raggruppa quel file. (Questo non è un grosso problema, come si comprime il vostro pacco browserify utilizzando gulp-uglify)

ho biforcuta il codice e fatto i cambiamenti necessari in esso - Dateci qui https://github.com/pra85/angular-seed