So I'm using angular in a rails app and using bower to manage my javascript libraries. There have been a few times that have come up where I've had to modify the functionality of certain bower packages. What I've done previously is just copy the source file pulled in by bower, make the changes, then save that in my assets directory and pull that file in directly in my application.js manifest.
Is there a better/cleaner way to do this so that all my javascripts are still pulled in via bower? I know that for gemfiles, I can fork a repo and reference that version in my gemfile, is there something similar for bower?
Are there any best practices here? Thanks a bunch.
EDIT: Also I'm using a bower.json file, something like this:
{
"lib": {
"name": "bower-rails generated lib assets",
"dependencies": {
"angular": "latest",
"angular-ui-router": "latest",
"angular-animate": "latest",
"bootstrap-sass-official": "latest",
"angular-deckgrid":"latest",
...
}
},
"vendor": {
"name": "bower-rails generated vendor assets",
"dependencies": {
// "three.js" : "https://raw.github.com/mrdoob/three.js/master/build/three.js"
}
}
}
You can do the same for bower packages. Fork the repo, make your changes, and then create your own Bower package following this. Once it has been registered, you can just bower install <your-package> directly every time :)
Related
this is probably a newbie question, but i do not understand why bower (1.7.9) cannot find a suitable version for Angular when i run:
bower install
or when it cannot find a suitable version for Angular-translate when i run:
bower update
(Why does it even give me a different error when i run either command in the above?)
I have updated every package to their latest versions and I did not find any package which would require an older version of Angular. Here is my bower.json:
{
"name": "test",
"homepage": "http://www.google.nl",
"version": "0.2.1",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"angular": "1.5.9",
"angular-animate": "1.6.0-rc.2",
"angular-bootstrap": "2.3.0",
"angular-cookies": "1.6.0-rc.2",
"angular-hotkeys": "0.2.2",
"angular-i18n": "1.6.0-rc.2",
"angular-route": "1.6.0-rc.2",
"angular-translate": "2.13.1",
"angular-sanitize": "1.6.0-rc.2",
"angular-translate-loader-static-files": "2.8.1",
"angular-ui-bootstrap-datetimepicker": "2.0.3",
"angular-loading-bar": "0.9.0",
"jquery": "3.1.1",
"moment": "2.17.1",
"ng-dialog": "0.6.4",
"ng-focus-if": "1.0.7",
"ng-tags-input": "3.1.1",
"ngInfiniteScroll": "https://github.com/hlsolutions/ngInfiniteScroll.git#scroll-on-any-lement",
"angular-ui-select": "0.19.6",
"placeholders": "https://github.com/jamesallardice/Placeholders.js.git#~4.0.1",
"angular-atomic-notify": "~1.0.3",
"underscore": "https://github.com/components/underscore.git#~1.8.3",
"angulartics-google-analytics": "0.4.0",
"angular-ui-tinymce": "~0.0.17",
"angular-collection": "~0.5.2",
"angular-mocks": "1.6.0-rc.2",
"angular-translate-handler-log": "2.13.1"
}
}
The problem I see is related to:
"angular-translate": "2.13.1",
...
"angular-translate-loader-static-files": "2.8.1",
The problem is:
- you are requesting exact versions
- angular-translate-loader-static-files also requests angular-translate, but it demands the same version (2.8.1)
- bower does not allow multiple version of the same library
One solution would be:
"angular-translate-loader-static-files": "2.13.1"
The same problem is with angular, you should use "angular": "1.6.0-rc.2" since you already request this version for other modules that depend on angular.
However, this is not necessarily the best way to go, because for example I see you are using some libraries that want angular < 1.6 (ngInfiniteScroll) so you will not be able to make these work in your project if you really want to use the 1.6 version.
A better idea would be to require version more loosely (e.g. "angular": ">=1.5.x"), then let bower find the most suitable version for all your dependencies - but this will most likely require you to work with older versions or risk incompatibility issues.
It often happens when you already have an old version of a library (here it's angular) downloaded in your bower_components of your project.
Generally to fix this, i just empty my bower_components before redo a bower install and everything get back to the normal.
Hope this will help in your case.
See if the final answer to a similar question helps
"Instead of running bower install library -save I did added the latest versions of the libraries directly to my bower.json and added the resolutions..."
I am currently using cropper and have jquery#latest in my package.json. However, cropper requires jquery as its own dependency which ends up with two versions of jquery being installed and used. I tried adding this to my npm-shrinkwrap.json:
"cropper": {
"version": "2.3.3",
"from": "https://registry.npmjs.org/cropper/-/cropper-2.3.3.tgz",
"resolved": "https://registry.npmjs.org/cropper/-/cropper-2.3.3.tgz",
"dependencies": {
"jquery": {
"version": "3.1.0",
"from": "jquery#latest"
}
}
},
But all that ended up happening is that I have two identical versions of jquery installed.
What I need to do is to get cropper to use the local version of jquery in my package.json and not its own version of it. The only way I have accomplished this is to manually delete the node_modules folder from within cropper but this is not a long term solution.
How would I get cropper to use my local jquery? Or get shrinkwrap to not install croppers jquery dependency?
I want to develop javascript with CommonJS module in rails.
also I want to benefit from sprockets.
I found browserify-rails gem to solve that.
After tring, it seems to work well.
I could use module.
But when I change some files and refresh the browser, they are not reflected.
Do you have an idea to solve that ?
using package.json is below.
{
"name": "",
"description": "",
"license": "MIT",
"repository": {},
"dependencies": {
"babelify": "^7.2.0",
"browserify": "^12.0.1",
"browserify-incremental": "^3.0.1"
}
}
Unfortunately, a bug was introduced with browserify-rails v2 and is present in 2.0.0 and 2.0.1. I fixed the bug in 2.0.2 which was just released. Please upgrade to 2.0.2 and clear the asset cache with:
rake tmp:clear
You may need to call it like bundle exec rake tmp:clear. If neither work, then from the project root, rm -rf tmp/cache. Then start Rails again and it should work as expected.
I am trying to install Foundation but its continuously giving me conflict with Jquery
λ bower install foundation
bower foundation#x cached https://github.com/zurb/bower-foundation.git#5.5.1
bower foundation#x validate 5.5.1 against https://github.com/zurb/bower-foundation.git#x
bower foundation#* cached https://github.com/zurb/bower-foundation.git#5.5.1
bower foundation#* validate 5.5.1 against https://github.com/zurb/bower-foundation.git#*
bower jquery#>= 2.1.0 cached https://github.com/jquery/jquery.git#2.1.3
bower jquery#>= 2.1.0 validate 2.1.3 against https://github.com/jquery/jquery.git#>= 2.1.0
bower modernizr#>= 2.7.2 cached https://github.com/Modernizr/Modernizr.git#2.8.3
bower modernizr#>= 2.7.2 validate 2.8.3 against https://github.com/Modernizr/Modernizr.git#>= 2.7.2
bower jquery.cookie#~1.4.0 cached https://github.com/carhartl/jquery-cookie.git#1.4.1
bower jquery.cookie#~1.4.0 validate 1.4.1 against https://github.com/carhartl/jquery-cookie.git#~1.4.0
bower fastclick#>=0.6.11 cached https://github.com/ftlabs/fastclick.git#1.0.6
bower fastclick#>=0.6.11 validate 1.0.6 against https://github.com/ftlabs/fastclick.git#>=0.6.11
bower jquery-placeholder#~2.0.7 cached https://github.com/mathiasbynens/jquery-placeholder.git#2.0.9
bower jquery-placeholder#~2.0.7 validate 2.0.9 against https://github.com/mathiasbynens/jquery-placeholder.git#~2.0.7
bower ECONFLICT Unable to find suitable version for jquery
My bower.json file is this
{
"name": "refactor",
"private": true,
"dependencies": {
"jquery": "~1.11.1",
"raphael": "1.3.x",
"font-awesome": "~4.3.0",
"foundation": "x"
}
}
Use resolutions in your bower.json
{
"name": "refactor",
"private": true,
"dependencies": {
"jquery": "~1.11.1",
"raphael": "1.3.x",
"font-awesome": "~4.3.0",
"foundation": "x"
},
"resolutions": {
"jquery": "~1.11.1"
}
}
This will force bower to use that specific version of jQuery.
Best way to start with is to do
bower cache clean
After that when you do
bower install it will ask you
'Unable to find a suitable version for <Your Dependency Name>, please choose one: ,
then you can enter !1
or !2 , or whatever suits your needs the best.
This essentially adds the resolution block into bower.json as mentioned by #esbanarango but it just gives more control and understanding over what you are doing.
Try using this for the Jquery version:
"jquery": ">= 2.0.0"
However I think you would only need Foundation as a dependency:
or:
{
"name": "PROJECT_NAME",
"dependencies": {
"foundation": "~5.4.7"
}
}
also check here for more details:
http://foundation.zurb.com/docs/sass.html
I'm trying to build a standalone JS lib that uses backbone/jquery. Here's a sample repo that represents the lib I'm trying to build.
I have a few goals for this lib:
Don't expose ANY globals (ie wrap everything properly so nothing leaks)
Don't be affected by any other package tools like requireJS
This lib could be loaded into any other website and I don't want any conflicts with JS that might be there (which is beyond my control) such as requireJS
So, my understanding is that I can use browserify-shim to properly shim these modules such that they can be used as expected with require in browserify. I'm pretty sure the shim is supposed to undef defines and require when it wraps these modules, which would achieve goal #2. Goal #1 would hopefully then be achieved just by using browserify as expected.
I can't really seem to get this to work and I"m not sure if it's just my misunderstanding of browserify-shim. I seem to have the same problem whether or not I run browserify from the command line: browserify src/main.js -o build/main.js or using the gulp build.
Basically, it's as if browserify-shim isn't even running. If you open up the index.html, you can see that the requirejs code I've loaded in is definitely affecting my lib as Backbone is just an empty object, then requirejs crashes.
You can see my package.json here in the repo, and it looks roughly like this:
{
...
"browserify-shim": {
"./node_modules/jquery/dist/jquery.js": "$",
"./node_modules/underscore.js": "_",
"./node_modules/backbone.js": {
"exports": "Backbone",
"depends": [
"./node_modules/underscore.js",
"./node_modules/jquery/dist/jquery.js"
]
}
},
"devDependencies": {
"browserify": "^4.1.11",
"browserify-shim": "^3.6.0",
"gulp": "^3.8.1",
"vinyl-source-stream": "^0.1.1"
},
"dependencies": {
"backbone": "^1.1.2",
"jquery": "^1.11.0",
"underscore": "^1.6.0"
}
}
Not sure what I'm missing here, but I'm having no luck. I was wondering if anyone can help or at least corroborate that what I'm trying to achieve is correct and possible with browserify-shim.
Thanks.
edit
To illustrate that it's definitely not shimming the modules, I've created a build/main.js and a build/main-shimmed.js that are exactly the same. The main.js I ran with no shim config and the shimmed one had the above config. I'm clearly missing something here.
Browserify and Browserify-shim are working in this case, and your main.js is calling the right require.
The problem you are running into is the that libraries you are bundling are also attempting to wire up the AMD style configuration. Your "crossing the streams", beware of Gozer.
Either get versions without the AMD configuration loaders, or comment them out.