Browserowanie zastępuje własną konfigurację podczas przeglądania folderu zawierającego plik package.json?

Question

Stworzyłem prostą aplikację JavaScript, używając AngularJS.

Używam KMP i Bower aby zarządzać zależnościami, Gulp do automatise moje zadania i chcę użyć CommonJS "module.exports/require() związać wszystko razem: ja postanowiliśmy udać dla Browserify, aby połączyć to wszystko.

Jest my very empty and clean project on Github, jeśli chcesz rzucić okiem.

---

Aby móc require('angular'), że skonfigurowany Browserify do pasowana że angularjs do dostępnych modułów, za pomocą browserify-podkładkę. Całkiem proste, oto odpowiednia część mojego package.json:

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

to całkiem zgrabny, mój główny plik JS teraz wygląda tak:

'use strict'; 

var angular = require('angular'); 

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

I to działa.

---

Teraz próbuję dostać się do jakiegoś bardziej zaawansowanych rzeczy, za pomocą zewnętrznych bibliotek dostępne poprzez Bower. Zostaną zainstalowane pod numerem bower_components i wyglądają tak samo jak mój projekt, mają one package.json, bower.json i wszystkie.

Weźmy na przykład ng-dialogowym, który również require('angular'). Raz pobrana poprzez bower install ng-dialog --save, zrobić dwie rzeczy:

1. link plik JS ich dist do danego słowa kluczowego (powiedzmy ng-dialog) w moim package.json
2. require('ng-dialog') w głównej głównego pliku JS, aby mieć moje moduł kątowy zależą ich.

Oto zaktualizowana odpowiednia część mojego package.json (zauważ, że ng-dialog robi nie potrzebę być podkładano):

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

...a mój zaktualizowane app.js 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')]); 

otrzymuję następujący błąd podczas Browserify-ing ten up:

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

Po dobrej pół godzinie szczypanie wokół okazało się, że samo kasowania plik package.json od bower_components/ng-dialog sprawia, że ​​wszystko idzie gładko.

Co się dzieje i jak do cholery powinienem dołączyć to ngDialog.min.js?

Answer 1

Jak stwierdzono w Browserify Handbook

System modułowy że browserify zastosowań jest taka sama jak węzeł, więc pakiety opublikowane do KMP, które były pierwotnie przeznaczone do stosowania w węźle ale nie przeglądarki będzie działać dobrze w przeglądarce także.

Coraz częściej ludzie publikują moduły do ​​npm, które są celowo zaprojektowane do pracy zarówno w węźle, jak iw przeglądarce przy użyciu przeglądarki internetowej, a wiele pakietów na npm jest przeznaczonych do użycia tylko w przeglądarce. npm is for all javascript, zarówno z przodu, jak iz tyłu.

zatem wykorzystać dystrybucję npm z Angular i ngDialog pakietów, zamiast te Bower

npm install angular ng-dialog --save 

To będzie pozbycie się z koniecznością zrobienia całą konfigurację w package.json i po prostu wzywające require() w projekcie sprawić, że przeglądarka będzie działać.

Gdy potrzebujemy dowolnego modułu węzła w projekcie, przeszukaj plik zawierający plik w polu main w tym pakiecie .json tego odpowiedniego modułu węzła. Obecnie jako główne pole ngDialog odwołuje się do pliku ngDialog.js, dlatego trzeba go zmienić na ngDialog.min.js, aby przeglądać wiązki w tym pliku. (Nie jest to poważny problem, jak skompresować wiązkę browserify korzystając gulp-uglify)

Mam rozwidlony swój kod i zrobić niezbędne zmiany w nim - Sprawdź je tutaj https://github.com/pra85/angular-seed