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 (:
Related
I've just started experimenting with Webpacker within an existing app.
From all that I've read, my understanding is that Webpacker and Sprockets can co-exist, and that libraries compiled in Webpacker (e.g., jquery) can be made available to Sprokets via global variables.
But all my jquery in the asset pipeline are raising ReferenceError: Can't find variable: $
Have I misunderstood, or is there a bug in my code?
I've added jquery
yarn add jquery
and assigned the variables in environment.js
const { environment } = require('#rails/webpacker');
const webpack = require('webpack');
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}));
module.exports = environment;
this works:
#javascript/packs/application.js
$(function () {
console.log('Hello World from Webpacker via JQUERY');
});
this does not
#assets/javascripts/application.js
$(function () {
console.log('Hello World from Sprockets via JQUERY');
});
# ReferenceError: Can't find variable: $
What is the expected behaviour?
In the end it is relatively easy to expose jQuery to global from within webpacker. But finding documentation on how to do this was very difficult! Hopefully, this can save someone else a search.
Add expose-loader
yarn add expose-loader -D
And then add the following configuration to config/webpack/environment.js
environment.loaders.append('expose', {
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}, {
loader: 'expose-loader',
options: 'jQuery',
}]
})
I was then able to remove jquery from the asset pipeline, restart the server, and all my remaining jquery functions within sprockets continue to function as expected.
I'm trying out the new ASP.NET 5 with MVC 6, and I'm using bower to manage all my client-side dependencies. Everything is working fine.
But I have a question: When I add a dependency (let's say jQuery). It adds both the /dist and /src along with bower configuration files to the /lib folder of wwwroot. How do I make it include just the compiled source for usage? (So I can reference it in my pages via /lib/jquery/jquery.js?
I have recently been playing in this space and following is something that I have tried:
Deleted the .bowerrrc file to enable installing in the default bower_components folder under the project folder rather than under wwwroor\lib as anything under wwwroot tends to get published.
Added "main-bower-files": "2.9.0" to package.json. This package gets all the files mentioned in the main property of each installed package's bower.json files.
Created a gulp task using the above package
gulp.task('copyMainFiles', function () {
return gulp.src(mainBowerFiles(), { base: 'bower_components' })
.pipe(gulp.dest('wwwroot/lib'));
});
Added a postrestore step to your application's project.json file
"scripts": {
"postrestore": "gulp copyMainFiles",
"prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
}
Updated my application's bower.json to copy files which are not listed in main (like some packages do not have min files as main files..ex: jQuery). The following settings are read by main-bower-files:
"overrides": {
"jquery": {
"main": [ "dist/jquery.js", "dist/jquery.min.js" ]
},
"hammer.js": {
"main": [ "hammer.js", "hammer.min.js" ]
},
"bootstrap": {
"main": [
"./dist/js/bootstrap.js",
"./dist/js/bootstrap.min.js",
"./dist/css/bootstrap.css",
"./dist/css/bootstrap.min.css"
]
}
}
Finally had to update the jquery-validation package to use 1.14.0 instead of 1.11.1 as the previous version does not dist folder and indeed no bower.json...
I am using yeoman webapp generator to generate a template to kick start of my work. At this moment, my bower.json looks like this
{
"name": "sample-project",
"private": true,
"dependencies": {
"bootstrap-sass": "~3.3.5",
"modernizr": "~2.8.3",
"fontawesome": "~4.3.0",
"jquery.smooth-scroll": "~1.5.5",
"animate.css": "~3.3.0",
"jquery.appear": "*"
},
"overrides": {
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss",
"assets/fonts/bootstrap/*",
"assets/javascripts/bootstrap.js"
]
}
},
"devDependencies": {
"chai": "~3.0.0",
"mocha": "~2.2.5"
}
}
Now, in cmd prompt I type this while grunt watch is running
bower install bootstrap-datepicker -S
Then I found "bootstrap-datepicker": "~1.4.0" is inserted into the dependencies section, then
<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
will be automatically wiredep into my index.html, it becomes this
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
.
.
<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<!-- endbower -->
<!-- endbuild -->
Then I try to install another bower component to my webapp
bower install country-region-selector -S
The next thing happens is I found "country-region-selector": "~0.1.8" is under dependencies section of bower.json like bootstrap-datepicker, however the corresponding
<script src="bower_components/country-region-selector/dist/crs.min.js"></script>
doesn't get wiredep into my index.html.
So my question is why grunt wiredep doesn't work on some bower components? The same thing happens to form.validation Could anybody shed some light on this problem?
grunt-wiredep works in a very specific way. The dependencies should be listed in an array inside the main property in bower.josn like the example you mentioned from bootstrap.
The problem you are facing is probably those packages doesn't have a main property or it is using multiple files in a string not an array.
To fix that, you can always define an override for the packages main property likes the following ...
In your grunt file:
wiredep: {
...
overrides: {
'package-name': {
'main': [
'link-to-css-file.css',
'link-to-js-file.js'
]
},
},
},
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.
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