2014-05-16 12 views
29

Il modo in cui sto usando i pacchetti che non disponibile, fuori dalla scatola in NPM, in questo momento è così:Browserify e bower. approccio Canonical

package.json ha:

"napa": { 
    "angular": "angular/bower-angular", 
    "angular-animate": "angular/bower-angular-animate", 
    "d3": "mbostock/d3", 
    "ui-router":"angular-ui/ui-router", 
    "bootstrap":"twbs/bootstrap" 
    }, 
    "scripts": { 
    "install": "node node_modules/napa/bin/napa" 

e che installa i file nella directory node_modules , e li uso in modo nativo come questo

require('angular/angular') 
require('ui-router') 
... etc 

che funziona, ma stavo pensando se è possibile utilizzare i pacchetti installati con pergolato (in pergolato cartella specifica) e li usa in modo nativo come moduli nodo? È possibile modificare la risoluzione del modulo del nodo e forzarlo a cercare i moduli non solo nella directory node_modules, ma anche nella directory di bower? O forse usando npm link o altro?

Esiste una convenzione per utilizzare browserify con bower?

+0

Perché dovresti usare angolare sul server? O quelli che richiedono appaiono nel browser? –

+0

Molto insightful –

risposta

23

È possibile utilizzare browserify-shim e configurare i moduli Bower-installato nel package.json come questo:

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

Allora il vostro codice di essi può require con il loro nome breve, come se non ci fossero i moduli NPM regolari.

Here is the spec for the "browser" package.json property.

+2

sembra proprio l'impostazione di tutto nella sezione "browser" funziona (anche senza installare browserify-shim) ... Ora la domanda: browserify supporta i caratteri jolly nella sezione del browser? possiamo fare: "browser": {"*": "./ bower_components /"}. O ogni singolo pacchetto deve essere elencato esplicitamente? – Agzam

+0

Il supporto con caratteri jolly mi sembra altamente improbabile, ma provalo. –

41

Si può provare a installare tramite debowerify

Il package.json può quindi cercare il seguente:

{ 
    "name": "browserify-begin", 
    "version": "0.0.0", 
    "dependencies": { 
    }, 
    "browserify": { 
    "transform": [ 
     "debowerify" 
    ] 
    }, 
    "devDependencies": { 
    "browserify": "^4.1.5", 
    "debowerify": "^0.7.1", 
    "grunt": "^0.4.5" 
    } 
} 

Dato angolare viene installato con

bower install angular 

Poi all'interno del file js sarà essere come segue:

require("angular"); 
+9

Bel dolore, funziona e basta. –

Problemi correlati