permanently ignore a dependency with bower - bower

I am downloading angular, angular-bootstrap and bootstrap with bower. Bootstrap has a dependency on jquery which is installed in the process. But i don't need it in my project as i am only using bootstrap's css.
So i tried to permanently remove the dependency on jquery with
bower uninstall jquery --save
It's uninstalling jquery, but the next time i make bower update, it's downloaded again.
Is there a way to tell bower to permanently skip a dependency ?
edit: I wish there was something like this:
"resolutions": {
"jquery": "no, thanks"
}

Pull request #1394 added official support for this feature and is present in bower version 1.6.3 and later. Check your version with bower -v, and run npm install -g bower to upgrade.
For reference, please see the .bowerrc official specification document. If this doesn't work for you, please file an issue with bower because it is a bug.
We use it like this in our .bowerrc such as the following:
{
"ignoredDependencies": [
"bootstrap",
"bootstrap-sass",
"bootstrap-sass-official"
]
}

We had a similar situation where we had Backbone depend on Underscore in its bower.json, but we're using Lo-Dash in its stead, so Bower was unnecessarily pulling down Underscore for each install. We have automated checks for 3rd party license compliance, so we didn't want anything we don't actually use.
I realize this isn't exactly what they're meant for, but Bower's install-hooks can be used to clean unneeded deps post-install (at least until Bower gets the sort of "no thanks" resolution you hinted at). In your .bowerrc:
{
"directory": "app/bower_components",
"scripts": {
"postinstall": "rm -rf app/bower_components/underscore"
}
}
It's a bit of a hack, but works.

Something you can do also in your bower.json file:
{
"dependencies": {
...
"bootstrap": "^3.2.0"
}
"overrides": {
"bootstrap": {
"dependencies": []
}
}
}
This means: remove all boostrap's dependencies, which is what you want since jquery is the only one (you can check with bower info bootstrap)

Add it to your .gitignore if you commit your dependencies. Otherwise leave it as it makes no difference. You should just use what you need and ignore the rest.

The above answers are correct but an additional solution is to use wiredep as explained in this answer:
grunt-bower-install: exclude certain components
After installing grunt-wiredep, you can add something similar to this to your Grunt.js to exclude jquery from being injected:
// Automatically inject Bower components into the app
wiredep: {
options: {},
app: {
src: ['<%= my.app %>/index.html'],
exclude: ['bower_components/jquery']
}
},
Bower will still download jquery unfortunately but at least you can tell it not to be included in the HTML src.

DISCLAIMER: This doesn't fix your particular problem, but it helped with mine, so maybe it'll help other people.
I'm using grunt-bower-task to pull the files into a lib directory. I wanted to exclude "angular" and just include "angular.js". One of my dependencies was pulling in "angular". In my bower.json I now have:
{
"name": "myapp",
"version": "0.0.1",
"dependencies": {
"angular.js": "1.3.15",
"angular-bootstrap": "0.13.0",
"angular-cookies": "1.3.15",
"angular-storage": "0.5.0",
"angular-ui-router": "0.2.15",
"mjolnic-bootstrap-colorpicker": "2.1"
},
"exportsOverride": {
"angular": {
"dump": "*.xxx"
},
"angular.js": {
"js": [ "*.js", "*.js.map" ],
"css": "*.css"
}
},
"resolutions": {
"angular": "1.3.15"
}
}
In my gruntfile.js I have:
bower: {
install: {
options: {
targetDir: './lib',
layout: 'byType',
install: true,
cleanTargetDir: true,
cleanBowerDir: false
}
}
},
This stops the "angular" files from being copied to the destination.

Related

Update bower dependencies, bower.json in Ember-CLI app [duplicate]

I listed (and/or installed) several dependencies with Bower inside the bower.json file and/or with
bower install https://github.com/username/project.git
That worked fine.
Now I can list all them with
bower list
and then I can pick the name of each dependency of my project and run
bower update dependency-name
Question: How can I bulk update all of them? Or do I have to write a shell script to loop through and update them?
You can update all by running bower update.
Use the -h flag on any command to see how you can use it. Eg bower update -h.
This process is a little slow but is secure because you can realize when your app gets broken.
lets say that you want to update bootstrap you just need to run bower install --save bootstrap and you bower.json file will be updated
Before
{
"name": "my-awesome-app",
"version": "0.0.0",
"dependencies": {
"bootstrap": "~3.0.0",
"requirejs": "~2.1.11",
"modernizr": "~2.8.2",
"jquery": "~2.1.1",
"underscore-amd": "~1.5.2",
"backbone-amd": "~1.1.0",
"require-handlebars-plugin": "~0.8.0"
}
}
After
{
"name": "my-awesome-app",
"version": "0.0.0",
"dependencies": {
"bootstrap": "~3.3.1",
"requirejs": "~2.1.11",
"modernizr": "~2.8.2",
"jquery": "~2.1.1",
"underscore-amd": "~1.5.2",
"backbone-amd": "~1.1.0",
"require-handlebars-plugin": "~0.8.0"
}
}
Used bower-update-all to update all bower dependencies in bower.json, as follows:
npm install -g bower-update-all
bower-update-all
If you want to force all dependencies to update you can use bower install --save --force. This is the same as bower install --save [dep1] [dep2] ...
The short version is bower i -S -f

Why does Bower remove my "resolutions" and how do I stop it

I have a bower.json file
{
"name": "example-project",
"private": true,
"dependencies": {
"angular": "1.2.14",
"angular-scenario": "1.2.14",
"angular-resource": "1.2.14",
"angular-ui-router": "0.2.10",
"angular-strap": "2.0.0"
}
}
When I run grunt (with grunt-bowercopy or grunt-bower-task) I get an error Fatal error: Unable to find suitable version for angular
When I run bower install it says it doesn't know which version of angular to use:
Unable to find a suitable version for angular, please choose one:
1) angular#1.2.14 which resolved to 1.2.14 and is required by angular-scenario#1.2.14, example-project
2) angular#>= 1.0.8 which resolved to 1.2.16 and is required by angular-ui-router#0.2.10
3) angular#~1.2.10 which resolved to 1.2.16 and is required by angular-strap#2.0.0
Prefix the choice with ! to persist it to bower.json
So that explains why grunt was failing - it had transitive dependencies and didn't know which one to select. So I choose 1 (!1 to persist). Now my bower.json looks like this:
{
"name": "example-project",
"private": true,
"dependencies": {
"angular": "1.2.14",
"angular-scenario": "1.2.14",
"angular-resource": "1.2.14",
"angular-ui-router": "0.2.10",
"angular-strap": "2.0.0"
},
"resolutions": {
"angular": "1.2.14"
}
}
Sweet! I run bower install again. This time it succeeds but removes the "resolutions" part. Now it just works for me without resolutions, but my coworkers will get the same error and have to go through the same process.
Why does it do this? Is there any way to stop it from happening?
-Update-
It seems that this is a bug. See bower issues https://github.com/bower/bower/issues/1061 and https://github.com/bower/bower/issues/1272. Hopefully the issue will get some attention and get resolved.
Upgrade to Bower 1.4.0 or greater where this issue is resolved.
Previous Answer:
A workaround suggested by edeustace (see https://github.com/bower/bower/issues/1061) is to add a script to your build (grunt, gulp, etc) that resets the resolutions as they should be after running bower. It's an ugly solution but should do the trick until the issue gets resolved.

Bower install an ignored file

I would like my code to include just one file from nvd3. I could just grab that file and include it in my source directly. But I wanted to have it loaded automatically as a bower dependency.
bower info nvd3 shows that all the individual src files will be ignored. bower install is going to give me to whole library. I don't suppose there's a way to say in my bower.json something like:
"dependencies": {
"nvd3": {
"version": "~1.1.15-beta",
"ignore": ["all the stuff I don't want", "**/*"],
"but-include": ["that one src file I still want", "src/models/tooltip.js"]
}
Just thought I'd ask.
But, assuming this is impossible, should I just put the file in my source, or is there some better way. Like depend on the path to that file in the GitHub repo?
Try Bower Installer. You can use it to basically pull all the required files for a package into a folder of your choice using your bower.json file.
Sample syntax
{
"name" : "test",
"version": "0.1",
"dependencies" : {
"backbone" : "latest",
"requirejs" : "latest"
},
"install" : {
"path" : "some/path",
"sources" : {
"requirejs" : "bower_components/requirejs/require.js"
}
}
}

How to resolve Bower dependency version conflicts?

I have a project that depends on both:
jquery ~1.9.1
another project which in turn depends on jquery >=1.7.2
But when I run bower install, it ends up installing jquery 2.0.2.
This seems broken.
How do I either (a) make it correctly solve the constraints or (b) explicitly force a final version to be installed (workaround)?
You can add resolutions to the object in your bower.json file and specify the component name & version to automatically resolve the conflict when running bower commands.
Like this:
{
"name": "project-x",
"private": true,
"dependencies": {
"bootstrap-sass": "~3.3.7",
"modernizr": "~2.8.3",
"jquery": "~1.11.3"
},
"devDependencies": {},
"resolutions": {
"jquery": "~1.11.3"
}
}
Also you can run bower install and when bower will ask for "suitable version" (if interactive mode is on), prefix choice with !, so bower will save your choice into bower.json file.
use --force-latest
enter link description here

How to use jquery ui with bower?

I'm experimenting with yeoman and bower.
I have created a yeoman webapp using the following command
yo webapp
I want to use jqueryui so I have installed it using bower:
bower install jquery-ui --save
This works fine, but the jQuery UI component doesn't contain a javascript file with "all" the components, it just contains a lot of javascript files, one for each component.
Should I include only the javascript files that I need? Or should I do something else before using jQuery UI?
Thanks for the tips!
Added jquery-ui in dependencies of bower.json (or component.json) along with jquery.
{
…,
"dependencies": {
"jquery": "~1.9.1",
"jquery-ui": "~1.10.3",
...
},
…
}
Install them:
bower install
Then, added path to jqueryui In main.js and require it:
require.config({
paths: {
jquery: '../components/jquery/jquery',
jqueryui: '../components/jquery-ui/ui/jquery-ui',
…
},
shim: {
jqueryui: 'jquery',
…
},
…
});
require(['app', 'jquery', 'jqueryui', 'bootstrap'], function (app, $) {
'use strict';
...
});
It works for me.
In the latest jQuery UI bower component as we speak (v. 1.10.3), you can do the following:
For the CSS themes, include the following link:
<link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">
To get the most components and widgets of jQueryUI running, include the following script:
<script src="bower_components_path/jquery-ui/ui/jquery-ui.js" ></script>
For reference, bower install jquery-ui --save would add the jquery-ui.js dependency to the project, but not the styles. For that I needed to add to the bower.json file an overrides section, as below
{
...,
"dependencies": {
...,
"jquery-ui": "^1.11.4" // already added with --save from bower install command
},
...,
"overrides": {
"jquery-ui": {
"main": [
"themes/smoothness/jquery-ui.css",
"jquery-ui.js"
]
}
}
}
References:
https://stackoverflow.com/a/27419553/4126114
https://github.com/taptapship/wiredep/issues/86
I would just include the files that I need or use the default custom build in the folder (which I believe has all the components) if you require everything or if it's just for experimentation.
<script src="components/jqueryui/ui/jquery-ui.custom.js"></script>
At this time bower pulls down the entire repo and since (from their website) "bower is just a package manager" anything else needed like concatenation or module loading is handled by other tools like sprockets/requirejs.
References:
Using packages with bower on homepage http://bower.io/
Dissusion about bower and pulling entire repos
https://github.com/bower/bower/issues/45
You could use requirejs.config's shim property to achieve your goal:
requirejs.config({
shim: {
'jquery.ui.sortable': {
deps: ['jquery', 'jquery.ui.core', 'jquery.ui.widget', 'jquery.ui.mouse', 'jquery.ui.position'],
exports: '$'
}
}
});
We specified, that jquery.ui.sortable, when required in your project, needs to load and execute the modules listed under deps first, before being executed itself.
Unfortunately, this still produces a race condition... But that is generally how one would go about this (:

Resources