Browserify überschreibt seine eigene Konfiguration beim Durchsuchen eines Ordners, der eine package.json enthält?

Question

Ich habe eine einfache JavaScript-Anwendung mit AngularJS erstellt.

Ich verwende npm und Bower meine Abhängigkeiten zu verwalten, Gulp meiner Aufgaben zu automatisieren und ich möchte die Commonjs verwenden 'module.exports/require() alles zu binden zusammen: Ich beschloss, gehen für Browserify, um dies alles zu bündeln.

Es gibt my very empty and clean project on Github, wenn Sie einen Blick darauf werfen wollen.

---

Um require('angular') der Lage sein, konfiguriert I Browserify dass AngularJS in die verfügbaren Module Shim, browserify-Shim verwenden. Ziemlich einfach, hier ist der relevante Teil meiner package.json:

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

Es ist recht ordentlich, meine Haupt-JS-Datei nun wie folgt aussieht:

'use strict'; 

var angular = require('angular'); 

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

Und das funktioniert. Jetzt

---

, ich versuche in eine fortgeschrittenere Sachen zu bekommen, mit externen Bibliotheken durch Bower. Sie werden unter bower_components installiert und sehen aus wie mein Projekt, sie haben eine package.json, eine bower.json und alle.

Nehmen Sie zum Beispiel ng-Dialog, die auch require('angular'). Sobald über bower install ng-dialog --save abgerufen wird, kann ich zwei Dinge:

1. Link zu ihrem dist JS-Datei in ein Schlüsselwort (sie ng-dialog sagt) in meinem package.json
2. require('ng-dialog') in Haupt-Haupt-JS-Datei, um meinen Eckige Modul zu haben, hängt davon ab, ihre.

Hier ist die aktualisierte relevante Teil meiner package.json (beachten Sie, dass ng-Dialog tut nicht Notwendigkeit füttert werden):

"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" 
    } 
} 

...und meine aktualisiert app.js Datei:

'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')]); 

ich folgende Fehlermeldung erhalten, während Browserify-ing auf den Punkt:

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

Nach einer guten halben Stunde zwicken um, stellte sich heraus, dass SIMPLY Löschen die package.json Datei von bower_components/ng-dialog macht alles reibungslos.

Was ist los und wie zum Teufel soll ich das ngDialog.min.js bündeln?

Answer 1

Wie in den Browserify Handbook angegeben

Das Modul-System, das Anwendung browserify ist die gleiche wie Knoten, so Pakete npm veröffentlicht, die ursprünglich für den Einsatz in Knoten bestimmt waren, aber nicht Browser im Browser gut funktionieren werden auch.

In zunehmendem Maße veröffentlichen Leute Module zu npm, die absichtlich entworfen sind, um im Knoten und im Browser unter Verwendung von browserify zu arbeiten und viele Pakete auf npm sind für Gebrauch in nur dem Browser bestimmt. npm is for all javascript, Front oder Backend gleichermaßen.

daher die npm Verteilung von Angular verwenden und ngDialog Pakete anstatt die Bower diejenigen

npm install angular ng-dialog --save 

Dies wird mit der Notwendigkeit tun weg die gesamte Konfiguration in package.json zu tun und einfach require() im Projekt Aufruf wird make browserify funktioniert.

Wenn wir ein Knotenmodul im Projekt benötigen, bündelt browserify die Datei im Feld main der package.json des jeweiligen Knotenmoduls. Derzeit verweist das Hauptfeld von ngDialog auf die Datei ngDialog.js, daher müssen Sie sie in ngDialog.min.js ändern, damit browserify diese Datei bündelt. (Dies ist kein großes Problem, wie Sie Ihr browserify Bündel mit gulp-uglify komprimieren)

Ich habe Ihren Code und getan, um die notwendigen Änderungen in ihm gegabelt - Prüfen ihnen hier https://github.com/pra85/angular-seed