Please, help to combine require.js and jquery CDN together. I have seen a lot of options to do that, but still have a problem with it. After my code below, I have two errors:
JQuery is not found
problem with a script (where define function placed).
I did everything on prescription from http://requirejs.org/ , but still have those problems.
my code:
<script data-main="js/app" src="js/require.js"</script>
app.js
requirejs.config({
'baseUrl': 'js/',
'path': {
'app': 'app',
'jquery': '//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js',
}
});
requirejs(['app/main']);
main.js
define(["jquery"], function ($) {
$(function() {
$('body').text('hi!');
});
});
Help me to remove these errors
Related
latest beta version (v4) of Bootstrap uses Tether js to position elements, I am unable to let it work in my Requirejs app.
in my requirejs config I have the following shim's
paths: {
jquery: '/path/to/jquery',
tether: '/path/to/tether'
},
shim: {
'bootstrap': ['tether', 'jquery']
}
And when I want to activate tooltips in my app, I use the following code which I think is correct
function page_events() {
requirejs(['bootstrap'], function(bootstrap) {
$('[data-toggle="tooltip"]').tooltip();
});
}
This should load bootstraps dependencies first and afterwards execute the code. So normally Tether should be included before this piece of code.
But the console result is
Uncaught ReferenceError: Tether is not defined
Does anyone have the same issue?
Create a script like this:
define(['lib/tether.min'], function(tether) {
window.Tether = tether;
return tether;
});
Then change this:
paths: {
jquery: '/path/to/jquery',
// tether: '/path/to/tether'
tether: '/path/to/your-own-tether'
},
shim: {
'bootstrap': ['tether', 'jquery']
}
Why? because the browser need this:
window.Tether = tether; // May be both requirejs and tether didn't do this
if you want Tether to be available globally you should include it manually with a script tag. RequireJS doesn't expose it.
<script type="text/javascript" src="/js/tether.js"></script>
<script type="text/javascript" src="/js/optimized.min.js"></script>
I have a library written in AMD style that can be used with RequireJS. jquery and jquery-ui are assumed to be provided by the user of the library. Say it looks like this:
// main-lib.js
define(['jquery', './aux-lib.js'], function ($) { ..(1).. });
// aux-lib.js
define(['jquery', 'jquery-ui'], function ($) { ..(2).. });
I'm trying to figure out how webpack works. For example, say I want to bundle these files into a single AMD style library file that still assumes jquery and jquery-ui from the outside:
// out.js
define(['jquery', 'jquery-ui'], function ($) { ..(1)..(2).. } );
How is this accomplished?
When I run webpack with main-lib.js as entry-point, it will complain that it can't find jquery and jquery-ui. If I configure the correct paths with resolve.alias, it bundles jquery and jquery-ui into out.js, which is not what I want. I tried using output.externals to no avail.
This was a pretty simple, stupid mistake on my part. The relevant field is not output.externals, but simply externals. See here. The other two relevant fields introduced there are inside output, but externals is not.
PS: externals can also be an array. Here is my current configuration:
{
entry: './main-lib.js',
output: {
path: './',
filename: 'out.js',
libraryTarget: 'amd'
},
externals: ['jquery', 'jquery-ui']
}
It's working quite nicely.
I have an application using some third-party libraries as I also have some plug-ins created by myself using jQuery.
The point is: some third-party libraries are using $ and other ones jQuery as naming convention. The way I'm requiring jQuery through RequireJS is just as that:
[...]
var $ = require('jquery');
[...]
This way, I get the following console message as return:
Uncaught ReferenceError: jQuery is not defined jquery.scrolly.js:79
Uncaught TypeError: undefined is not a function
Then, I figured out a candidate solution by creating two variables and requiring jQuery in both:
var $ = require('jquery'),
jQuery = require('jquery');
So, as you can see this "solution" is redundant, unnecessary and unsophisticated — I need something consistent, something better.
Someone can share an idea with me?
Thanks to Daniel A. White, I could use an elegant-way solution called as shim config.
Let's do this step-by-step. My HTML is calling for app.js as require.js wants:
<!DOCTYPE html>
<head>
<!-- ... -->
<script data-main="js/app" src="js/require.js"></script>
</head>
<body>
<!-- ... -->
</body>
</html>
And this is my old js/app.js:
require.config({
baseUrl: 'js',
paths: {
jquery: 'vendor/jquery-2.1.1.min',
modernizr: 'vendor/modernizr-2.6.2.min',
scrolly: 'vendor/jquery.scrolly'
}
});
require(['main']);
Now, here the magic happens — see yourself my new js/app.js:
require.config({
baseUrl: 'js',
paths: {
jquery: 'vendor/jquery-2.1.1.min',
modernizr: 'vendor/modernizr-2.6.2.min',
scrolly: 'vendor/jquery.scrolly'
},
shim: {
'scrolly': {
deps: ['jquery'],
exports: 'scrolly'
}
}
});
require(['main']);
What's the big deal?
The greatness here is the simplicity as RequireJS thinks. As far I could understand, shim config is something like a "dependency manager" for libraries. For example, scrolly is a third-party library dependant of jQuery that have been already loaded — why then should we load it again? There's no need! We just need to inject its usefulness onto scrolly mechanisms that uses jQuery resources.
Another popular example is BackboneJS. Its single hard dependency is UnderscoreJS. To teach Backbone that Underscore is available for use, we supply its dependency through shim config as that:
[...]
shim: {
'backbone': {
deps: ['underscore'],
exports: '_'
}
}
[...]
So, that's it.
I'm new at handling imports with require.js, my question is very simple, let' say I have this config.js script for require:
require.config({
paths: {
jquery: 'libs/jquery/jquery',
underscore: 'libs/underscore/underscore',
backbone: 'libs/backbone/backbone'
}
});
and that is the first script I incorporate in my index.html:
<script data-main="config.js" src="require.js"></script>
From this point on can I use jQuery $, underscore _ and so on or should I also import such libraries in my index.html? It is puzzling how sometimes it works sometimes not, so I guess I am not doing it right.
EDIT: I will explain my question a little better here:
1)
<script data-main="config.js" src="require.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<script>
$( "div.bar" )...
//some other jquery
</script>
<script src="..">//some script which uses require</script>
is jQuery loading twice in this page?
2) I have some libraries which needs jQuery to work, can I just add them to the paths in the require config?
You need to require the modules and provide a callback function to use them:
require(['jquery', 'underscore', 'backbone'],
function ($, _, backbone) {
//the modules are all
//loaded and can be used here now.
});
I am using RequireJS for my Dependency-Management and scrollReveal.js (github-repo) for creating nice effects.
But scrollReveal, for some reasons seems not to work.
Here is some code:
require.config({
...
paths: {
'sreveal': "assets/vendor/scrollreveal.min"
}
...
});
And in my common.js, I use it like this:
define([
'jquery',
'sreveal'
], function ($, sreveal) {
...
});
Usally, this plugin works by setting up a data-attribute for the elements which should reveal.
By using this script without RequireJS, it work's perfectly.
I also tried to init scrollReveal like this:
window.scrollReveal = new scrollReveal();
No result.
Hope you have any experience with this.
ScrollReveal is AMD-compatibile but you need to configure paths element correctly to link its name (which is "scrollReveal") with script's location on your filesystem:
require.config({
// ...
paths: {
'scrollReveal': 'assets/vendor/scrollreveal.min'
}
// ...
});
And then require use it via:
define(['jquery', 'scrollReveal'], function ($, sreveal) {
console.log('ScrollReveal loaded?', sreveal);
});
You could have a look at this answer, I tried to explain how to deal with this kind of problems in practice.