web-dev-qa-db-fra.com

Browserify et bower. Approche canonique

La façon dont j'utilise des packages qui ne sont pas disponibles dès le départ dans npm, c'est comme ça:

package.json a:

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

et qui installe des fichiers dans le répertoire node_modules, et je les utilise nativement comme ça

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

Cela fonctionne, mais je me demandais s'il était possible d'utiliser des packages installés avec bower (dans un dossier spécifique à bower) et de les utiliser nativement comme modules de nœuds? Est-il possible de modifier la résolution du module du nœud et de le forcer à rechercher des modules non seulement dans le répertoire node_modules, mais également dans le répertoire bower? Ou peut-être en utilisant npm link ou peu importe?

Existe-t-il une sorte de convention pour utiliser browserify avec bower?

node.jsbowerbrowserify
29
iLemming

Vous pouvez utiliser browserify-shim et configurer les modules installés par Bower dans votre package.json comme ça:

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

Ensuite, votre code peut require les par leur nom court comme s'il y avait des modules npm réguliers.

Voici la spécification de la propriété package.json "browser" .

23
Peter Lyons

Vous pouvez essayer d'installer via debowerify

Le package.json peut alors ressembler à ceci:

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

Étant donné angular est installé avec

bower install angular

Ensuite, dans le fichier js sera comme suit:

require("angular");
41
Ian Lim